The same height of the product cards

Hello, if the product cards have different heights, for example, a header in several lines or many attributes. How can I align the “Add to Cart” button so that it is on the same line with the rest of the cards in the row. See my screenshot.

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to do this

.xts-prod-design-icons-alt .xts-product {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.xts-prod-design-icons-alt .xts-product-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.xts-prod-design-icons-alt .xts-product-content-footer {
    margin-top: auto;
}

Kind Regards

Thanks, it worked in the category, but it doesn’t work in the “Products” element. Can this be done?

Please, send us your admin access so we can check why it doesn’t work.

admin access

Everything worked! Thanks!

We are glad that you sorted it out. Let me know if you need any further assistance.

Have a nice day!

[Author]

Posts