Build Your Own Business Website header image

Integrating WooCommerce with Thesis 2 – Part 10 – Setup Agility to Work with WooCommerce

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve got WooCommerce integrated with Thesis 2 we’re going to talk about customizing the display of these WooCommerce store pages. But we’re going to do that outside of the context of Thesis Classic. The process is going to be the same but now I want to switch to my Agility Skin and in order for me to do that I’m going to have to repeat much of this work.

Activate Agility Nude Skin

So, if we come over to Thesis and go to the Skins and then activate the Agility Nude Skin then refresh this, now we have a whole different layout for these. This layout doesn’t have anything to do with WooCommerce, this is the Agility Skin’s layout.

Edit Templates in Agility

Notice there is no Buy Now button or anything like that and again, that stuff doesn’t exist over here either. So this is a case where we need to go in and change these templates. We’ll go to Skin Editor and very quickly change the templates.

Single Template

First, we’ll make sure that our automatic WordPress body classes are being used then we’ll go down to our single template product. And in this case now, the WP Loop is contained inside of the main content column so what we’re going to do is shift drag WP Loop out of here and shift drag Post Navigation.

I guess we’re going to leave comments in place here actually but what we will do is come down to the Singule Product template and drag that up into place and then hit save, come over here and refresh this and so there we go.

Now, we’ve got this set up and the comment form that is set up in Agility stays the same. So the comment system still looks like it did and otherwise, we end up with a fairly nice looking presentation of that part of the store but of course you go the Shop page and it has fallen apart again because we haven’t fixed those things so that’s next.

Archive Templates

We’ll come over to our Archive look at our Products Archive and open up content. Somebody is asking about whether or not this is responsive and we’re going to find that out here in just a moment. So drag Archive Intro out, drag WP Loop out, drag Post Navigation out and then come down and drag Products Archive template in.

So then we grab our Products Archive, shift drag that up into place in the Main Content Column. Save the template. Then we’ll just quickly come over to the other two archive templates so Product Category. Click on it again, copy from Product Archive, save the template.

Come over to the Product Tag and again, take from the Product Archive, copy the template, and save the template. Refresh the Product Archive Page and now, we have it.

Responsive Behavior Needs A Little Tweaking

Now, let’s try to experiment, let’s see what happens if we think this is going to be responsive. Okay, it’s kind of responsive. I think we want to add some rules to our media queries for a minimum size for these things. That way that they don’t get smaller than a certain minimum size but they are set up as percentages which I think make some work pretty well.

We’ve got our Agility skin set up now to work with WooCommerce, so let’s just look at the Category Archive pages. If we look at Coffee Plungers, there’s only one, Coffee and Tea, Tea Makers. Okay, so our Archive pages are working just fine.

2 Comments… add one
2 comments… add one
  • Junko Smith March 31, 2017, 1:48 am

    When I get to minute 2:00 of this video I don’t see what you see. I have tried and tried, and I am not getting anywhere. I don’t have templates on the side. I don’t have the same stuff in the middle either.

    • Rick Anderson April 9, 2017, 3:27 pm

      Junko – now that Thesis 2.3 supports WooCommerce you don’t need to do any of that.

Leave a Comment