WooCommerce Cape Town Meetup - 18 June 2015. Theming and Customizing in WooCommerce and WordPress Theme Development

1. Making Your Own
with @leogopal
<?php
?>

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

4. @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 first place.
Design is an amplifier.
would you want to customise your store?

5. @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.

6. @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.

7. @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?

8. @leogopal
Storefront

9. @leogopal

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

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

12. @leogopal
but first…

13. @leogopal

14. @leogopal
LayersWP.com by obox

15. @leogopal
LayersWP.com by obox

16. @leogopal
Storefront Child Themes
Galleria Deli

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

18. @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

19. @leogopal
Important ‘Parenting’ Considerations
- WordPress Child-theme Starter Kit? Here you go:
- https://github.com/leogopal/wp-child-theme-starter
- style.css
- functions.php
The main files you need are:

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

21. @leogopal
Important ‘Parenting’ Considerations
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' );
}

22. @leogopal
Important ‘Parenting’ Considerations
Where possible, use the appropriate hooks and filters:
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

23. @leogopal
Important ‘Parenting’ Considerations
Where possible, use the appropriate hooks and filters:
#topbar {
background-color: #1F1F20;
height: 40px;
line-height: 40px;
}
#topbar p {
color: #fff;
}
Example Action: Add a top-bar to storefront site

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

25. @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/

26. @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/

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

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

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