CODEWITHSUNDEEP
phpcsswordpresswoocommerceicons
Matt
Matt

Reputation: 63

Add an icon after product price on Woocommerce archive pages

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.

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

screenshot

This is what I've tried:

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.

Any help would be much appreciated.

Upvotes: 3

Views: 1849

Answers (2)

LoicTheAztec
LoicTheAztec

Reputation: 254231

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

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

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

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

Upvotes: 1

Ayed Mohamed Amine
Ayed Mohamed Amine

Reputation: 617

Use css before or after belong to the price tag :

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

Upvotes: 0

Related Questions