Archived topic
Equal height of Woocommerce grid on archive/shop page
3 replies · Started by mkjj on November 17, 2021
I would like to have equal heights of all items (in a row) in the Woocommerce grid layout on archive pages of the main shop page:
https://dfme-achtsamkeit.de/angebote/
To achive that I could tweak the height of specific elements (e.g. product title), but flexbox would be much better than this old school solution. This question was asked before. According to this post, GP provides a feature for that, but I can't find it. What am I missing? Thank you very much!
Hi there,
try adding this CSS:
@media(min-width: 769px) {
.woocommerce ul.products {
display: flex;
flex-wrap: wrap;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product a {
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
flex: 1;
}
}Awesome, David! Almost perfect. I had to change one element so that price and VAT wouldn't be separated:
.product p.wc-gzd-additional-info {
flex: 1;
}Now, the VAT paragraph is extended which looks much better in my opinion.
Thank you!
Awesome - glad to be of help!
