在 Woocommerce 存檔頁面上的產品價格后添加圖標

Question

我試圖在 Woocommerce 中為商店頁面上的特定產品類別的產品價格后添加一個自定義圖標。 所以我想在“FAST SHIPPING”產品類別的所有產品的價格后添加一個“快速送貨卡車”的圖標。

我希望它像在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

自 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 文件中。 測試和工作。

Answer 2

使用 css 之前或之后屬於價格標簽：

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