WooCommerce: Products With Equal Height @ Shop Page

You know, that’s one of the biggest WooCommerce display issues. Products have images of different proportions, different title lengths, some have review stars and some don’t, making the “product grid” layout a big mess in regard to height. You’d be very familiar with the below screenshot I guess.

So, here are a few options you have to make the display consistent. Enjoy!

Who is not familiar with this view?

Solution 1: Using Consistent Elements (Images, Titles, etc.)

Step 1: Force Image Height

The first step is to make image heights consistent. This can be achieved via the “Customizer” under WordPress Dashboard > Appearance > Customize > WooCommerce > Product Images and you have to choose between “Images will be cropped into a square” or “Images will be cropped to a custom aspect ratio”. In this way, if you uploaded big enough images, you will get this result:

1:1 image cropping

Step 2: Make Product Titles Consistent

The second issue is that product names can go over 2, 3, n lines based on their length. If, in the screenshot above, “Simple 3” were instead “Simple 3 with an incredible view of the Northern Mountains”, obviously the height between this product and the next ones would have been different.

In case you have inconsistent product title lengths, check this other tutorial of mine to make them equal. If they’re all of the same length, they should take the same height of course.

Step 3: Remove Product Information

Last step is to remove the information that is causing the product “box” to take a custom height. If all products only had IMAGE – NAME – PRICE – BUTTON it would be evident they’d take the same height!

So one option is to remove the stuff that WooCommerce adds to the shop page products: the SALE badge (which in Storefront theme is not positioned over the image but inside its own div) and the review stars – without them products would be consistent in height:

By removing SALE and REVIEW STARS we will get equal heights

So, here comes the Visual Hook Guide for the Shop page. We can see WooCommerce adds SALE and REVIEWS with two functions, so we can remove them in our child theme:

/**
 * @snippet       Remove Sale & Reviews @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli, BusinessBloomer.com
 * @testedwith    WooCommerce 7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// Default WooCommerce:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

// For Storefront theme:
add_action( 'woocommerce_before_shop_loop', 'bbloomer_trigger_after_storefront' );

function bbloomer_trigger_after_storefront() {
   remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );
   remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
}

Solution 2: Equal Height Columns + Add to Cart Button to Bottom

The reason why buttons appear at different heights is that WooCommerce uses “float” to put one product beside the other, and by doing so columns have different heights based on the inner content. Here’s what I mean:

The third product column is higher because it has more content, therefore the buttons are not aligned consistently.

The solution is to turn the product grid into a “flex” display, which will make columns with the same height. Once you have that, you can push the last element (the add to cart button) to the bottom of the column, and achieve this:

Here’s the simple CSS I used for desktops:

@media (min-width: 768px) {

   ul.products {
      display: flex;
      flex-wrap: wrap; 
   }

   ul.products li.product {
      display: flex;
      flex-direction: column;
   }

   ul.products li.product .button {
      margin-top: auto;
   }

}

Where to add custom code?

You should place PHP snippets at the bottom of your child theme functions.php file and CSS at the bottom of its style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my guide "Should I Add Custom Code Via WP Editor, FTP or Code Snippets?" and my video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything went as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting.

If you think this code saved you time & money, feel free to join 17,000+ WooCommerce Weekly subscribers for blog post updates and 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance!

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

13 thoughts on “WooCommerce: Products With Equal Height @ Shop Page

  1. Firstly, thank you so much for all the help, Rodolfo – I have accessed your tutorials numerous times whilst building WooCommerce sites and would be lost without them.

    In Solution 2, I had to change the second block of CSS to use grid instead of flex. Sharing this so it might help someone else.

       .woocommerce ul.products li.product {
          display: grid;
          flex-direction: column;
       }
    
  2. I had a similar problem in my woo-commerce website while having my product title for certain items longer than other titles, the block height extends to form an odd view for my product list. so I found a simple solution for this where I just added this code in the Additional CSS:

    /* Product title equal sizes*/
    .woocommerce ul.products li.product .product-name, .woocommerce-page ul.products li.product .product-name {
        min-block-size: 45px;
    }
    
    1. Cool!

    1. Nice

  3. Hi,
    I think i’ve found a way better solution. The best thing – It’s a SEO friendly pure CSS 🙂

    First, let’s move the ON SALE badge on the top left corner of product image:

    span.onsale {
    	position: absolute;
    	top: 1px;
    	left: 1px;
    	background: #fff;
    }
    

    then, we have to force image size, with automatic constrain proportions:

    ul.products li.product img {
    	width: 100%;
    	height: 10em; /* fell free to use your own value */
    	object-fit: contain; /* this one line will do the magic */
    	background: #fff;
    }
    

    and last, let’s the title shine with nice gradient 🙂

    ul.products li.product h2 {
    	line-height:1.2em;
    	height:3.6em; /* fell free to use your own value */
    	overflow: hidden;
    	text-overflow: ellipsis;
    	position:relative;
    }
    
    ul.products li.product h2:after {
    	content: "";
    	text-align:right;
    	position: absolute;
    	bottom: 0;
    	right: 0;
    	width: 100%;
    	height: 2.4em; /* fell free to use your own value */
    	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 99%);
    }
    

    voila.

    1. Whatever works for you 😀

      1. Thanks! That looks great 🙂

  4. I actually wrote a plugin that does this. I found what typically causes it is when an image is smaller in either height or width than the thumbnail size.
    My solution relies on jquery. I use jquery to get the size of the images then create a container around it. It then uses either cover or contain to display the image.
    For the other details below the image I use jquery again to get the maximum height of the info area and titles then set the height for them. What I end up with is a perfect shop display with next to no effort.
    Happy to send you a copy Rodolfo

    1. Sure, feel free to share

  5. Thank you Rodolfo!
    Somehow your tips come right at the time, when I am looking for solution

    1. Ah!

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

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