在Woocommerce存档页面上在产品价格之后添加图标 [英] Add an icon after product price on Woocommerce archive pages

问题描述

我正在尝试在Woocommerce中针对商店页面上特定产品类别的产品价格之后添加自定义图标.因此，我想在快速运输"产品类别中所有产品的价格之后添加快速送货卡车"的图标.

I am trying to add a custom icon after the product price in Woocommerce for a specific product category on shop page. So I would like to add an icon of a "fast delivery truck" after the price on all products from "FAST SHIPPING" product category.

我希望它显示在 wish.com 网站中，如以下屏幕截图所示:

I would like it to display that like in wish.com web site, like in this screenshot:

这是我尝试过的:

add_filter( 'woocommerce_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $instance ) {

    if(is_product_category( 'fast-shipping')){      
        $icon = ' <i class="fas fa-shipping-fast"></i> ';
        $price = $icon . $price . $icon;
    }
    return $price;
}

但是它在价格之后不显示任何内容.

But It doesn't display anything after the price.

任何帮助将不胜感激.

推荐答案

自Woocommerce 3起，您使用了错误的钩子，并且代码中存在一些错误.要在价格快速上涨"产品类别的右侧价格后显示图标，有两种情况:

You are using the wrong hook since Woocommerce 3 and there are some errors in your code. To display an icon after the price on the right for "fast-shipping" product category, two cases:

1)在所有Woocommerce存档页面上:

1) On all Woocommerce archive pages:

add_filter( 'woocommerce_get_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $product ) {

    if( has_term( 'fast-shipping', 'product_cat', $product->get_id() ) && ! is_product() ){
        $price .= '<span style="float:right"><i class="fas fa-shipping-fast"></i></span> ';
    }
    return $price;
}

代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.

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

2)在特定的Woocommerce产品类别存档页面上:

2) On a specific Woocommerce product category archive pages:

add_filter( 'woocommerce_get_price_html', 'append_icon_after_product_price', 10, 2 );
function append_icon_after_product_price( $price, $product ) {

    if( is_product_category( 'fast-shipping' ) ){
        $price .= '<span style="float:right"><i class="fas fa-shipping-fast"></i></span> ';
    }
    return $price;
}

代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.

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

这篇关于在Woocommerce存档页面上在产品价格之后添加图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！