WooCommerce - 自定义缩略图和默认后备图像占位符

Posted 2023-03-05

【中文标题】WooCommerce - 自定义缩略图和默认后备图像占位符

【英文标题】：WooCommerce - Custom thumbnails and default fall back image placeholder

【发布时间】：2016-11-14 05:10:02

【问题描述】：

我只想在 woocommerce_get_product_thumbnail 中插入一个包装器，我可以看到我的包装器出现了，但是如果没有图像，它就没有后备图像。

如何输出默认的 woocommerce 缩略图？

这是我不完整的代码：

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

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) 
    function woocommerce_template_loop_product_thumbnail() 
        echo woocommerce_get_product_thumbnail();
     

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) )    
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) 
        global $post, $woocommerce;
        $output = '<div class="col-lg-4">';

        if ( has_post_thumbnail() )                
            $output .= get_the_post_thumbnail( $post->ID, $size );
         else 
            how to show the default woocommerce thumb 
                               
        $output .= '</div>';
        return $output;
    

【问题讨论】：

你为什么不把echo woocommerce_get_product_thumbnail();放在你的else条件的一部分？

【参考方案1】：

我在开头为remove_action 和add_action 添加了一个init 钩子，以便在WordPress/WooCommerce 初始化时触发它……

$placeholder_width = 0, $placeholder_height = 0 自 woocommerce 版本 2.0 起已弃用 (see this)。您不再需要它们，这可能是您的问题的一部分。

注意：pallavi 的答案对于您的 else 语句中的 $output .= wc_placeholder_img( $size ); 是正确的。我已经为此投了他的票……

所以我对你的代码做了一点改动：

add_action('init', function()
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
    add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) 
    function woocommerce_template_loop_product_thumbnail() 
        echo woocommerce_get_product_thumbnail();
     


if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) )    
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog' ) 
        global $post, $woocommerce;
        $output = '<div class="col-lg-4">';

        if ( has_post_thumbnail() )                
            $output .= get_the_post_thumbnail( $post->ID, $size );
         else 
             $output .= wc_placeholder_img( $size );
             // Or alternatively setting yours width and height shop_catalog dimensions.
             // $output .= '<img src="' . woocommerce_placeholder_img_src() . '"    />';
                               
        $output .= '</div>';
        return $output;
    

【讨论】：

我面临与 OP 相同的问题，想知道我们是否应该将此代码块放在我们的子主题下的 functions.php 中还是直接放在 wc-template-functions.php 中？

@alchuang 哦，抱歉，是的，此代码在您的 活动子主题（或主题）的 function.php 文件中……但肯定是 不在wc-template-functions.php

看起来我们在顶部的 add_action init 函数的末尾缺少了一个结束 );。

【参考方案2】：

试试下面的代码

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

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) 
    function woocommerce_template_loop_product_thumbnail() 
        echo woocommerce_get_product_thumbnail();
     

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) )    
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) 
        global $post, $woocommerce;
        $output = '<div class="col-lg-4">';

        if ( has_post_thumbnail() )                
            $output .= get_the_post_thumbnail( $post->ID, $size );
         else 
             $output .= wc_placeholder_img( $size );
                               
        $output .= '</div>';
        return $output;