How to equalize product item’s height

You are here:
Estimated reading time: < 1 min

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.

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 .

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: 7

Join the conversation