Slide 1
Slide 1 text
WooCommerce
Theme Development
Zac Gordon | wp.zacgordon.com | @zgordon
Slide 2
Slide 2 text
What We
Will Cover
- Add WC Theme Support
- WC Template Hierarchy
- Overriding Templates
- Updating Templates
- Template Functions
- Theme Hooks
Slide 3
Slide 3 text
Recommended
Prereqs
For WC Theme Developers
- Ability to setup and use WC
- Child Themes
- WP Template Hierarchy
- WP Hooks
- HTML, CSS, JS, PHP
Slide 4
Slide 4 text
About This
Workshop
And My Interest in It
- Based on Treehouse Course
- Released for WooConf 2015
- Why I Love Woo!
Slide 5
Slide 5 text
add_theme_support( 'woocommerce' );
Slide 6
Slide 6 text
Just like WP, WC is built on a
structured template system.
Slide 7
Slide 7 text
WC Template Files in WP
Slide 8
Slide 8 text
WC on Github
https://github.com/woothemes/woocommerce/tree/master/templates
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Practice: Let’s Play!
Add a “woocommerce” folder to any
theme and start customizing
templates
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
Practice: Let’s Explore!
Explore the functionality and source
code of the different template
functions available in WC.
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Practice: Hooking it Up
Practice using actions and filters to
move around and modify code.
Suggestion - try the Cart & Checkout
Slide 16
Slide 16 text
Learn More
Take the course for free!!!
- wp.zacgordon.com
- Look for WP Courses
- WC Theme Development
- Sign Up through Treehouse