Making WooCommerce Your Own

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

Transcript

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