Make Woo Products Module Items Equal Height

|

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:

In this case it is the titles that are making the product heights uneven. The first title takes up one line, while the second takes up two, pushing the price further down.

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:

  1. Open the Woo Products Module Settings
  2. Click on the "Advanced" Tab
  3. Click on the "Custom CSS" Toggle
  4. In the "Title" Field, enter the following CSS property:
 
min-height: 3.9em;
Like so:

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:

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *