Thesis 2 is the most powerful, customizable theme on the planet. WooCommerce is a well supported, wildly popular and full featured shopping cart. Unfortunately Thesis 2 and WooCommerce don’t work together…Until NOW! Serge Liatko has written a plugin that extends the power of WooCommerce to Thesis 2. Now you can sell anything from t-shirts to auto parts directly from your WordPress website. Now, I personally think that WooCommerce is best suited for selling physical products but you can sell digital products with it as well.
In this seminar I demonstrate how to install WooCommerce and set up its pages and templates, then we install the WooCommerce Thesis Integrator plugin and configure Thesis 2 to use it. We also look at ways to customize the look and feel of the site using the powerful customization tools that Thesis 2 provides.
Paid members of BYOBWebsite can get a 25% discount on the purchase of the plugin (and on the full suite of plugins that Serge has created) by using the coupon code below. You’ll need to login in order to see the coupon code.
[private 6 month|Annual|Monthly|Founding|Founding – lifetime|Founding – monthly]
Coupon Code: byob welcome
[/private]
Introduction
Install & Setup WooCommerce
- General Settings
- Base Location
- Currency
- Specific Countries
- Catalog Options
- Product Data
- Pricing Options
- Image Options
- Pages
- Create the initial menu
Import WooCommerce Sample Data
- Download the plugin from WordPress.org
- Move to downloads folder
- Unzip into standard location
- Import Data
- Review the result
- Activate Thesis & review the result
Integrate with Thesis – Step 1 – Replace the Thesis 2.0 template file
- Install the WooCommerce Thesis Integrator plugin
- Note the result
- Install Rick’s Way
- Move to downloads folder & unzip
- Rename the existing templates.php file
- Replace the existing templates.php file with the one in the plugin
- Open site in FileZilla
- Open wp-content/themes/thesis/lib/core/skin & upload new file
- Review the result
- Alternate system using Host’s control panel
- Open site in cPanel file manager
- Rename the file
- Upload the file
- Or copy the file
Integrate with Thesis – Step 2 – Edit your Product template in the Thesis Skin Editor
- Open the Product template
- Find the WP Loop box
- Drag out the contents
- Look for post navigation and remove it as well
- Drag the Singular Product Template box
- Review the result
Integrate with Thesis – Step 3 – Edit your Products Archive Template
- Open the Product Archive template
- Find the WP Loop box
- Drag out the contents
- Look for post navigation and remove it as well
- Drag the Product Archive Template box
- Review the result
Integrate with Thesis – Step 4 – Edit the Product Category & Product Tag Templates
- Open the appropriate template
- Find the WP Loop box
- Drag out the contents
- Look for post navigation and remove it as well
- Drag the Product Archive Template box
- Review the result
Integrate with Thesis – Step 5 – Set the Body Class
- Open the box options for the Body box
- Check the body classes
- This adds classes that the typical WooCommerce style sheet styles.
Integrate with Thesis – Step 6 – Thesis Theme Integration Options
- Open WooCommerce Settings > Integration > Thesis Theme Integration
- Fix #container
- Fix #content
- Fix star ratings
- Review the results
Setup Agility to Work with WooCommerce
- Step 3
- Step 4
- Step 5
- Step 6
- Review the result
Customize the Display of Product Pages
- Thesis Store Options
- Product gallery thumbnails
- Related products
- Upsells
- Product reviews
- What else you have control of
- Create a custom template for a product
Customize the Display of Catalog Pages
- Thesis Store Options
- Products per page
- Products per row
- Enhancements
- Add additional CSS
Configure the Product Page to Accept Reviews
- Remove extraneous comment system
Create a Custom Template for Specific Products
- Agility column configuration
- Changing styles using the Body Class system
Customize the Main Store Template
- Remove sidebar from the template
- Add text to Shop page
How to Make Stylistic Changes to WooCommerce Elements
- Changing colors
- Control CSS styling
- WooCommerce build in Styles
- Agility’s Body Class