How to match the height of products in your online store

If there’s one thing that gets on the nerves of any online store manager it’s a product catalog in which each product has a different height.

A pain for the eyes, which offers an unprofessional aspect of your online store.

This is because your WooCommerce installation does not know what size you are going to upload your images, and does not make any default cropping adjustments.

Awful, isn’t it?

Let’s look at several possible solutions to this aesthetic attack on your online store.

Unify a cut-out to the thumbnails

One quick way that often works is to take advantage of the WooCommerce settings to apply a uniform crop to the images you upload.

An example would be like this, by cropping equally wide and high (1×1) and defining a size, in this case 400×400 pixels.

Another way could be to apply a custom setting like the one in the following example, at 4:3 and an appropriate size.

As you can see, in both cases we have managed to make the images the same size, so we have largely solved the problem.

However, the result is not perfect, due to other elements that can mess with the display of the product:

• The title of the product: in some cases longer than others, occupying more than one line
• Additional product information (ratings, price, etc.) that also influence the overall appearance of the total block height.

So we will still have some elements of the product sheet to modify to achieve a uniform height, we will see how to change this.

Unify the titles of the products

As we have seen before, another element that can make your product sheets appear at different heights is the title of the products.

Then another of the modifications you would have to make is to try to shorten or lengthen all the titles equally so that in the product catalog all the titles look the same, and force the same width, whether it is one line or two or whatever.

This is already a matter of decision for each store, but my advice is that you should take advantage and make titles of consistent length, and at the same time take advantage to position them better by means of characteristics or details of them.

In the example of the previous screenshot, you can see that I have unified the length of the titles, and it looks much better, but still something can be wrong, and that is that the add to cart buttons may be misaligned, and highlight the inconsistency in the height of the products files when the ratings are only shown in some products.

Remove product information

At this point we would only have to eliminate – or unify – the display of product information that negatively affects the height of the product sheets.

Here we will resort to a little bit of code, so that you can apply whatever is necessary in each online store.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); //Remove reduced price label remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 ); //Remove ratingsCode language: JavaScript (javascript)

If you use the StoreFront theme the code is different:

add_action( 'woocommerce_before_shop_loop', 'wphelp_remove_meta_product_storefront' ); function wphelp_remove_meta_product_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 ); }Code language: JavaScript (javascript)

Use the code you need by adding it at the end of the active theme’s functions.php file (child if possible).

Now you should have gotten some product sheets totally uniform in height.

Extra: Change the theme

Yes, there are times when changing to a theme specially prepared for WooCommerce brings a differential value.

One of them is Astra, because by default it has some things that will prevent you from this type of aesthetic displeasure.

You don’t need the pro version of Astra to avoid this problem.

Astra (free) allows you to specify what product information will be displayed, so the files are always equal in height if you previously configured the image cutouts.

This way you can, with one click, configure whether you want the stars to be always displayed, whether they have ratings or not.

And you can customize this setting for any other product information, hiding the ones you don’t want to be displayed and even changing the order of them, all from within the WordPress customizer.

And if you go for the Pro version of Astra then it gets serious.

You can make many more customizations, even some that make this problem disappear, like applying a solid structure to the product sheets, even shaded borders and more effects.

With settings like these, it doesn’t matter what each product card has because they will all be displayed uniformly.

I hope these tips will help you display a catalog of products of uniform height.

Read this post in Spanish: Cómo igualar la altura de las imágenes de los productos #SemanaWooCommerce