How to Add Equal Product Heights at Shop Page in WooCommerce?

Have you ever noticed WooCommerce products with varied proportions? Well, you definitely would have seen it. It is one of the most common display issues faced with WooCommerce. Your images have different title lengths, different heights, different proportions, etc. Ultimately, it creates a big mess in product grid layout. In this tutorial, you will learn to add equal product heights at shop page. 

Here is a quick screenshot showing how the picture appears with disproportions. 

Image showing how to add equal product heights at shop page

Step 1: Make Image Heights Consistent to Add Equal Product Heights

Firstly, we will equalize the image heights. You can easily do it using customizer settings. You can follow these steps – WordPress Dashboard > Appearance > Customize > WooCommerce > Product Images. Further, you have to select “Images will be cropped into a square”. You can also choose “Images will be cropped to a custom aspect ratio”. 

So, here is how it will look:

Image suggesting to crop images to make product heights equal

Step 2: Align Product Titles to Add Equal Product Heights

Many a time, the product titles are a bit too lengthy. It is also one reason why your products are disproportionate. In the above image, product “simple 3” is actually named as “simple 3 with a breathtaking scenery of snowy mountains”. This is why the product heights are unequal. So, your next task is to make product titles heights equal to add equal product heights at shop page.

Step 3: Delete Unnecessary Product Information

Lastly, you must delete extra information that is unnecessarily expanding product height. So, you can remove the SALE badge & review stars. You will find a “SALE” badge inside the product’s own div in the storefront theme. 

Image describing to remove sale and reviews to make product heights same

You can remove SALE and reviews in your child theme. 

// 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', 'phpsof_trigger_after_storefront' );
 
function phpsof_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 );
}

Where do you add this snippet?

So, this is how you can add equal product heights at shop page. Also, it is easier to activate this function with this code. So, to apply this code, just add this PHP snippet at your child theme function.php file’s bottom. It should be placed before “?>”, if you have it there. Apart from this, CSS goes in your child theme style.css file. Make sure that you are editing these files in a right manner for best results.

Is this snippet still valid?

So, this is how you can learn about add equal product heights at shop page. I have applied this code on the Storefront theme and WordPress friendly hosting PHP 7.3. Let me know if everything works as expected when you code. Share it further if you find this snippet useful for you and it had saved your time. 

Also Read, How to Attach files to Order Emails in WooCommerce?

How to Modify Cart items count in WooCommerce?

Important links: WooCommerce – https://woocommerce.com/