Change "Sale" text on a woocommerce product to an icon

[gimmechefs]

Hi Guys
I have a nifty bit of php code that allows me to change the text of “Sale” on single product image to any other text.

What i would like to do is use an x theme icon instead of text. For example a “Star” icon.

The code i use now for text change is…

add_filter(‘woocommerce_sale_flash’, ‘woocommerce_custom_sale_text’, 10, 3);
function woocommerce_custom_sale_text($text, $post, $_product)
{ return ‘MY TEXT’; }

How could i replace “MY TEXT” with an icon?

Integrity theme. Crafty template.

Cheers
Max

[marc_a]

Hi @gimmechefs,

You can try this code to replace your “MY TEXT” with an icon.

add_filter('woocommerce_sale_flash', 'woocommerce_custom_sale_text', 10, 3);
function woocommerce_custom_sale_text($text, $post, $_product)
{ return '<i class="x-icon" aria-hidden="true" data-x-icon-s=""></i>'; } 

"Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer."

Thank you.

[gimmechefs]

Hi Cramaton. Thanks for that. It slots in perfectly. What is the class for the x-icon? As you can see by the image attached, the star icon sits above the product image, and not over it. I would like it to sit over the image

top: 20px;
left : 20px;
background: black;
color: #fff

Cheers
Max!

[marc_a]

Hi @gimmechefs,

Please add this code on your Pro > Theme Options then CSS.

.entry-product .x-icon {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
} 

See the screenshot below on how it should look after you apply the CSS.

Thank you.

[gimmechefs]

@cramaton

.entry-product .x-icon {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
} 

Thank you Cramaton. Like all your code, that works perfectly. I really appreciate it. Max

[marc_a]

Hi @gimmechefs,

It’s our pleasure to help you.

Thank you.