[Resolved] Reduce woocommerce product grid spacing

[Mak]

Hello,
Is there a simple way to control space between woocommerce product listing.
The default spacing is too wide and I need to reduce that. Any help would highly be appreciated.

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

In 1.7.8 it’s kind of hard to do this, as it uses floats.

However, if you update to 1.8, we use CSS Grid so it’s way easier: https://generatepress.com/gp-premium-1-8/

It’s in public testing right now, but it’s quite stable. Let me know if you update and I’ll help with the CSS 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mak]

Hi Tom,
Thank you for revert back.
Yes, we have updated to 1.8.0 (Beta), so please help us to how to adjust the spacing please.

Best Wishes

[Tom]

Any chance you can clear your caching plugin? I’m still seeing the older version.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mak]

I’m sorry for that. The caching plugin is disabled now.
Also we are using shortcode on homepage to display featured products.

[Tom]

Ah, the shortcode won’t use our CSS Grid, so we need to stick with their funky percentages.

Try this:

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    width: 23.05%;
    margin-right: 1.95%;
    margin-bottom: 1.95%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts