Добавить значок после цены продукта на страницах архива 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

Вы используете неправильный хук, начиная с 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 : ....;
            ....
    }