Align WooCommerce Add to Cart Buttons

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.