Adding and customizing categories and products in WooCommerce. Slides are from my Vancouver WordCamp presentation.

1. Ge#ng
Started
with
WooCommerce
Categories
and
Products

2. • Merrill
M.
Mayer
• Kool
Kat
Web
Designs
• h>p://www.koolkatwebdesigns.com/
• merrill.mayer@yahoo.com
• @koolkatweb

3. Overview
• Se#ng
up
categories
and
products
• CreaFng
custom
templates
• Using
hooks
and
filters

4. Case
Study
Bon
Vivant
• h>p://bon-­‐vivant.com/
• Bon
Vivant
is
Sea>le
area
cooking
school
where
students
may
register
for
classes
online.

5. Category
LisFng

6. Single
Product
Page

7. Single
Product
-­‐
Waitlist

8. Dashboard
–
Catalog
Se#ngs

9. Dashboard
-­‐
Catalog
Image
Se#ngs

10. Dashboard
Categories

11. Dashboard
Products
–
Adding
Text

12. Dashboard
Products
–
Price

13. Dashboard
Products
–
Inventory

14. Default
Category
Layout
Single
Classes

15. Default
Category
Layout
August

16. Default
Single
Product
Layout

17. Category
LisFng

18. Single
Product
Page

19. Single
Product
-­‐
Waitlist

20. WooCommerce
Templates
CreaFng
Templates
• Copy
the
files
from
the
WooCommerce
plugins
template
directory
to
a
WooCommerce
directory
in
your
theme
folder.
• You
only
need
to
copy
files
that
you
wish
to
modify,
not
every
template
file
• Do
not
copy
the
templates
folder
• Do
not
modify
files
in
the
plugin
directory

21. WooCommerce
Templates
Plugin
Templates
Theme
Templates

22. Modifying
a
Template
Displaying
Products
by
Date
within
Category
• Remove
link
to
sub-­‐category
• Query
the
products
ordering
by
date
• Call
the
product
template
to
output
the
products
The
code
is
in
content-­‐product_cat.php.

23. Modifying
a
Template
content-­‐product_cat.php

24. Modifying
a
Template
Showing
the
Waitlist
Form
• Check
if
the
product
is
in
stock
• If
the
product
not
in
stock
show
the
waitlist
email
form
The
code
is
in
single-­‐product/add-­‐to-­‐cart/simple.php.

25. Modifying
a
Template
single-­‐product/add-­‐to-­‐cart/simple.php

26. Modifying
a
Template
Showing
the
Image
CapFon
• Check
if
a
post
thumbnail
exists
• Grab
the
post
excerpt
(capFon)
• Add
HTML
to
display
the
capFon
The
code
is
in
single-­‐product/product-­‐image.php

27. Modifying
a
Template
single-­‐product/product-­‐image.php

28. AcFons
and
Filters
• woocommerce_product_tabs
(remove
unused
tabs)
• woocommerce_aer_add_to_cart_form
(add
back
to
list
bu4on)

29. AcFons
and
Filters
woocommerce_product_tabs

30. AcFons
and
Filters
woocommerce_aer_add_to_cart_form

31. WooCommerce
DocumenaFon
• h>p://docs.woothemes.com/documentaFon/plugins/
woocommerce/