How to equalize product item’s height

Equalize titles height

Titles vary in length, so some may be displayed in one row, others in 3 rows. This option will force an equal height for all titles in each row, the largest title providing the minimum height.

Access Customizer > WooCommerce > Product catalog – Layout and enable “Equalize titles height” eg: https://d.pr/i/xgGhQt .

This however is a JS based solution which iterates rows and sometimes it just might not work. As an alternative, you can use this css snippet below:

.woocommerce ul.products li.product .woocommerce-loop-product__title, 
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	--line-height: 1.4;
	line-height: var(--line-height);
	min-height: calc(2em * var(--line-height));
}

In this example, 2em represents basically 2 rows, while the line height is the value of how much should all text lines stretch vertically. You can use decimal values too, like 2.2em .

Set a uniform image height

Please access Customizer > WooCommerce > Product images and choose to enable a custom Thumbnail Container Height eg: https://d.pr/i/0Op6Eq .

This forces thumbnails to have an equal height and contain themselves into that height.

Apply custom CSS:

Simply apply a custom minimum height on the inner product item wrapper and it will force all to have a uniform height. Adjust the height as you wish.

.woocommerce ul.products li.product .rey-productInner {
  min-height: 500px;
}