Build Your Own Business Website header image

Integrating WooCommerce with Thesis 2 – Part 14 – Create a Custom Template for Specific Products

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do in our Integration of WooCommerce and Thesis 2 is to customize some templates because it can be the case with the Product page that all products are the same. You may have some kinds of products that you want to display entirely differently. You can’t necessarily make it entirely different but you can make it pretty different.

Create the Custom Template

We’re going to start by coming over to the Skin Editor and we’re going to create a custom template. Come over here to Product and add new. I’m just going to call this Custom Product. Let’s create that template and then I’m going to copy the Product template into it. But in this case, we’re not going to say 2 Column Content, I’m just going to have a 1 Column Content.

Define Column Configuration in Agility

To do that I’m going to take my 2 column wrapper out of here with everything else, shift drag my 2 column wrapper out and then come down and find my single column wrapper. So I’ll drop it into the Main Content there and then I need the column, Full Width Content. I’ll Drag my Full Width Content in here and drop it and then drag the Main Content inside.

The way Agility works is you’ve got a column wrapper where you define how it’s going to be laid out. In this case, it’s going to be one big single column. Then you have an Agility column which again is where you decide what the column configuration is. Inside of that, we’re going to take this product template and drag and drop it into Main content and save this template.

Changing Styles by Referencing the Body Class of the Template

Now, let’s say that we want this product here to have a different template, all you have to do is edit that product now. Come down here to Thesis Skin Custom Templates and select the Custom Product Template and then view the product and now it’s bigger.

Now, everything on this thing is bigger so it could be that this is the way you want to do some of your products. Then, if you want to change up some of the styles, all you have to do is reference the body class of this template.

If you look at our Custom Product, I believe we’re going to see that we could give it a body class of custom_product. Save the template and then you could write some CSS that would change this here, change the buttons, change the colors, change the font size, all that sort of thing.

Now you have two different types of product layouts here in the WooCommerce Thesis 2 eCommerce site now. You’ve got the standard product layout with a sidebar and you have a typical product which doesn’t.

0 Comments… add one
0 comments… add one

Leave a Comment