Woocommerce Column Grid

silviotiago

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?

Can you help me?

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

silviotiago

Hello!

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

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

silviotiago

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

Isn't there a way to reduce that too?

silviotiago

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next