主页 / 问题 / 739677
Accepted
Sergei R
Asked:2020-11-03 15:32:48 +0000 UTC2020-11-03 15:32:48 +0000 UTC

woocommerce where 产品图像模板钩 woocommerce_template_loop_product_thumbnail

  • 772

我需要更改用于显示产品图像的模板、包装器 (HTML img)。文件中的woocommerce_before_shop_loop_item挂钩 负责显示图像。

/wp-content/plugins/woocommerce/templates/content-product.php

钩子调用woocommerce_get_product_thumbnail函数

wp-content/plugins/woocommerce/includes/wc-template-functions.php

然后我迷路了。

挂钩将图片包裹在里面

<img class="...

这是包装图片的html模板，我需要更改它。

更新

根据下面的答案，我在这里做了一个函数 my-theme/woocommerce/function.php

function filter_woocommerce_product_get_image( $image, $_this, $size, $attr, $placeholder ) {
  if ( has_post_thumbnail( $_this->get_id() ) ) {
            $image = get_the_post_thumbnail( $_this->get_id(), $size, $attr );
    } elseif ( ( $parent_id = wp_get_post_parent_id( $_this->get_id() ) ) && has_post_thumbnail( $parent_id ) ) {
            $image = get_the_post_thumbnail( $parent_id, $size, $attr );
    } elseif ( $placeholder ) {
            $image = custom_wc_placeholder_img( $size );
    } else {
            $image = '';
    }

  return $image;
}

add_filter ( 'woocommerce_product_get_image', 'filter_woocommerce_product_get_image', 10, 5);

我在 content-product.php 中调用了钩子

do_action( 'woocommerce_product_get_image' );

得到

致命错误：未捕获的 ArgumentCountError：函数 filter_woocommerce_product_get_image() 的参数太少

wordpress

2 个回答

  1. Best Answer

    然后调用 WC_Product 类的 get_image() 方法。下面是方法代码：

    public function get_image( $size = 'shop_thumbnail', $attr = array(), $placeholder = true ) {
    if ( has_post_thumbnail( $this->get_id() ) ) {
        $image = get_the_post_thumbnail( $this->get_id(), $size, $attr );
    } elseif ( ( $parent_id = wp_get_post_parent_id( $this->get_id() ) ) && has_post_thumbnail( $parent_id ) ) {
        $image = get_the_post_thumbnail( $parent_id, $size, $attr );
    } elseif ( $placeholder ) {
        $image = wc_placeholder_img( $size );
    } else {
        $image = '';
    }
    return apply_filters( 'woocommerce_product_get_image', wc_get_relative_url( $image ), $this, $size, $attr, $placeholder );
}

    修改图片的html代码，使用钩子woocommerce_product_get_image

    钩子应该是这样的：

    function filter_woocommerce_product_get_image( $image, $_this, $size, $attr, $placeholder ) {
    // ваш код модификации $image
    return $image;
}
add_filter ( 'woocommerce_product_get_image', 'filter_woocommerce_product_get_image', 10, 5);
    • 3

  2. 我解决了一个类似的问题，找到了一个替代选项——如果我们不能改变图像本身的输出，那么我们可以使用它上面和下面的钩子将它包装在我们的代码或 div 中。我写了两个函数，将图片包装在我们需要的类的块中的产品列表中：

    function img_top_prew()
{echo '<div class="imgcat">';}; 
add_action( 'woocommerce_before_shop_loop_item', 'img_top_prew', 10 );
function img_top_bottom()
{echo '</div>';}; 
add_action( 'woocommerce_before_shop_loop_item_title', 'img_top_bottom', 10 );

    获取包装图像 在此处输入图像描述

    • 2

相关问题