Posted on

Change the Sale badge text in WooCommerce

Don’t you like the Sale badge that WooCommerce prints on your products on sale?

You can quickly change the text if you want, or show the percentage saved on the purchase instead of a static text.

To show the percentage, i suggest the extension Sale Flash Pro, to change instead the text you can use a little snippet.

Open your functions.php file located in wp-content/themes/your-theme-name/ and add this code at the end of it:

28 thoughts on “Change the Sale badge text in WooCommerce

  1. Hi,

    I’ve added this code but it’s not looking good on my website.

    https://physicalwellbeing.co.uk/shop/

    Whole text can’t bee seen. Any way to fix this?

    1. That’s because your theme uses the corner as badge instead of the default circle.

      The only thing i found to fix is to add this CSS code to your theme:

      .woocommerce .onsale, .woocommerce-page .onsale { height: 110px; line-height: 200px; }
      

      It does not look that good though. I suggest to ask how to change the badge to your theme author!

      1. Is there maybe any way to move this ribbon from left to right side?

        1. Yeah, but it’s not that easy because you also need to rotate it to the other side. Please contact the theme author for this.

          Thanks for understanding!

  2. Hi,
    I’ve added this to my child theme’s functions.php but the text isn’t changing (using a child theme of Storefront). Could there be something interfering with it?

    Thanks!

    1. Hi,
      Yes it’s possible, or maybe the code has been added wrongly.

      Please try without child theme.

  3. This does seem to work, but do you have any advice on how to also translate the text with WPML? After adding the code I get the text entered in functions.php for all languages and I can’t seem to find any way to access the additional code snippet through WPML’s string translation.

    1. Ah – found it! You need to re-scan the theme for strings in WPML.

      Thank you very much for the original code though!

  4. Hi Nicola,

    Thanks for the snippet!

    I’m trying to get this to work for specific categories but each time I try to modify the snippet it removes the Sales badge from the products on Shop page (works on individual product pages). Any suggestions to get this to work for specific categories?

  5. Thx, worked “right out of the box” with some css-editing.

    1. Awesome! I’m glad it worked well for you!

  6. Hi,

    Thanks for the code.

    Perhaps you know a simple way to change “Sale” text for each product (depending on it’s id or custom field value)?

    1. Hi Player, sorry if I missed your comment.

      I see you already fixed in the comment below though, good job!

  7. Just wrote myself one – adjusting text depending on product ID.

    Keep up with your blog.

  8. Worked Perfct! THX!

  9. Works perfectly. Thanks!

  10. Thanks a lot , it worked perfectly on my two sites after some CSS tweaks !
    big UP !

  11. hi, how can I add percentage sale for my grouped products? can you help me?

    1. Hi Shima,
      Grouped products can’t be discounted since you can’t set a price on a grouped product.

  12. Worked perfectly on Divi. Total brilliance! Thank you!

  13. How do you change the sale flash button location?

    I am making a custom theme and the button appears before the product images in the category pages.
    I would like to make it appear after them, just like in the storefront theme and cannot find how to move it.

    1. Hello Kilroy,
      You can use this code to unhook the sale flash from is default location:

      remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash' );
      

      And then use add_action() to add it in another location, for example after the product title:

      add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash' );
      
  14. How can I change the position of the Add to Cart & Add to Wishlist into the product image not under the image ?

    1. Hi,
      I don’t know about the Add to Wishlist, but for the Add to Cart button, you need to remove the filter woocommerce_template_single_add_to_cart from woocommerce_single_product_summary and add it to a different hook.

      Under the image, it could be woocommerce_before_single_product_summary with a priority higher than 20.

  15. Nicola Mustone Thank’s a lot. I searched for this answer the hole day, about “unhook the sale flash from is default location:” ,now I have to put this bagde on home page too .

Leave a Reply
You have to agree to the comment policy.