Change or Remove Sale Badge
WooCommerce sale badge is displayed automatically for products that are currently on sale. But what if you don’t like its default design or maybe you would like to change its text or even to completely remove it. We will dive into it in this tutorial.

These Sale! badges are displayed by default on:
- Single product pages,
- On shop page and in product archives (categories, tags etc),
- Up-sell, Cross-sells, Related products etc.
Change Sale! text
The text of WooCommerce sale badge can be changed easy enough with woocommerce_sale_flash
filter hook. It also allows to modify HTML!
Code for your functions.php
file:
/**
* Change sale badge text
*
* @author Misha Rudrastyh
* @url https://rudrastyh.com/woocommerce/change-or-remove-sale-badge.html#change-text
*/
add_filter( 'woocommerce_sale_flash', 'misha_change_on_sale_badge', 99, 3 );
function misha_change_on_sale_badge( $badge_html, $post, $product ) {
return '<span class="onsale">Custom!</span>';
}

As you can see we have $badge_html
parameter passed to the function which means that in some situations we can use str_replace()
to its value. It is also possible to use images as an on-sale badge like return '<img src=...
.
Change sale badge text to discount percentage
You’ve probably noticed that woocommerce_sale_flash
accepts three parameters and the third one – is WP_Product
object which allows us quite easily to do that:

add_filter( 'woocommerce_sale_flash', 'misha_change_on_sale_badge', 99, 3 );
function misha_change_on_sale_badge( $badge_html, $post, $product ) {
$percentage = round( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() * 100 ) . '%';
return '<span class="onsale">' . $percentage . ' OFF</span>';
}
Gosh! Almost forgot about variable products. If your shop has ones, slightly modify the code above please.
/**
* Show discoung percentage as a sale badge text
*
* @author Misha Rudrastyh
* @url https://rudrastyh.com/woocommerce/change-or-remove-sale-badge.html#display-discount-percentage
*/
add_filter( 'woocommerce_sale_flash', 'misha_change_on_sale_badge', 99, 3 );
function misha_change_on_sale_badge( $badge_html, $post, $product ) {
if( $product->is_type( 'variable' ) ){ // variable products
$percentages = array();
$prices = $product->get_variation_prices();
foreach( $prices[ 'price' ] as $id => $price ){
// if sale price == regular price, it means no sale right now, skip the loop iteration
if( $prices[ 'regular_price' ][ $id ] === $prices[ 'sale_price' ][ $id ] ) {
continue;
}
// array of all variations percentages
$percentages[] = ( $prices[ 'regular_price' ][ $id ] - $prices[ 'sale_price' ][ $id ] ) / $prices[ 'regular_price' ][ $id ] * 100;
}
$percentage = "UP TO " . round( max( $percentages ) ) . '%';
} else { // simple products
$percentage = round( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() * 100 ) . '%';
}
return '<span class="onsale">' . $percentage . ' OFF</span>';
}
Change Sale Badge CSS Styles
If want to change the badge style all over the website, you can use .onsale
class. We can change the badge color, shape, font size etc. By the way, if you would like to override default WooCommerce CSS rules, better use .woocommerce span.onsale
selector.
.woocommerce span.onsale {
background: #f77474;
color: #fff;
font-size: 1rem;
border-radius: 0;
right: -0.5rem;
}
.woocommerce span.onsale:before, .woocommerce span.onsale:after {
position: absolute;
content: "";
height: 0;
width: 0;
top: 0;
border-top: 21px solid #0000;
border-bottom: 21px solid #0000;
transform: rotateY(180deg);
}
.woocommerce span.onsale:before {
left: 100%;
border-right: 21px solid #f77474;
}
.woocommerce span.onsale:after {
right: 100%;
border-left: 21px solid #f77474;
}
Looks good, doesn’t it?

How to Remove Sale Badge
If you just do not want it to be displayed, it will be enough to paste the following code in your child theme functions.php
file.
/**
* Remove sale badge
*
* @author Misha Rudrastyh
* @url https://rudrastyh.com/woocommerce/change-or-remove-sale-badge.html#remove-sale-badge
*/
add_filter( 'woocommerce_sale_flash', 'misha_remove_on_sale_badge' );
function misha_remove_on_sale_badge( $badge_html ){
return '';
}
It is not the only way to do it, you can also do it with removing woocommerce_before_shop_loop_item_title
action.
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
But this may not work for some themes, even for Storefront, because it already removes the default WooCommerce sale labels from their original locations and adds its own custom ones under the title.
For Storefront:
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Het there! Thanks for nice post.
Do you know how to remove sale badge from woocommerce blocks?
Great post!
Do you know if you can change the text with CSS on Astra?