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
1
2.1k
WooCommerce Theme Development Workshop
For WooConf 2016 - Austin
Zac Gordon
April 08, 2016
Tweet
Share
More Decks by Zac Gordon
See All by Zac Gordon
How We Can Make WordPress Better for the JAMstack
zgordon
0
190
Decoupled Days - JAMstack and WordPress for 2020
zgordon
0
140
The State of JavaScript and WordPress in 2020
zgordon
0
830
100 Things to Know About Building, Selling and Supporting Online Courses and Content
zgordon
0
520
Highly Dynamic WordPress Sites with Gatsby and WordPress
zgordon
0
830
How the New Redux Based Data API is Changing Everything in WordPress*
zgordon
0
290
The Data API in WordPress - WCMIA 2019
zgordon
0
910
Building Custom WordPress Blocks with React - WCPHX 2019
zgordon
0
66
React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018
zgordon
0
240
Other Decks in Technology
See All in Technology
データベース02: データベースの概念
trycycle
0
160
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
230
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
530
Cracking the KubeCon CfP
inductor
2
250
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
開発パフォーマンスを最大化するための開発体制
ham0215
2
420
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
160
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
410
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Practical Orchestrator
shlominoach
182
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
How STYLIGHT went responsive
nonsquared
92
4.8k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Done Done
chrislema
178
15k
For a Future-Friendly Web
brad_frost
172
9k
Designing for humans not robots
tammielis
248
25k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Automating Front-end Workflow
addyosmani
1356
200k
Web Components: a chance to create the future
zenorocha
305
41k
Facilitating Awesome Meetings
lara
42
5.6k
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