Make Products Appear the Same in Height

This is a Developer Level doc.

If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

Sometimes, due to the different length in product titles, products in archive/category pages may have an uneven height. If you wish for all the products to have the same height (elements aligned next to each other), use the following CSS snippet:

/* WooCommerce Product Category/Archive Height Adjustment */
.woocommerce ul.products li.product li.title a {
line-height: 2.5ex;
height: 5ex;
overflow: hidden;
}

Adjust the line-height and height values per your need.

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.