getting started with woo commerce
DESCRIPTION
Adding and customizing categories and products in WooCommerce. Slides are from my Vancouver WordCamp presentation.TRANSCRIPT
![Page 1: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/1.jpg)
Ge#ng Started with WooCommerce Categories and Products
![Page 2: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/2.jpg)
• Merrill M. Mayer
• Kool Kat Web Designs
• h>p://www.koolkatwebdesigns.com/
• @koolkatweb
![Page 3: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/3.jpg)
Overview
• Se#ng up categories and products
• CreaFng custom templates
• Using hooks and filters
![Page 4: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/4.jpg)
Case Study Bon Vivant
• h>p://bon-‐vivant.com/
• Bon Vivant is Sea>le area cooking school where students may register for classes online.
![Page 5: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/5.jpg)
Category LisFng
![Page 6: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/6.jpg)
Single Product Page
![Page 7: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/7.jpg)
Single Product -‐ Waitlist
![Page 8: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/8.jpg)
Dashboard – Catalog Se#ngs
![Page 9: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/9.jpg)
Dashboard -‐ Catalog Image Se#ngs
![Page 10: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/10.jpg)
Dashboard Categories
![Page 11: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/11.jpg)
Dashboard Products – Adding Text
![Page 12: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/12.jpg)
Dashboard Products – Price
![Page 13: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/13.jpg)
Dashboard Products – Inventory
![Page 14: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/14.jpg)
Default Category Layout Single Classes
![Page 15: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/15.jpg)
Default Category Layout August
![Page 16: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/16.jpg)
Default Single Product Layout
![Page 17: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/17.jpg)
Category LisFng
![Page 18: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/18.jpg)
Single Product Page
![Page 19: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/19.jpg)
Single Product -‐ Waitlist
![Page 20: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/20.jpg)
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
![Page 21: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/21.jpg)
WooCommerce Templates
Plugin Templates Theme Templates
![Page 22: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/22.jpg)
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.
![Page 23: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/23.jpg)
Modifying a Template content-‐product_cat.php
![Page 24: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/24.jpg)
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.
![Page 25: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/25.jpg)
Modifying a Template single-‐product/add-‐to-‐cart/simple.php
![Page 26: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/26.jpg)
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
![Page 27: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/27.jpg)
Modifying a Template single-‐product/product-‐image.php
![Page 28: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/28.jpg)
AcFons and Filters
• woocommerce_product_tabs
(remove unused tabs)
• woocommerce_a\er_add_to_cart_form
(add back to list bu4on)
![Page 29: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/29.jpg)
AcFons and Filters woocommerce_product_tabs
![Page 30: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/30.jpg)
AcFons and Filters woocommerce_a\er_add_to_cart_form
![Page 31: Getting started with woo commerce](https://reader034.vdocument.in/reader034/viewer/2022051412/548feda6b47959e8218b4ac0/html5/thumbnails/31.jpg)
WooCommerce DocumenaFon
• h>p://docs.woothemes.com/documentaFon/plugins/woocommerce/