Add custom html tag around category images in woocommerce category archive pages

Question

I have a shop page that is showing at the top the product categories and then it starts showing the products.

For the product categories thumbs I added a zoom in effect when hover in the img.

But i need to wrap that image in a div to set a height and width so i can overflow:hidden; the rest of the image i dont want to show on hover.

I've been trying to find the loop in the archives but i dont find it.

Does someone knows where i can find that?

Thanks!

What I need is to wrap the images of each sub category in a div

https://www.evernote.com/shard/s423/sh/22d92a4c-ca26-4dae-9c09-ed15dc833fb1/f0c2b1b7b7f7bac0c513e5bd9534bcdb

LoicTheAztec LoicTheAztec · Accepted Answer · 2017-08-29T20:31:07

So you could override the template content-product_cat.php (where the category image is hooked) and add your opening tag before line 32 and the closing tag after line 37 around this:

/**
 * woocommerce_before_subcategory_title hook.
 *
 * @hooked woocommerce_subcategory_thumbnail - 10
 */
do_action( 'woocommerce_before_subcategory_title', $category );

But instead you can use the existing hook woocommerce_before_subcategory_title (line 37), where the image is hooked (or called), to wrap the image in some html tag of your choice, so you can try this:

add_action( 'woocommerce_before_subcategory_title', function( $category ){
    // The opening div (priority 8)
    echo '<div class="some-class">';
}, 8, 1);

add_action( 'woocommerce_before_subcategory_title', function( $category ){
    // The closing div (priority 12)
    echo '</div>';
}, 12, 1);

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This last way is the best one.

Add custom html tag around category images in woocommerce category archive pages

1 Answers