Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 se...
@leogopal
Who…
0.* Store owners.
1. Developers / Designers.

2. All of the above is == 1.
would want to customise WooComme...
@leogopal
How…
0. Store owners. or 1. Developers / Designers.
to tell if you are 0. or 1.
A programmers wife asks her to g...
@leogopal
How…
0. Buy/Get themes (like Storefront)
1. Hire Out (if you have the budget)

2. DIY (if you have the skill & t...
@leogopal
Storefront
@leogopal
@leogopal
Storefront Designer
- Layout Options
- Header Options
- Button Options
- Typography Options
- Footer Credits, an...
@leogopal
To child-theme, or not to child-theme?
@leogopal
but first…
@leogopal
@leogopal
LayersWP.com by obox
@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 ...
@leogopal
Important ‘Parenting’ Considerations
- WordPress Child-theme Starter Kit? Here you go:
- https://github.com/leog...
@leogopal
Important ‘Parenting’ Considerations
Any function in a parent themes functions.php file that
is wrapped in:
if ( ...
@leogopal
Important ‘Parenting’ Considerations
Where possible, use the appropriate hooks and filters:
Example Filter: Chang...
@leogopal
Important ‘Parenting’ Considerations
Where possible, use the appropriate hooks and filters:
function storefront_a...
@leogopal
Important ‘Parenting’ Considerations
Where possible, use the appropriate hooks and filters:
#topbar {
background-...
@leogopal
Storefront: Learn the Hooks in your Parent theme
https://github.com/woothemes/storefront/blob/master/inc/structu...
@leogopal
Getting Hook’d
WordPress Codex on Hooks (Actions & Filters)
http://codex.wordpress.org/Plugin_API/Hooks
WooComme...
@leogopal
Override WooCommerce Templates
To overide a WooCommerce Plugin template, copy:
woocommerce/templates/folder/temp...
@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
Upcoming SlideShare
Loading in …5
×

Making WooCommerce Your Own

1,922 views

Published on

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

  • Be the first to comment

Making WooCommerce Your Own

  1. 1. Making Your Own with @leogopal <?php ?>
  2. 2. @leogopal 3 Q’s Why? Who? How?
  3. 3. @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?
  4. 4. @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.
  5. 5. @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.
  6. 6. @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?
  7. 7. @leogopal Storefront
  8. 8. @leogopal
  9. 9. @leogopal Storefront Designer - Layout Options - Header Options - Button Options - Typography Options - Footer Credits, and more
  10. 10. @leogopal To child-theme, or not to child-theme?
  11. 11. @leogopal but first…
  12. 12. @leogopal
  13. 13. @leogopal LayersWP.com by obox
  14. 14. @leogopal LayersWP.com by obox
  15. 15. @leogopal Storefront Child Themes Galleria Deli
  16. 16. @leogopal Should you create your own Child Themes? If you like head starts, the answer is Yes!
  17. 17. @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
  18. 18. @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:
  19. 19. @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.
  20. 20. @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' ); }
  21. 21. @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
  22. 22. @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
  23. 23. @leogopal Storefront: Learn the Hooks in your Parent theme https://github.com/woothemes/storefront/blob/master/inc/structure/hooks.php
  24. 24. @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/
  25. 25. @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/
  26. 26. @leogopal Override WooCommerce Templates https://github.com/woothemes/woocommerce/tree/2.3.8/templates
  27. 27. @leogopal If that doesn’t work, call a ninja
  28. 28. Thank You! Lets do this again some time. with @leogopal https://speakerdeck.com/leogopal/making-woocommerce-your-own

×