Posted: 2 years ago
The problem with WooCommerce out of the box is that if you have a product title that is too long then your add to cart buttons won’t line up for each row:
We’re going to tackle this issue by using flexbox magic to make sure each button lines up so the end result gives us a uniform product list:
Add this css to your theme’s css file:
.woocommerce ul.products, .woocommerce-page ul.products{
display: flex;
flex-wrap: wrap;
}
.woocommerce ul.products li.product{
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link{
flex-grow: 1;
}
.woocommerce ul.products li.product .button{
align-self: flex-start;
}
For extra points so prices and titles line up for each product row:
We just need to modify the previous css slightly:
.woocommerce ul.products, .woocommerce-page ul.products{
display: flex;
flex-wrap: wrap;
}
.woocommerce ul.products li.product{
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link{
flex-grow: 1;
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product .button{
align-self: flex-start;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
flex-grow: 1;
}
Note that this might not work in custom themes.