Change text
Display discount percentage
Change style
Remove sale badge

Change or Remove Sale Badge

Updated on April 25, 2022

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.

Default sale product badges in WooCommerce — Default Sale! product badges in Twenty Twenty Two theme.

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:

show discount percentage in WooCommerce sale badge

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?

Change sale badge CSS styles in WooCommerce

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

# WooCommerce

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

Follow me on Twitter