Making WooCommerce Your Own

Making Your Own
with @leogopal
<?php
?>

@leogopal
3 Q’s
Why?
Who?
How?

@leogopal
Why…
Everyone wants to stand out.  
 
Customising your WooCommerce Store with solid a solid Brand Identity to set you
apart will help customers identify you, recognise you, and share you with others.
BUT - only if they want or care about your product in the ﬁrst place.  
 
Design is an ampliﬁer.
would you want to customise your store?

@leogopal
Who…
0.* Store owners.
1. Developers / Designers. 
2. All of the above is == 1.
would want to customise WooCommerce?
because real programmers start counting from 0.

@leogopal
How…
0. Store owners. or 1. Developers / Designers.
to tell if you are 0. or 1.
A programmers wife asks her to go the store
The programmer's wife tells her:
"Run to the store and pick up a loaf of bread, If they have eggs, get a dozen."
The programmer comes back with 12 loaves of bread.

@leogopal
How…
0. Buy/Get themes (like Storefront)
1. Hire Out (if you have the budget) 
2. DIY (if you have the skill & time)
3. Customiser? (Storefront Designer or LayersWP)
would you customise WooCommerce?

@leogopal
Storefront Designer
- Layout Options
- Header Options
- Button Options
- Typography Options
- Footer Credits, and more

@leogopal
To child-theme, or not to child-theme?

@leogopal
LayersWP.com by obox

@leogopal
Storefront Child Themes
Galleria Deli

@leogopal
Should you create your own Child Themes?
If you like head starts, the answer is Yes!

@leogopal
Important ‘Parenting’ Considerations
- Choose a quality ‘Parent’ theme (Storefront is great!).
- Understand the Parent themes structure.
- Understand WordPress’ Template Hierarchy
- Understand Hooks and Filters
- Understand WooCommerce’s Template Overrides

@leogopal
- WordPress Child-theme Starter Kit? Here you go:
- https://github.com/leogopal/wp-child-theme-starter
- style.css
- functions.php
The main ﬁles you need are:

@leogopal
Any function in a parent themes functions.php ﬁle that
is wrapped in:
if ( function_exists(‘parent_function’) ) { // stuff }
Can be overridden.

@leogopal
Where possible, use the appropriate hooks and filters:
Example Filter: Change ‘Add to cart’ text
add_filter( 'add_to_cart_text', 'woo_custom_cart_button_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text' );
function woo_custom_cart_button_text() {
return __( ‘Add me to your Cart, Pweddie Pwease?’, 'woocommerce' );
}

@leogopal
function storefront_add_topbar() {
?>
<div id="topbar">
<div class="col-full">
<p>Your text here</p>
</div>
</div>
<?php
}
add_action( 'storefront_before_header', 'storefront_add_topbar' );
Example Action: Add a top-bar to storefront site

@leogopal
#topbar {
background-color: #1F1F20;
height: 40px;
line-height: 40px;
}
#topbar p {
color: #fff;
}
Example Action: Add a top-bar to storefront site

@leogopal
Storefront: Learn the Hooks in your Parent theme
https://github.com/woothemes/storefront/blob/master/inc/structure/hooks.php

@leogopal
Getting Hook’d
WordPress Codex on Hooks (Actions & Filters)
http://codex.wordpress.org/Plugin_API/Hooks
WooCommerce Docs on Hooks (Actions & Filters)
http://docs.woothemes.com/document/hooks/

@leogopal
Override WooCommerce Templates
To overide a WooCommerce Plugin template, copy:
woocommerce/templates/folder/template-name.php
to:
yourtheme/woocommerce/folder/template-name.php
Learn more: http://docs.woothemes.com/document/template-structure/

@leogopal
Override WooCommerce Templates
https://github.com/woothemes/woocommerce/tree/2.3.8/templates

@leogopal
If that doesn’t work, call a ninja

Thank You!
Lets do this again
some time.
with @leogopal
https://speakerdeck.com/leogopal/making-woocommerce-your-own

Making WooCommerce Your Own

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Making WooCommerce Your Own

Similar a Making WooCommerce Your Own (20)

Último

Último (20)

Making WooCommerce Your Own