在 Woocommerce 存档页面上的产品价格后添加图标

Question

我正在尝试在 Woocommerce 中的产品价格之后为商店页面上的特定产品类别添加自定义图标。所以我想在“快速运输”产品类别的所有产品的价格之后添加一个“快速送货卡车”的图标。

我希望它在 wish.com 网站中显示，就像在这个屏幕截图中一样：

这是我尝试过的：

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;
}

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

任何帮助将不胜感激。

Answer 1

在属于价格标签之前或之后使用css：

    fa-shipping-fast:before{
            content: url(.....);
            width : ....;
            height : ....;
            ....
    }

Answer 2

自 Woocommerce 3 以来，您使用了错误的钩子，并且您的代码中有一些错误。 在右侧价格后显示一个图标，用于“快速发货”产品类别，两种情况：

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

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 文件中。经过测试并且可以工作。

---

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

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 文件中。经过测试并且可以工作。