Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making WooCommerce Your Own

Making WooCommerce Your Own

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


Leo Gopal

June 18, 2015


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

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

  4. @leogopal Why… Everyone wants to stand out. 

    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.

    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