Build Your Own Business Website header image

How to Make the Shop Page Full Width

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that you understand how the WooCommerce Shop page works I want to show you how to make your shop page full width in Thesis 2.3.

Copy In Full Width Template

That happens in the Skin Editor. From where we are on the site right now you can see the template that is being used to display this. So you can just “click to edit here” and then it’s really a simple matter of copying into this products template whatever your full width template is in your skin.

Every skin is different but Thesis has this full page template. So, you can simply select the full page template, copy that template into it. Save the template, view the site and go to your shop page. And now you have a nicer arrangement.

Add a Round Number of Products to the Page

It’s a nicer arrangement except that it’s showing 10 products, but wouldn’t it be nice if it was showing you 12? The way to add a round number of products is to again go back to the products template.

Then click to edit and come over to the products template options which you see when you hover over the name of the template. Click on that and under wp-loop, you can see “Number of Posts to Show”? Well, you can change that to 12 here.

Let’s view the site. Here’s the shop page and now you have a full complement of products on your shop page.

Setting the Number in the Template vs Reading Settings

Chris: So Rick modified the number of posts to show on just this template wherever that template renders. The default value is based on a value that you define in WordPress General Settings under Reading.

Rick: It’s Settings, Reading and it’s this setting right here.

Chris: Yes. So, you have two ways to attack that problem. You could just change the total value right there as Rick is showing or you could do what he just did where he changed his template value. The difference is what you want your outcome to be.

If you don’t want to affect separate blog pages and you’re happy with just 10 per page or whatever it is then you would leave your General Option alone and set just the template option like Rick has done. Because your product grid is going to be fundamentally different from how you would ever want to show posts or query boxes or anything like that.

Interesting that you can kind of determine that output at the exact level of template that you are using. It’s just something to be aware of knowing that you can control it universally and then also on a per template basis.

Rick: So, for example, if we go over here to Happy Ninja and we look at the category of t-shirts…oh, we only have 6 results. Let’s go back to clothing, there’s probably more there. It’s showing one of 10 to 12 results so the way I did that didn’t affect this page. This template. So, if you want to affect the product category template then you can edit it as well.

Chris: Well, it’s just showing categories, not product category.

Rick: It doesn’t say product category.

Chris: I’m going to look at mine and see if mine is showing that. I troubleshot this.

Rick: Well, the thing is that it is going by the name that they are using in their taxonomy.

Chris: So, mine is a product category template. I’m under Posters.

Rick: I don’t even have a product category template.

Chris: What version of WooCommerce are you running?

Rick: The very latest, 3.0.5 or whatever. And I’m running Thesis 2.3.2.

Chris: Interesting. I know I had to modify in one of these releases the way Thesis picks up the templates to make sure it catches the all. But I think it should be working on the one that you have. You’re looking at clothing is that right? I’m on posters category. Let me see if I can find clothing and see if it behaves differently. Yes, I get just category instead of product category. If you go to posters, I got the product category and now I’m only getting category. Well, that is odd. I feel like this is something that has changed with WooCommerce 3.0. Unless they killed that whole product category distinction.

Rick: Yes, I’m getting category.

Chris: Because if you change category and not product category you’re going to affect non store front pages as well which I see as undesirable.

Rick: Well, I think you can change this one here. It’s not actually the category page template. It’s actually the product category template.

Chris: Oh, it is. It used to be called product category but they must have modified that. Man, I don’t like that at all. It actually conveys in my WordPress environment now as category where it was product category in versions 2 and higher in WooCommerce.

Rick: Anyway, you can nevertheless change the product category template and it’s the bottom category not the top one. You could change that and in this case we could add say 8. Let’s look at Happy Ninja and clothing again. And now it shows 8. That’s how you can change those things.

0 Comments… add one
0 comments… add one

Leave a Comment