Build Your Own Business Website header image

Integrating WooCommerce with Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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

Question and Answer Session

2 Comments… add one
2 comments… add one
  • B. Scott Creamer April 5, 2013, 3:23 pm

    Thank you for todays seminar. scott 🙂

  • Richard Rodriguez April 8, 2013, 3:35 pm

    Has the video for this seminar been posted yet. I signed up but was not able to attend.
    Thank You
    Rick

Leave a Comment