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!

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:

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:

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;
   }

}