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 steps you can take to make the display consistent. Enjoy!

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 tutoraspire.com FREE
 * @author        Tutor Aspire, BusinessBloomer.com
 * @testedwith    WooCommerce 4.5
 * @donate $9     https://www.tutoraspire.com
 */

// 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', 'tutoraspire_trigger_after_storefront' );

function tutoraspire_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 );
}