Build Your Own Business Website header image

Make ALL Product Categories 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.

We just saw how easy it was to make a specific product category full width in WooCommerce and Thesis 2.3. Next we want to show you how to make all product categories full page as well.

Choose Full Width Template

We are going to do something very familiar. Let’s go back over to the Skin Editor and then you’re going to go to that product category template. Click on the name of the template. Go to archives and expand it. Then come down to this second category, click on it.

Then again, as we did in the product post type archive page, we just click on that. Then come over to Select a Template and choose the full page. Copy the template and save it. Let’s view the site.

Now all category templates are full width. Although the thing about this is that it doesn’t have the archive information in front of it.

Change Number of Posts on Individual Categories

Chris: Yep, so we’re going to troubleshoot this in just a second. I want to show one more thing. So, we’ve done a couple of things here. One, we’ve looked at the main category template and then Rick showed that maybe you don’t want to apply these changes to every category you just want to apply changes to say one category. So you would go to edit category at the top like he showed you before when he selected full width template there for the clothing archive.

Well, then he went in and said “well, there’s not the right amount of posts showing here” so he went into the full page template in the Skin Editor and modified the number of posts that show. There was some concern since this type of template wouldn’t even normally have this option. Another way to approach that would have been to go back to the clothing category page, choose edit category here. And you can actually specify the number of posts that will show on just that category.

Rick: Oh. Excellent. I know that this stuff isn’t going to show because of the template I chose.

Chris: We will address all parts of that in just a second.

Rick: Okay. So you can just change the number of posts on this individual categories to solve that problem. You know, I knew it but then forgotten it.

Chris: I was just looking at the available options. It’s hard to remember all this stuff.

Different Ways to Go to Full Width

The last part was about this information not showing at the top. We kind of botched the top when we went to the full page view. There are a couple of ways we could have gone to the full page view. The route we’ve chosen here is the most obvious I think.

Basically there are two things happening. The WooCommerce integration in Classic Responsive naturally suppresses some automatic output from WooCommerce relative to the category in question. WooCommerce natively outputs category headers, at least the name of the thing, so like Clothing would appear at the top if I did not perform any additional modification.

With Classic Responsive the title of the archive was appearing twice on archive pages under default setup. So there’s actually a filter in the Classic Responsive skin that suppresses the WooCommerce generated title for an archive.

So you have two options here. You could undo that filter that is blocking the title from showing or you could do what Rick’s about to show you which would be to reimplement the Thesis stuff on these pages and it actually gives you more SEO ability on those pages as well. So what Rick’s about to show you is high octane way of doing it and then if we want we can revisit the filter based, just make it work solution that’s not quite as robust.

Rick: And I do think this is the right way to do it. If we are going to talk about ways of doing it this is probably the best way to do it.

Chris: This is definitely the best way to do it.

Rick: So, we’ll go back and look at another archive page but the typical archive page in the content column has this box, Archive Entro.

Chris: And it goes just above wp-loop, all that stuff.

Rick: Which contains archive content and archive title. So we’re just going to shift+drag archive content and shift+drag archive title into that and then shift+drag all of that into the content column. Save this category.

Let’s take a look. Now why isn’t that showing? It’s not showing because it’s using the full page template, right? So we want to go back to this and edit this category. And instead of using the full page template we’ll use No Custom Template and take that back to 8. Update that. Then view the category again and now that’s what we have here now.

This is the archive title and below it is the archive content which you can edit by clicking the Edit Category again. The come down here to archive title and archive content. So what was this? This was clothing.

Chris: Archive title is actually automatic so I would just leave that alone unless you want to enhance it.

Rick: Let’s check out our full clothing line. Come over here and view the category and now you’ve got this archive intro which is introduction to the content that’s down here and your archive title. That’s how you can do that.

Now to tell you the truth, I might make a custom template out of this and select the custom template. Well, maybe not.

Chris: I think that applies to all categories or product categories. That’s solid. One point to note. Rick put the header back in there that says “Check out our Full Clothing Line”, you know that top of the content area header with the archive information? That has actually “fixed” the design.

The top elements were kind of too close to the separator between the header and nav area and the rest of the site that looked bad before. When he restored that stuff it all looks perfect again because that’s how it was designed to be presented.

So the steps he’s shown you here are basically perfect for making your WooCommerce integration with Classic Responsive as awesome as it can be.

0 Comments… add one
0 comments… add one

Leave a Comment