Embed Size (px)
DESCRIPTION
Adding and customizing categories and products in WooCommerce. Slides are from my Vancouver WordCamp presentation.
Citation preview
Ge#ng Started with WooCommerce Categories and Products
• Merrill M. Mayer
• Kool Kat Web Designs
• h>p://www.koolkatwebdesigns.com/
• @koolkatweb
Overview
• Se#ng up categories and products
• CreaFng custom templates
• Using hooks and filters
Case Study Bon Vivant
• h>p://bon-‐vivant.com/
• Bon Vivant is Sea>le area cooking school where students may register for classes online.
Category LisFng
Single Product Page
Single Product -‐ Waitlist
Dashboard – Catalog Se#ngs
Dashboard -‐ Catalog Image Se#ngs
Dashboard Categories
Dashboard Products – Adding Text
Dashboard Products – Price
Dashboard Products – Inventory
Default Category Layout Single Classes
Default Category Layout August
Default Single Product Layout
Category LisFng
Single Product Page
Single Product -‐ Waitlist
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
WooCommerce Templates
Plugin Templates Theme Templates
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.
Modifying a Template content-‐product_cat.php
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.
Modifying a Template single-‐product/add-‐to-‐cart/simple.php
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
Modifying a Template single-‐product/product-‐image.php
AcFons and Filters
• woocommerce_product_tabs
(remove unused tabs)
• woocommerce_a\er_add_to_cart_form
(add back to list bu4on)
AcFons and Filters woocommerce_product_tabs
AcFons and Filters woocommerce_a\er_add_to_cart_form
WooCommerce DocumenaFon
• h>p://docs.woothemes.com/documentaFon/plugins/woocommerce/
