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

Answer 1

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.