Добавить значок после цены продукта на страницах архива Woocommerce

#php #css #wordpress #woocommerce #icons

#php #css #wordpress #woocommerce #Значки

Вопрос:

Я пытаюсь добавить пользовательский значок после цены товара в 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;
}

Но после цены ничего не отображается.

Любая помощь была бы высоко оценена.

1. Привет, добро пожаловать в Stack Overflow. Пожалуйста, отредактируйте вопрос, включив в него соответствующий код, поскольку без него никто не сможет повторить вашу ситуацию. Также, пожалуйста, не задавайте несколько вопросов сразу. Спасибо.

2. хорошо, сделаю, спасибо!

Ответ №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() ) amp;amp; ! is_product() ){
        $price .= '<span style="float:right"><i class="fas fa-shipping-fast"></i></span> ';
    }
    return $price;
}

Код вводится function.php файл вашей активной дочерней темы (или active theme). Протестировано и работает.

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 файл вашей активной дочерней темы (или active theme). Протестировано и работает.

1. Это сработало!! Ну, по крайней мере, для простых продуктов. Есть ли способ заставить это работать и для переменных продуктов? Миллион благодарностей!!

2. @Matt Я повторно протестировал код, и он работает и с переменными продуктами на моем тестовом сервере…

3. Хорошо .. Я еще раз взгляну на другие мои коды и посмотрю, есть ли у меня что-то, что мешает ему работать с переменными продуктами. ЕЩЕ РАЗ спасибо ЗА ВАШУ ПОМОЩЬ!!!

4. Как будет написан пользовательский css, чтобы расположить значок в крайнем правом углу? Как и сейчас, значок отображается сразу после цены.

5. Исправлена проблема, пришлось установить css для .price в качестве встроенного блока и все сработало как по волшебству!

Ответ №2:

Используйте css до или после того, как принадлежит ценнику :

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