Woocommerce Column Grid

silviotiago · May 28

Hello,

In my online shop I have several product sections, but the theme options only allow me to choose grids with columns of 4 products. Is there any way of choosing a grid with 5 columns?

And isn't there a way to reduce the spacing between products in these same grids?

Captura de ecrã 2024-05-28, às 12.58.19.png

Can you help me?

Phil · May 28

Hi,

Please send a link to your website, and I will check if I can help you by preparing a custom CSS code for that.

Thanks

silviotiago · May 29

Hello!

Of course, it's this one: https://ps5digital.pt/

Phil · May 29

Please use the following CSS code:

@media only screen and (min-width:960px){
 .woocommerce.columns-4 ul.products li.product:nth-child(4n+1){
   clear: unset!important;
 }
 .woocommerce.columns-4 ul.products li.product:nth-child(5n+1){
   clear: both!important;
}
 .woocommerce.columns-4 ul.products li.product{
   width: 18% !important;
 }
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

silviotiago · May 29

Thank you! It worked and you got the 5 columns, but what about the spacing between the products?

Captura de ecrã 2024-05-29, às 16.50.21.png

Isn't there a way to reduce that too?

silviotiago · May 29

I added this property to your code and it worked:

padding: 0%!important;

But is this how it's done or is there another way via the theme options?

Phil · May 30

No, via theme options, there is no other way to achieve that, so only option to have 5 or more columns is to write a custom CSS code. The same for the padding value.

Best regards

Woocommerce Column Grid

Comments