Woocommerce 2 column category page gap

[Linda]

I used the snippet Tom described below to make a certain category page (‘membership’) 2 columns, and it’s working okay.
https://generatepress.com/forums/topic/controlling-woocommerce-products-per-row-on-certain-category-pages/

However the gap between the two products doesn’t look great on full screen desktop. How can I style this to change Column Gap or increase left and right padding or margins to make these two products closer together? Thanks for any help.

[Leo]

Hi there,

Would it work better if the content width is narrower?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Linda]

how would I do that for just the 2 column category? Is that a setting that I missed? Thanks for the help.

[Leo]

It would change the width of the entire page container.

Maybe give this CSS a shot:

.wc-columns-container .products {
    width: 50%;
}
.woocommerce ul.products {
    margin: auto;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Linda]

This was great! I adjusted it to only affect the 2 column layout and it seems to work. Thank you so much!

/* woo category pages adjust settings if two column */
.wc-columns-container .products.columns-2 {
width: 60%;
}
.woocommerce ul.products {
margin: auto;
}

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts