Use code STATCH for an additional 10% off! 💥

Elementor WooCommerce Product Archive Equal Height

TL;DR

Add a fixed height on the woocommerce-loop-product__title class and the other elements should fall in place. See this gif →

When designing Bunker 501 I ran into an issue. The Add to cart buttons on the Elementor WooCommerce product archive weren’t aligned. If you’re anything like me, these need to be in the same spot for every single item in the grid. Let’s solve that!

It’s funny because I was looking at restyling everything using CSS grid or using a jQuery plugin like Equal Height. But the solution is actually quite simple. Allow me to explain.

When we take a closer look and inspect the WooCommerce archive widget, you’ll notice there’s a class called woocommerce-loop-product__title.

When we give this class a fixed height, the other items should fall into place automatically. As you can see in the GIF below, this is happening as expected.

In other words, in the Elementor WooCommerce Archive widget, go to Advanced and scroll down to Custom CSS. And add the following:

/** Fixed height on product titles **/

@media (min-width:601px) {
  selector .woocommerce-loop-product__title {
    height: 45px;
    min-height: 45px;
  }
}

/** Change fixed height if we're on mobile or reset it to auto **/

@media (max-width:600px) {
  selector .woocommerce-loop-product__title {
    height: 45px;
    min-height: 45px;
  }
}

/** Alternatively you could also truncate the text on mobile **/

@media (max-width:600px) {
  selector .woocommerce-loop-product__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px;
  }
}

Of course, you tweak the amount of pixels as you see fit.

Scroll to Top