Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WooCommerce: 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 "
";'), 5, 2); add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "
";'), 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 "
";'), 5, 2 ); add_action( 'woocommerce_before_subcategory_title', create_function( '', 'echo "
";' ), 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

The post WooCommerce: Add A Wrapper Around Thumbnail Images On Archives appeared first on Wasim Sama.



This post first appeared on Wasim Sama, please read the originial post: here

Share the post

WooCommerce: Add A Wrapper Around Thumbnail Images On Archives

×

Subscribe to Wasim Sama

Get updates delivered right to your inbox!

Thank you for your subscription

×