Bakersville and WooCommerce

timjustynski2023 · Member · Jul 22, 2023 at 4:39 pm
Copy link

Add topic to favorites
I just added woocommerce to my blog. I am using the Bakersville theme. All seems to be working properly, except the products are showing up as one column instead of in rows. I have the settings set to show 3 products per row, but it is only showing 1 product per row. I cannot seem to figure out how to get it to display correctly. Any insight would be greatly appreciated.

The blog I need help with is: (visible only to logged in users)
staff-95percentghost · Staff · Jul 24, 2023 at 6:57 am
Copy link
Hi! Just to check, whereabouts have you set the “three products per row” option? I had a quick look at your site and it looks like your shop catalog page is currently still set to show one product per row. You can find the setting in question by going to Appearance > Customize > WooCommerce > Product Catalog.

In case of need, WooCommerce do have a guide for it here:
https://woocommerce.com/document/woocommerce-customizer/#products-per-row
timjustynski2023 · Member · Jul 24, 2023 at 11:56 am
Copy link
Hi! Thanks so much for your response. After creating this post, I set it to “1 Per Row” because it was the only setting where it look halfway decent. I have switched it back to 4 per row, and you can now see what I am talking about. Here is a screenshot of my settings.

It is also viewable on the blog page itself. https://orlandoalatte.com/shop/

Any help would be greatly appreciated.
staff-95percentghost · Staff · Jul 25, 2023 at 6:31 am
Copy link
Hm, it looks like this might be due to the Baskerville 2 theme which may have not been entirely designed with WooCommerce in mind; I can’t replicate this effect on another theme.

One possible quick fix for you:
1. Head to Appearance > Customize > Additional CSS
2. Place the code below into the large CSS box and click the ‘Save Changes’ button at the top of the panel:
```
/*Baskerville 2 - shop page display 6567276-zen sgy*/
.woocommerce .products ul, .woocommerce ul.products {
	display: flex;
	flex-flow: row wrap;
	float: none;
}
```
This will likely not change the appearance until after you’ve saved and closed the Customizer, but it should help!
timjustynski2023 · Member · Jul 25, 2023 at 1:28 pm
Copy link
That worked! Thank you very much for your assistance. Have a great day!
deancroyal · Staff · Jul 25, 2023 at 1:48 pm
Copy link
Great! We’ve marked this as resolved. Let us know when you need anything else: https://wordpress.com/help/contact

No items found.