Change or Remove Sale Badge

As you probably know, WooCommerce uses its own HTML for products, and it also includes "Sale!" label.

This badge is displayed by default:

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.

add_filter( 'woocommerce_sale_flash', 'misha_remove_on_sale_badge' );

function misha_remove_on_sale_badge( $badge_html ){
	return '';
}

But this filter also allows to change the badge default HTML, example:

add_filter( 'woocommerce_sale_flash', 'misha_change_on_sale_badge', 10, 2 );

function misha_change_on_sale_badge( $badge_html, $post ) {
	return '<span class="onsale">Top!</span>';
}

I want to say a couple words about StoreFront theme – it already removes the default WooCommerce sale labels from their original locations and adds its own custom ones, for example under the title:

Sale badges in Storefront WooCommerce theme

In see tutorials which recommend a solution with removing action woocommerce_after_shop_loop_item_title etc, but why we should do this creepy stuff when woocommerce_sale_flash works perfectly for Storefront theme too.

Read also

Misha Rudrastyh

Misha Rudrastyh

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me