WooCommerce: Add A Wrapper Around Thumbnail Images On Archives

Last Updated on

Add A Wrapper Around Thumbnail Images On Archives

In WooCommerce store, however on archive pages, such as categories and tag pages, You face an issue of product thumbnails being different heights. if your product images are different heights, your product names and prices will be out of alignment with other surrounding products.

You can solve it by adding a few lines of code to your functions.php file and a little CSS.
Justo go to your Theme Functions file and add the following code. Then the image will be wrapped with a div tag that has a class “archive-img-wrapper”. You can change the class name to whatever you want.

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

For Sub Category Thumbnails?

// 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 );

Now set a height to your div by adding height to the class name in your CSS file.
For Example

.archive-img-wrapper {
 height: 200px;
}

.sub-archive-img-wrapper {
 height: 300px;
}

It is not necessary to use different classes for the subcategory thumbnail image, but by using different class you can have extra control if you want to set a different height or any other CSS

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...

Leave a Reply

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

More in WooCommerce
CM-Isometric-Shopping-Cart-800px
WooCommerce: Only One product in the cart at a time

If you want to your customers to add only one product in the cart at a time, simply copy and

Close