Solutions to Remove Product Sales Flash Icon Badge in WooCommerce

Woocommerce shows a Sales icon badge on product images if you set Sale Price:
Remove Product Sales Flash Icon Badge in WooCommerce

How do we get rid of these tiring icons?

Solution 1: Use Regular Price only.

Leave “Sale Price” field empty.
Woocommerce Sale Price

Solution 2. Use CSS to hide the icon.

Take as an example.  Initiate Firebug, locate css of sale icon.

Initiate Firebug, local the css of sale icon

Try with the magic css code:  display:none  and the sale icon disappears!

Try with the magic css code:  display:none

Use this block of CSS code, insert it to theme style.css file. That’s it !

.onsale {
    display: none;

Solution 3. Actually remove the sale icon source code

Insert the following code to functions.php file under theme folder.

// Remove "Sale" icon from product archive page
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 20 );

// Remove "Sale" icon from product single page
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 20 );
This entry was posted in WordPress. Bookmark the permalink.

12 Responses to Solutions to Remove Product Sales Flash Icon Badge in WooCommerce

  1. Kristine says:

    Thanks! This is more complete tutorial 🙂

  2. Jeanne says:


  3. David Phan says:

    Thanks for share. I used solution 3 for my website.

  4. Mary says:

    Thanks! I am just getting started and couldn’t immediately find where to alter the functions.php file, so I tried Solution 2. I placed the code you provided in Appearance>Theme Options>Custom CSS, and it worked like a charm. Merci!!

  5. Richard says:


    thanks for laying these options out so clearly. For reasons I’ won’t bore you with, options 1 and 2 aren’t suitable for me (well, Option 2 is okay, but if we can remove the sale flash rather than just hide it from people, that’s a much better option).

    Option 3 is perfect, and the line to remove it from the single product works perfectly on the site I’m working on, but the one to remove it from the product loop has no effect. I’ve tried increasing and reducing the priority of the removal, but it just doesn’t work. I know you wrote this a year and a half ago, but as you’ve responded to comments recently, can you confirm that this still works for you? I’m using the latest WordPress and WooCommerce, with a child theme of WooTheme’s StoreFront theme, should that be relevant.

  6. Reginald Tapo says:

    Thanks Jeriff. as of 2015-10-26 Solution 3 had no affect, Solution 2 however did what was expected. Thanks again.

  7. Vito says:

    Hi! I want change the text “ON SALE!” in my site in other text! how can I do?? Example: “BEST PRICE!”

    Thankyou for all!!!

  8. I added to this CSS and worked for me .onsale { display: none !important; }

  9. Darren says:

    I want to change the ‘Sale’ text into ‘hot’. any tips?

  10. Bob says:

    I’m trying to chance the ‘Sale’ text into something Like ‘Sold Out!’, but only when the stock is set to 0. Is that possible with a filter?

  11. Max says:


Leave a Reply

Your email address will not be published. Required fields are marked *