Archived topic
Woocommerce 2 column category page gap
5 replies · Started by Linda on February 9, 2020
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.
Hi there,
Would it work better if the content width is narrower?
Let me know :)
how would I do that for just the 2 column category? Is that a setting that I missed? Thanks for the help.
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/
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;
}
No problem :)
