Hustle In Progress

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.

Add comment

Chris Schwartze

Hey, what’s up! I’m Chris and I’m based in Enschede, The Netherlands. I have a long history of music production, marketing, web design, and development.

facebook advertising ebook

scrap · noun · a small piece of something that is left over after the greater part has been used.

beeketing-ebook-2

Check out Urban Masterclass—online platform for hiphop/R&B artists.

Join over 2480+ hustlers

Get actionable content in your inbox

Get email notifications for new posts