php - 通过 Woocommerce 中的钩子(Hook)自定义循环产品图像

Question

我正在定制 woocommerce 主题。 我使用 hook action woocommerce 坚持使用循环产品。

为了在循环中调用/包含缩略图，我们调用这个钩子(Hook)

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

缩略图出现。 我很困惑 <img src"" .... 在哪里地点？ 如何编辑该代码？

谢谢

Answer 1

Hook woocommerce_before_shop_loop_item_title 从 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.
    }
}

如您所见，它使用了 woocommerce_get_product_thumbnail() function为此:

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

我希望这能回答您的问题，并消除您的困惑。

---

自定义循环产品图片

现在，您可以从钩子(Hook)中删除此默认函数以添加您自己的自定义函数，方法是:

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

代码进入事件子主题(或事件主题)的 functions.php 文件。经过测试并有效。

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