Divi includes a Woo Products module (formally called the Shop module), which can display a grid of products from your WooCommerce store. The heights of the products can vary depending on their contents, leading to an uneven grid. Here's how to equalize the heights of the items in the Woo Products module grid.
First, here's how the grid looks with uneven items:

While giving the main product box elements a fixed height might even up the border on the boxes, it wouldn't solve, for example, the position of the prices.
Set a Minimum Height on the Woo Products Module Titles
A better way to solve it is to set a minimum height for the element containing the title, and ensure that this is big enough to accommodate the longest title you anticipate having to display.
To set a minimum height on the Divi Woo Products Module titles:
- Open the Woo Products Module Settings
- Click on the "Advanced" Tab
- Click on the "Custom CSS" Toggle
- In the "Title" Field, enter the following CSS property:
min-height: 3.9em;

You may need to increase or decrease the min-height to suit your design / title line height. Here's how the module looks with equal height titles:

0 Comments