Woocommerce Category Layout Issues

[chill986]

Recently my client reported to me that there was an issue with the product layout on the categories page. Until now, it’s been 4 columns, and now suddenly it can be 3 (all different sizes), 1, 2, but rarely 4. I have updated every plugin, the X theme as well as Wordpress so everything is current. If I look at the Element information in Google Chrome developers, everything looks ok, but if I add width:22% to

[class*=woocommerce] li.product

Everything looks normal. I wouldn’t begin to know the full CSS in order for that to be effective, but what worries me more, is that I shouldn’t have to do anything. Woocommerce default is to 4 columns. Help? What has changed, and is it a simple CSS statement I need to add?

Here’s an example Category page - they are all like this: https://propacusa.com/product-category/shelter-supplies/nursing-kits/

[tristup]

Hi @chill986,

Thanks for reaching out.
I have inspected the code you have added and found that you have added a double-quoted value “23%”, you just need to remove the quote. Please find the following code that works.

[class*=woocommerce] li.product 
{
    width:22% !important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[chill986]

Thank you -I only added that in an attempt to fix the problem described in my original submission. I am curious though, why do I need to do this when I haven’t had to in the past? I would rather not have to do custom coding for something that should be the default - it’s my understanding that Woocommerce Categories defaults to 4 items per row? Is there something that has changed in the versions of X released this year that might have caused this? You can see what I mean if you remove that CSS in developer mode. It looks horrible.

[ruenel]

Hello @chill986,

Please remove the custom CSS and go to X > Theme Options > WooCommerce > Shop. Make sure that you select the number of columns.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.