How to equalize product item’s height

You are here:
Estimated reading time: 1 min

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;
}
Was this article helpful?
Dislike 0
Views: 773

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!