Customizing loop product image via a hook in Woocommerce

问题

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

回答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…

回答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 ) : '';

来源：https://stackoverflow.com/questions/50773845/customizing-loop-product-image-via-a-hook-in-woocommerce

标签

php

wordpress

image

woocommerce

hook-woocommerce