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 replies
    • Nicola Mustone
      Nicola Mustone says:

      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!

      Reply
  1. Shaina
    Shaina says:

    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!

    Reply
  2. Bjorn
    Bjorn says:

    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.

    Reply
  3. Amber
    Amber says:

    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?

    Reply
  4. Player
    Player says:

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

    Reply
  5. Kilroy
    Kilroy says:

    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.

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      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' );
      
      Reply
    • Nicola Mustone
      Nicola Mustone says:

      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.

      Reply
  6. Eusebiu
    Eusebiu says:

    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 .

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.