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 has options for ‘Sale’ badge customization too. You can check out our article on the same here.

The Sale badge gets automatically added to your products even when you give discounts of any form using our ELEX Dynamic Pricing and Discounts plugin for WooCommerce and ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing.

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 want to replace the text. Well, that’s easy.

Paste the following code in the function.php file of your activated website theme.

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 | Custom Text
Custom Text in WooCommerce Sale Badge


Want to change the look?

If you are not satisfied with just changing the text and want some more changes, then paste the following code in the style.css file of your activated website theme.

span.onsale {
width: 100px;
height: auto;
background: #58D68D;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin: auto;
text-align: center;
color: white;
WooCommerce Sale Badge | Custom Design
Custom Design in WooCommerce Sale Badge


You can add any of your preferred shapes 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 a custom 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.

Add the following code snippet at the end of the function.php file.

add_filter('woocommerce_sale_flash', 'my_custom_sales_badge');
function my_custom_sales_badge() {
$img = '<img width="100px" height="100px" src="http://demostore.com/wp-content/uploads/2019/02/Sale-Red-Tag.png"></img>';
return $img;

You can replace the image source URL with your image URL in the above code snippet. Below screenshot shows the custom image for Sale badge.

WooCommerce Sale Badge | Custom Image
Custom Image for WooCommerce Sale Badge

If you wish to clear the badge area, then add the following CSS code in the style.css file.

span.onsale {
background: none;
box-shadow: none;

Want to change the position and further customization?

There are plugins available using which can either be used alongside the default ‘Sale’ badge or replace it. By using these plugins, you will get a number of badge options to choose from. You can either choose to give a text badge or an image badge.

For more information on the top plugins for customizing badge,  you can refer the section “Further Reading” given below.

WooCommerce Sale Badge | YITH Image Badge settings
YITH Image Badge settings

On selecting any of the Badges, your ‘On Sale’ products would appear as shown in the screenshot below.

Further Reading

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


Any change you make in function.php or style.php file 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.



Explore our blog section for more articles.

You can also check out WordPress and WooCommerce plugins in ELEX.

Popular Tags

Blog Business Case Code Snippet Documentation ELEX Address Validation & Google Address Autocomplete Plugin for WooCommerce ELEX Amazon Payments Gateway for WooCommerce ELEX Authorize.net Payment Gateway for WooCommerce ELEX Bulk Edit Products, Prices & Attributes for WooCommerce ELEX Dynamic Pricing and Discounts Plugin for WooCommerce ELEX EasyPost Auto-Generate & Email Labels Add-On ELEX EasyPost Shipping Method Plugin for WooCommerce ELEX Google Product Feed Plugin ELEX Hide WooCommerce Shipping Methods Plugin ELEX ShipEngine Multi-Carrier Shipping & Label Printing Plugin for WooCommerce ELEX Stamps.com Shipping Plugin with USPS Postage for WooCommerce ELEX Stamps.com USPS Auto-Generate & Email Labels Add-On ELEX WooCommerce Abandoned Cart Recovery with Dynamic Coupons ELEX WooCommerce Australia Post Bulk Label Printing Add-On ELEX WooCommerce Australia Post Shipping Plugin with Print Label & Tracking ELEX WooCommerce Catalog Feed for Facebook & Instagram ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing ELEX WooCommerce Choose Your Delivery Date Plugin ELEX WooCommerce DHL Express / eCommerce / Paket Shipping Plugin with Print Label ELEX WooCommerce DHL Express Bulk Label Printing Add-On ELEX WooCommerce Discount per Payment Method Plugin ELEX WooCommerce EasyPost Bulk Label Printing Add-On ELEX WooCommerce EasyPost Return Label Add-On ELEX WooCommerce Name Your Price Plugin ELEX WooCommerce Product Price Custom Text (Before & After Text) and Discount Plugin ELEX WooCommerce Stamps.com Bulk Label Printing Add-On ELEX WooCommerce USPS Shipping Plugin with Print Label ELEX WooCommerce Request a Quote plugin for WooCommerce ELEX WordPress Embed YouTube Video Gallery ELEX WordPress Embed YouTube Video Gallery Plugin FAQ Getting Started Knowledge Base Open Source HelpDesk & Customer Support Ticketing System – Simple & Flexible Plugin Integrations ReachShip WooCommerce Multi-Carrier & Conditional Shipping Plugin Shipping Plugins Uncategorized WooCommerce WSChat - WordPress Live Chat Plugin WSDesk - WordPress Helpdesk Plugin