Unfortunately when you are setting up a WooCommerce store, you often come across the problem of product thumbnails being different heights. On a single product page this is normally not a problem, however on archive pages, such as categories and tag pages, a different height on your thumbnail will make the layout of your products look a little ugly. Basically if the product images are different heights, your product names and prices will be out of alignment with other surrounding products.

There is a pretty simple solution that only needs a few lines of code added to your functions.php file and a little CSS and your WooCommerce thumbnail images, product titles and prices will be aligned and looking nice and clean.

Step 1:
Add the following to your function.php file and the thumbnail images will be wrapped with a div that has a class “archive-img-wrap”, obviously you can change this to whatever you want to name your class.

// Add the img wrap
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<div class="archive-img-wrap">";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "</div>";'), 12, 2);

Step 2:
Now you have your thumbnail wrapped in a nice little div you can set a height to your div in your css file, eg:

.archive-img-wrap {
  height: 220px;
}

What About Sub Category Thumbnails?

It’s almost exactly the same solution, but you are using a different hook. Try this out in your functions.php file:

// If there is sub categories on the archive page add a wrap around their images as well
add_action( 'woocommerce_before_subcategory_title', create_function( '', 'echo "<div class="sub-archive-img-wrapper">";'), 5, 2 );
add_action( 'woocommerce_before_subcategory_title', create_function( '', 'echo "</div>";' ), 12, 2 );

Add the css as we did in the top example with the right class name and now your subcategory thumbnails and titles are also looking pimped.

You don’t have to use a different class for the subcategory thumbnail image, but it does give you a little extra control if you want to set a different height or any other css that only applies to the subcategory thumbnail.

WooCommerce has so many hooks it’s amazing! Every time you work on a WooCommerce project you will find new hooks to use and utilise if you just take a few minutes to browse the code base.

  1. Alessandro Köster says:

    When I followed your depiction my whole shop going down! I just deleted the cache after I have done the depictions and it began to load and doesn`t stop. When I now want to open the shop there comes nothing!

    I need help as fast as you can!

    • Hi Alessandro,
      I wouldn’t develop or test code on a live site, you should work on your local machine first. This code is approx 6 years old and I have not tested for a while to see if it is currently working with newer versions of WooCommerce, when I get the chance I will test and post an update.

      Cheers
      B

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.