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;
}