Now that we’ve completed Step 1 – Replace the Thesis 2 Template File, we’ll move on to Step 2 in this process of integrating WooCommerce and Thesis 2. And that step is to edit these templates in the Thesis 2 Skin Editor. We’re going to do that starting with the product template.
How to Edit the Templates
You can get to the product template just by clicking here or you can get to the product template by going over to the Thesis Skin Editor. Let’s see, I’m always going to allow pop ups and then coming over to the template selection list, down to single and under single, we have product so we’ll click on product.
Replace Thesis’ Process of Inserting Content
Essentially, what we’re doing is, we are replacing Thesis’ process for inserting the content in a page with WooCommerce’ process. So that starts off with finding this WP Loop. Now, depending upon your skin, WP Loop may be in different places but in Thesis Classic, WP Loop sits here inside of the content column.
What I’m going to do is shift drag WP Loop out of the content column and drop it into the available boxes here on the sidebar. I’m also going to get rid of the Post Navigation, this is the Next Post, Previous Post navigation. We’re not going to really want that with the products either so I’m going to shift drag that out as well and drop it there.
Let’s save the template and refresh this. Now that content area is entirely blank, right? So, now we need to replace the content. Well, Serge’s plugin creates this gray box here called Singular Product Template. All we have to do is shift drag this up, drop it into place and save it. Presto, change-o, we now have an image and other images and an Add a Cart and stuff like that.
Clearly, this doesn’t look right yet but at least the content is there. Now, there are a couple of other things we’re going to have to do to make it look right but have no fear, we’ll get there.