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

WooCommerce Theme Development Workshop

WooCommerce Theme Development Workshop

For WooConf 2016 - Austin

Zac Gordon

April 08, 2016

More Decks by Zac Gordon

Other Decks in Technology


  1. WooCommerce Theme Development Zac Gordon | wp.zacgordon.com | @zgordon

  2. What We Will Cover - Add WC Theme Support -

    WC Template Hierarchy - Overriding Templates - Updating Templates - Template Functions - Theme Hooks
  3. Recommended Prereqs For WC Theme Developers - Ability to setup

    and use WC - Child Themes - WP Template Hierarchy - WP Hooks - HTML, CSS, JS, PHP
  4. About This Workshop And My Interest in It - Based

    on Treehouse Course - Released for WooConf 2015 - Why I Love Woo!
  5. add_theme_support( 'woocommerce' );

  6. Just like WP, WC is built on a structured template

  7. WC Template Files in WP

  8. WC on Github https://github.com/woothemes/woocommerce/tree/master/templates

  9. Overriding Templates https://docs.woothemes.com/document/template-structure/ - Works just like Child Themes -

    Create a “woocommerce” folder in your theme folder - Copy over only the files you need - Keep the same structure as the plugin “template” folder
  10. Practice: Let’s Play! Add a “woocommerce” folder to any theme

    and start customizing templates
  11. Updating Templates https://docs.woothemes.com/document/fix-outdated-templates-woocommerce/ https://docs.woothemes.com/document/template-structure/ - WC templates do get updated

    - May have to update your template files - Admin > WooCommerce > System Status
  12. Template Functions https://docs.woothemes.com/document/introduction-to-hooks-actions-and-filters/ - Load other templates - Conditional tests

    - Get & Set WC content - wc-template-functions.php
  13. Practice: Let’s Explore! Explore the functionality and source code of

    the different template functions available in WC.
  14. WC Hooks: Actions & Filters https://docs.woothemes.com/document/introduction-to-hooks-actions-and-filters/ https://docs.woothemes.com/wc-apidocs/hook-docs.html - Preferred way

    for many modifications - Actions let us add code - Filters let us modify content - functions.php - Wc-template-hooks.php - Query Monitor / Hookr.io - Find Where
  15. Practice: Hooking it Up Practice using actions and filters to

    move around and modify code. Suggestion - try the Cart & Checkout
  16. Learn More Take the course for free!!! - wp.zacgordon.com -

    Look for WP Courses - WC Theme Development - Sign Up through Treehouse