Add A Wrapper Around Thumbnail Images On WooCommerce Archives

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 opening div to the img
function add_img_wrapper_start() {
    echo '<div class="archive-img-wrap">';
}
add_action( 'woocommerce_before_shop_loop_item_title', 'add_img_wrapper_start', 5, 2 );
// Close the div that we just added
function add_img_wrapper_close() {
    echo '</div>';
}
add_action( 'woocommerce_before_shop_loop_item_title', 'add_img_wrapper_close', 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
function add_image_wrapper_sub_cat_open() {
    echo '<div class="sub-archive-img-wrapper">';
}
add_action( 'woocommerce_before_subcategory_title', 'add_image_wrapper_sub_cat_open', 5, 2 );

function add_image_wrapper_sub_cat_close() {
    echo '</div>';
}
add_action( 'woocommerce_before_subcategory_title', 'add_image_wrapper_sub_cat_close', 5, 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.