How to Hide, Change or Remove WooCommerce On Sale Badge

woocommerce on sale badge hideWooCommerce on sale badge is a label that is displayed on the single product page, product archives pages, up-sell, cross-sells and related products. Ideally, this button is designed to notify your shop visitors that certain products have on sale offer.

WooCommerce On Sale Badge

You can set up the WooCommerce on sale badge for each product by adding the sales price and the regular price for the same product. In this post, I want to illustrate how you can change the sales badge as well as how you can remove it or hide it altogether.

The design of on-sale badge may vary from one WooCommerce site to another depending on the theme used on the store. The default WooCommerce theme – Storefront comes with a default plain on sale badge without any design as shown on the image below :

woocommerce on sale badge

Remove WooCommerce On Sale Badge

If you want to remove the sale badge from your WooCommerce store, you should consider to add the following code in your child theme functions.php file.

This code is a filter that checks for the sales badge on the page and replaces it with an empty string in the return statement of the callback function.

// Add filter to remove the sale_badge

 add_filter( 'woocommerce_sale_flash', 'njengah_remove_on_sale_badge' );

 function njengah_remove_on_sale_badge( $sale_badge ){
    return '';
 }

Remove or Hide WooCommerce On Sale Badge Using CSS

You can also use CSS to hide WooCommerce on sale badge. The CSS code below can be added to the child theme stylesheet to hide on sale badge across the WooCommerce store.

This trick may fail for some theme since there could be some other code that conflicts with this CSS code. Using the filter to hide WooCommerce on sale badge it the surest way to get it done.

/*Hide WooCommerce On Sale Badge*/

.woocommerce span.onsale {
   display: none;
}

hide woocommerce on sale badge | remove woocommerce on sale badge

Change WooCommerce On Sale Badge

You can also change the text of the WooCommerce on sale badge using a filter that I will share in the code below. Ideally, you may want to change the name sale to some custom name, possibly a translated version for the sales badge.

You can use the code below in your child theme functions.php file to change WooCommerce on sale badge to your custom text.

// Add filter to change the sale_badge text

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

   function njengah_change_on_sale_badge( $sale_badge, $post ) {
     return '<span class="onsale">Custom Text</span>';
   }

change woocommerce on sale badge

Conclusion

In summary, we have highlighted how you can remove WooCommerce on sale badge or how to hide WooCommerce on sale badge as well as how to change WooCommerce on sale badge text. You should simply add each of these code snippets to your child theme functions.php file and you will effectively hide or change the WooCommerce on sale badge.

Similar Articles


Customer Reviews

NJENGAH

Customer Reviews

Jeffrey Todd 04/07/2020

Exceptional Plugin & Service

I'm in the process of building my new website, and I had a question about changing some text within the WooCommerce plugin. I was spinning my wheels trying to figure it out. Joe reached back and worked with me - going above and beyond! - until I fully understood how to effectively change what I wanted. How can you ask for more than that? I highly recommend WooCommerce (and Joe!), the plugin and service are exceptional!
-Jeffrey Todd (MyLifeChart.com)