Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WooCommerce Theme Development Workshop
Search
Zac Gordon
April 08, 2016
Technology
2.3k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WooCommerce Theme Development Workshop
For WooConf 2016 - Austin
Zac Gordon
April 08, 2016
More Decks by Zac Gordon
See All by Zac Gordon
How We Can Make WordPress Better for the JAMstack
zgordon
0
350
Decoupled Days - JAMstack and WordPress for 2020
zgordon
0
200
The State of JavaScript and WordPress in 2020
zgordon
0
970
100 Things to Know About Building, Selling and Supporting Online Courses and Content
zgordon
0
710
Highly Dynamic WordPress Sites with Gatsby and WordPress
zgordon
0
1.1k
How the New Redux Based Data API is Changing Everything in WordPress*
zgordon
0
430
The Data API in WordPress - WCMIA 2019
zgordon
0
1.1k
Building Custom WordPress Blocks with React - WCPHX 2019
zgordon
0
97
React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018
zgordon
0
270
Other Decks in Technology
See All in Technology
人手不足への挑戦:車両保全を支えるIoTとクラウド内製化の道【SORACOM Discovery 2026】
soracom
PRO
0
170
書籍セキュアAPIについて
riiimparm
0
390
AIで楽になるはずが、なぜ疲れる?
kinopeee
0
150
大 AI 時代におけるC# の事情 ~ぶっちゃけトークを交えながら~
nenonaninu
1
560
なぜ、あなたのAPIは使われないのか? AX時代の設計原則、ガードレール、運用体制
yokawasa
1
260
運用を犠牲にせずコストを制御し事業成長を支える B2B SaaS ID管理基盤におけるS3 Tableのログストレージ活用
kaminashi
1
120
Webの技術とガジェットで子どもも大人も楽しめるワクワク体験を提供する / Qiita Tech Festa Day 2026
you
PRO
1
320
AI時代の強いチームの作り方
yuukiyo
13
7.8k
脱Jenkins、インターン生が挑んだCIツールGitHubActions移行
mixi_engineers
PRO
1
280
ソフトウェアアーキテクチャ研修【MIXI 26新卒技術研修】
mixi_engineers
PRO
2
1k
AI工学特論: MLOps・継続的評価
asei
11
3k
最新IoT事例11選に学ぶ!現場の成功パターンと実践のコツ【SORACOM Discovery 2026】
soracom
PRO
0
120
Featured
See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
560
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
580
Discover your Explorer Soul
emna__ayadi
2
1.2k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Accessibility Awareness
sabderemane
1
170
BBQ
matthewcrist
89
10k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.6k
How to Talk to Developers About Accessibility
jct
2
460
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
260
Testing 201, or: Great Expectations
jmmastey
46
8.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Transcript
WooCommerce Theme Development Zac Gordon | wp.zacgordon.com | @zgordon
What We Will Cover - Add WC Theme Support -
WC Template Hierarchy - Overriding Templates - Updating Templates - Template Functions - Theme Hooks
Recommended Prereqs For WC Theme Developers - Ability to setup
and use WC - Child Themes - WP Template Hierarchy - WP Hooks - HTML, CSS, JS, PHP
About This Workshop And My Interest in It - Based
on Treehouse Course - Released for WooConf 2015 - Why I Love Woo!
add_theme_support( 'woocommerce' );
Just like WP, WC is built on a structured template
system.
WC Template Files in WP
WC on Github https://github.com/woothemes/woocommerce/tree/master/templates
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
Practice: Let’s Play! Add a “woocommerce” folder to any theme
and start customizing templates
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
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
Practice: Let’s Explore! Explore the functionality and source code of
the different template functions available in WC.
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
Practice: Hooking it Up Practice using actions and filters to
move around and modify code. Suggestion - try the Cart & Checkout
Learn More Take the course for free!!! - wp.zacgordon.com -
Look for WP Courses - WC Theme Development - Sign Up through Treehouse