Everything you need to know about the WooCommerce ‘Sale’ badge!

When you have a wide selection of items in your store, you would definitely want to highlight some of them, either to highlight the offer attached to them or just to signify some new arrivals or featured products. This article would explore some of the easy ways to make specific products stand out in your store by using badges.
As you know, WooCommerce has a default ‘Sale’ badge which is automatically displayed alongside the product which is ‘on sale’.
Depending on the theme you are using, the ‘Sale’ badge would be displayed differently. Some theme even have options for ‘Sale’ badge customization too. You can check out my article on the same here.

The Sale badge gets automatically added to your products even when you give discounts of any form using our Dynamic Pricing and Discounts plugin for WooCommerce.

Want to change the text?

Usually the default text displayed on the ‘Sale’ tag is ‘Sale’. We receive a number of requests from customers who wants to replace the text. Well, that’s easy.
Copy past the following code in function.php

add_filter( 'woocommerce_sale_flash', 'wc_custom_replace_sale_text' );
function wc_custom_replace_sale_text( $html ) {
return str_replace( __( 'Sale!', 'woocommerce' ), __( 'My sale text!', 'woocommerce' ), $html );
}

In place of ‘My sale text!’, add the text you wish to see in place of ‘Sale’

WooCommerce Sale Badge

Want to change the look?

If you are not satisfied with just changing the text, and want some more changes, then Copy paste the following code in the style.css

span.onsale {
width: 100px;
height: auto;
background: #00FF00;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin: auto;
text-align: center;
color: white;
}

WooCommerce Sale Badge

You can add any of your preferred shape and change the CSS accordingly.

Want to remove the ‘Sale’ badge completely?

Sometimes you would just want to sell your products at discounted rates without highlighting the fact that they are on Sale. In that case you can just simply remove the ‘Sale’ badge.
Copy paste the following code in your function.php file.
add_filter(‘woocommerce_sale_flash’, ‘woo_custom_hide_sales_flash’);
function woo_custom_hide_sales_flash()
{
return false;
}

Want to replace the default badge with some image?

You can find a good variety of images on the web which you can set as a Sale badge. The advantage of using images is that you can get your desired Sale badge with the least amount of code.
In the function.php file add the following code snippet –
add_filter( 'woocommerce_sale_flash', 'my_custom_sales_badge' );
function my_custom_sales_badge() {
$img = '';
return $img;
}

You can replace the image source with the image source you are using.
Then, add the following css in style.css
span.onsale {
background: none;
box-shadow: none;
}

The above lines of code should clean the badge area.

Want to change the position and further customization?

The YITH WooCommerce Badge Management plugin should help.
This plugin can either be used alongside the default ‘Sale’ badge or replace it.
This free plugin has a number of badge options to choose from. You can either choose to give a text badge or an image badge.
WooCommerce Sale Badge
On selecting any of the YITH Badge, your ‘On Sale’ products would appear as the following
WooCommerce Sale Badge

Further Reading

If you are a techie then there’s a lot of cool stuffs you can do with the sale badge. This article should help your explore some more options.

Disclaimer

Any change you make in function.php or style.php shall be wiped out after any plugin and theme update respectively. So, make sure to keep a backup of the code snippet you are using.

Reference

How to Use a Custom Sales Badge Icon in WooCommerce
Change the Sale badge text in WooCommerce

    Leave a Reply