Customizing loop product image via a hook in Woocommerce

Question

I am customizing woocommerce themes. I stuck on loop product using hook action woocommerce.

To call/include the thumbnail image in a loop, we call this hook

<?php do_action('woocommerce_before_shop_loop_item_title'); ?>

And the thumbnail image appears. I am confused where is the <img src"" .... location? How to edit that code?

Thanks

Solution 1

The hook woocommerce_before_shop_loop_item_title load the image from this function code:

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {

    /**
     * Get the product thumbnail for the loop.
     */
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail(); // WPCS: XSS ok.
    }
}

So as you can see it uses woocommerce_get_product_thumbnail() function for it:

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {

    /**
     * Get the product thumbnail, or the placeholder if not set.
     *
     * @param string $size (default: 'woocommerce_thumbnail').
     * @param int    $deprecated1 Deprecated since WooCommerce 2.0 (default: 0).
     * @param int    $deprecated2 Deprecated since WooCommerce 2.0 (default: 0).
     * @return string
     */
    function woocommerce_get_product_thumbnail( $size = 'woocommerce_thumbnail', $deprecated1 = 0, $deprecated2 = 0 ) {
        global $product;

        $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );

        return $product ? $product->get_image( $image_size ) : '';
    }
}

I hope that this answers your question, and removes your confusion.

---

Customizing the loop product image

Now, you can remove this default function from the hook to add your own custom one, using this:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
    global $product;
    $size = 'woocommerce_thumbnail';

    $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );

    echo $product ? $product->get_image( $image_size ) : '';
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

So now you just need to customize the code inside the function…

Solution 2

The LoicTheAztec's answer is very good, but I think it contains one small, but critical error. We removed the standard output (echo) hook and added not a filter (it returns the result), but an action, so, we should do echo. That artful/invisible error ate my time enough. :)

// there is
return $product ? $product->get_image( $image_size ) : '';
// should be
echo $product ? $product->get_image( $image_size ) : '';

Comments

[Abd Hannan]

Thank you so much, you save my night :) @loic