Build Your Own Business Website header image

Integrating WooCommerce with Thesis 2 – Part 12 – Customize the Display of Catalog Pages

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

WooCommerce Settings: Thesis Store Options Continued

Now that we’ve looked at the choices for customizing Product Display using the WooCommerce Thesis Integrator Plugin, we’re going to move on to customizing the Catalog Display. Let’s just go to the Shop page for a moment, there’s a Catalog Page.

Number of Products Shown Per Page

Right now, it’s showing 4 images across and it must have a maximum of 10 images so 4 products per row with maximum of 10 products per page. Well, that doesn’t really divide up nicely. It kind of makes more sense to make it 12 by 4 and this page almost wants to have no sidebar. We’ll talk about how to change the templates here for that a bit later.

But anyway, we’ve got 4 and 12 now. Let’s save that setting. Let’s go to the Shop page and we’ve got 1 through 12 now showing. You could decide you want them bigger so you could change that to 9 and 3 products per row, save those changes, refresh them and now the images are a bit bigger because there’s more room for them. Again, we could go back to 10 and 2, it just all depends on how big you want your product images displayed.

Now, with the images bigger like this, you can tell that this is all aligned to the left. The images are all lined up along here so it doesn’t really look like it’s taking up the whole space because this line comes all the way over to here and then this comes all the way off to the edge and that one comes all the way over like that.

Center Product Elements

It looks a little funny but if you check this button right there, Center product elements in the listings, and save those changes again presto change-o, now, these are centered in their respective spaces. They have a nice layout of these products and I think having them separated makes it a bit better.

In the first place, you have less of an opportunity for multiple line titles and the second place sometimes when the buttons aren’t lined up, you don’t really notice it as much. The tops of the images are always lined up but sometimes there are reviews and sometimes there aren’t and when there’s no review, then this pops up a little bit.

Well, if everything is close in to each other, you can really see that but when it’s like this, it’s not nearly as obvious. Anyway, there are all kinds of great options with this great WooCommerce Thesis Integrator Plugin.

0 Comments… add one
0 comments… add one

Leave a Comment