WooCommerce Shop page thumbnail wrap

Question

I am looking at this: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

I would like to wrap thumb in shop page into another div.

If I use following code I could achieve something, but the problem is many themes remove or dont use woocommerce_before_shop_loop_item_title and use some different code and I cannot effectively do my action.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

add_action( 'woocommerce_before_shop_loop_item_title', 'my_woocommerce_before_shop_loop_item_title', 10 );


function my_woocommerce_before_shop_loop_item_title() {

            global $product;

            $post_id = $product->get_id();

            $html = woocommerce_get_product_thumbnail('woocommerce_thumbnail');
          
            echo '<div class="my">' . $html . '</div>';
    
           
        }

Is there action or hook that processes product thumbnail to which I could do my own action? Regardless of what is happening before and after that?

Rajat Sharma Rajat Sharma · Accepted Answer · 2020-10-16T13:51:49

Please try to implement in this way.

//replace the functionprefix with your functions prefix
function functionprefix_wrap_loop_product_image() {

    if ( ! class_exists( 'WooCommerce' ) ) return; //* exit if WooCommerce not active

    add_action( 'woocommerce_before_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_open', 10 );
    add_action( 'woocommerce_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_close', 10 );

}
add_action( 'woocommerce_before_shop_loop' , 'functionprefix_wrap_loop_product_image', 3 );
//replace the functionprefix with your functions prefix
function functionprefix_product_loop_image_wrapper_open() {
    echo '<div class="image-wraper">';
}

function functionprefix_product_loop_image_wrapper_close() {
    echo '</div>';
}

WooCommerce Shop page thumbnail wrap

1 Answers