Now that we know we’re going to use the WooCommerce Shopping Cart plugin, the next thing to do is to install WooCommerce on Thesis 2.1. So this is the standard Thesis 2.1 site with my page width skin Carta 2.1 installed but essentially, nothing else. It’s got the latest version of Carta, latest version of Thesis and nothing else.
Install the Plugin
So, we’re going to start off then by installing the WooCommerce plugin. Search for WooCommerce, it’s this one right here, install it now. It’s not going to look like much here at the moment but note that when this is done, it’s going to tell us that first, we’re almost ready to get started at selling. It says install WooCommerce pages so we’ll go ahead and say yes to that because we’ll let it create the pages that it uses.
Thesis 2.1 and WooCommerce
Then, it does say that your Theme does not declare WooCommerce support. It’s not really an error message but it is alerting you to the fact that at the moment, there are aspects of WooCommerce that aren’t going to work in Thesis 2 because of that lack of support.
WooCommerce Thesis Integrator Plugin
Now, fortunately, there is a solution to that. At woocommerce-thesis-integration.com Serge Liatko has created a plugin for integrating Thesis 2 and WooCommerce. Note that without this plugin there isn’t any way to use WooCommerce with Thesis 2 in it in a typical skin.
There is a coupon code for members of byobwebsite that you can get to save yourselves some money. It’s a deal Serge and I made so instead of being an affiliate of his the deal is he would give you guys a discount. For that come over here to Thesis 2 seminars and down to integrating WooCommerce with Thesis 2 and there’s a coupon code for paid member. All you have to do is login, come to this page, you’ll see a coupon code and then when you check out you’ll get 25% off of this plugin.
Themedy does have some skins that will work in Thesis 2 and WooCommerce but those are a little out of the ordinary, they’re unusual. But they’re the only people who have them that don’t need this. If you’re using one of my skins, you’re going to need this plugin in order to get it done.
Upload and Activate WooCommerce Plugin
So back to the WooCommerce Plugin. Here is the latest one, 1.5.4 plugin. Let’s add new and we’ll upload. I just need the more recent version. Now that we have it activated, you’ll notice that big, purple thing goes away right? That’s because, now, WooCommerce recognizes that it is compatible with Thesis 2.1.
Change Thesis Templates
Even though we’ve made this installation, we also have to change some of our templates. So we’re going to come over to this skin editor then and first we’re going to go to the product template. This is under the single template.
We’ll open up the content column and what we’re really doing is taking out WP Loop, Post Navigation, Comments Intro, Comments and Comment Form. Essentially we’re taking everything out of the main Content Column and then finding the singular product template and dragging that and dropping it into the Content Column and saving this.
Then we’re going to come down to Archive, and we’re going to start off with product which is the archive page for custom post type product. Again we’ll drag Archive Intro, WP Loop and Post Navigation out of that and then look for the Products Archive Template.
We’re actually going to do this very same thing three times. So I put it right there and in this case, save it. But we’ll also come over to our Product Category, Archive Template and do the same thing except now, since we’ve got it done all we really have to do is copy it from a template.
So we grab our products template, we’ll copy it over and just so that you’re clear, we’ll switch over like that. Save the template and then come back over one more time to the Product Tag and then copy it from the Products Template. Save that template.
Use WordPress Body Classes
We only have one last thing to do in order to really set this up so it works properly and that is, we have to come over to the html body and it doesn’t matter which template you do it in but just click on the html body options and select, use automatically generated WordPress body classes and say okay.
Review Product Display for the Site
We don’t have any products installed here yet so I don’t really have anything to show you. I’m going to take you to the site that does have products. In this case, here is our main store page with his plugin installed and this is our main product page with a fairly pleasing arrangement.
So this is how it’s going to look when we end up putting products in. If you would like to see what it would look like, I’m going to show you what it would look like. If we uncheck this, “Use automatically-generated WordPress body classes and hit save. Then view the site, now the store is going to look funny and that’s because all of the CSS that is used to style this is connected to the automatically-generated WordPress body classes. As soon as we deactivate that or when that doesn’t exist, the styles don’t have anything to be attached to so that’s why, here, you choose “Use automatically-generated WordPress body classes” and now it looks like what we want it to look like.
WooCommerce and Integrator Plugin Settings
Let’s come back over to our main dashboard and look at the WooCommerce settings here. This plugin that Serge has created, has a set of settings as well. So we can display how many products we want to show per page, how many products we want to show in a row on a page and whether or not we want to disable the display of breadcrumbs on our product pages.
Result Count is a new setting. Disable the display of result count on index pages. I’m not quite sure what that does, we’ll have to see what it looks like. We can get rid of the pagination, the automatic pagination that happens. We can center our product elements which we do want to do.
We can enable category images which I don’t really think matters at this point. So we’re not going to do that but it does give you a chance to set up category image sizes and things like that. We’re going to do that in week 3 so we’ll come back and look at that
Then Product Display Options, again we can disable breadcrumbs on the product pages. We can choose how many thumbnails are in a row. We can choose to disable the SKU although I don’t think that it makes any sense, I think we should leave it like it is.
We can disable the display of product category links so that can be hidden in product tag links. Again, I don’t think it’s necessary. We can also disable the display of related products. We can adjust the number of related products per page and the number of related products per row and the same thing is true with upsell options. We can lock reviews to registered users only which we are going to do.
Hit save changes and these are the kind of settings that you’ll have with the plugin. He’s also added a help page here with links to videos and information. There’s plenty of information on Serge’s site here that can be useful to you for setting up configuring this plugin but we are going to talk about most of those aspects as we work our way through the process.