Change the “Sale!” Text of the WooCommerce Sale Badge

Last modified Sep 21, 2021
Difficulty Beginner
Language PHP
Category

Watch Tutorial

By default, WooCommerce’s sales badge can look a tad boring. It looks like a simple button-looking badge with the word ‘Sale!’ on display.  While this is effective in letting your customer know some products are discounted, it does look a bit commonplace. If you want to give your online store some pizazz, you can tweak WooCommerce to change the sale badge text.

Sales and promotions strategies are great for encouraging your customers to purchase your products. Whether you’re running a holiday promotion or want to move excess stock, listing select products for sale is easy with WooCommerce. All you have to do is enter a sale price in the Product Data section, and instantly, a ‘Sale!’ badge will appear on the product listing.

The ‘Sale!’ badge can be a bit underwhelming, so changing the display text to something different can give it more of a stand-out feel. In this Divi tutorial, we’ll give you a quick code PHP snippet that’ll let you change the default ‘Sale!’ text to something custom.

Looking to skip the step-by-step Divi tutorial? Jump ahead to the code library and add the PHP snippet to your functions.php file.

Our plugin, the Divi Shop Builder, brings all of the Divi Builder power to the previously untouchable WooCommerce pages. With our plugin, you can customize plenty of aspects of your WooCommerce store such as creating custom thank you, account, checkout, cart pages and more. You can also customize the Sale badge without code. Check out the plugin now!

Customize WooCommerce: Change the Sale Badge to Custom Text

By default, the WooCommerce sale badge displays the text ‘Sale!’ when a product has been discounted. While this text is self-explanatory and to the point, it can be dull, and it’d be great to show improved sale badges for WooCommerce.

It would be great to change this ‘Sale!’ text to something unique, text that encouraged a bit more urgency to it, such as:

  • Final sale
  • Don’t sleep
  • Act fast!
  • Last stock
  • Final stock

While there is no easy way to change this ‘Sale!’ text in the WooCommerce plugin on the back end, there’s a quick code fix for this.

In this Divi tutorial, you’ll get a short PHP snippet of just a few lines that’ll change the sale badge text for WooCommerce.

In this tutorial, you will:

  • Add a line of PHP code to the functions.php file in your child theme

If you do not already have a child theme set up, you can download one for free using the Divi Space Child Theme Generator. If you’re not fully clued up on what child themes are or how to use them, read our comprehensive guide to child themes.

Step 1: Add a Divi Shop Module

If you haven’t already, add a Divi Shop module to a page or post using the Divi Builder.

WooCommerce Change Sale Badge Divi Tutorial - Add Divi Shop module

Add s Shop module using the Divi Builder

Step 2: Add Product Sale Prices

To add sale prices, select the products that are on sale, visit the back end of the product listing and scroll down to the Product Data section. Click on the General tab and you’ll see an option to enter a Sale Price.

Once you’ve added a sale price, click Update on the product listing.

WooCommerce Change Sale Badge Divi Tutorial - Add sale price

Add a sale price to your products

Repeat this step as many times as you like, adding sale prices to discounted products.

When complete, return to the front end of your store and you’ll see a Sale! badge has been added to the discounted products.

WooCommerce Change Sale Badge Divi Tutorial - Sale badge display

By default, the WooCommerce sale badge displays simply as ‘Sale!’

Step 3: Edit the functions.php File

Navigate to the Appearance > Theme Editor console and locate the functions.php file in your child theme.

Copy and paste the following code before the closing PHP ?> bracket:

add_filter('woocommerce_sale_flash', 'ds_change_sale_text');

function ds_change_sale_text() {
return '<span class="onsale">Custom!</span>';
}

 

WooCommerce Change Sale Badge Divi Tutorial - Add PHP code 1

Add PHP code to the functions.php file in your child themeWhen finished, click Update File to save your changes.

Now, when you view the front end of your site, you’ll see that the text has changed from ‘Sale!’ to ‘Custom!’.

WooCommerce Change Sale Badge Divi Tutorial - Sale badge changed 1

With just a little line of PHP, you’ve successfully changed the WooCommerce sale badge text

You can make the sale badge display any custom text you like, simply change the word Custom! To anything you like.

Here’s another example:

add_filter('woocommerce_sale_flash', 'ds_change_sale_text'); function ds_change_sale_text() { return '<span class="onsale">Save Now!</span>'; }

 

WooCommerce Change Sale Badge Divi Tutorial - Add PHP code 2

Add PHP code to the functions.php file in your child theme

In this example, I’ve used the text ‘Save Now!’ to alert customers that there are guaranteed savings on the set products.

WooCommerce Change Sale Badge Divi Tutorial - Sale badge changed 2

Use the PHP snippet to add any custom text to the WooCommerce sale badge

With just a little bit of PHP, you can change the WooCommerce sale badge text to anything you like! The options really are endless when you start working with code!

We hope you enjoyed this snippet! If you’re looking for more ways to change the WooCommerce sale badge, follow this Divi tutorial to change the text to a percentage value. If you’re looking for an even easier way to customize your WooCommerce store, check out our Divi Shop Builder plugin.

Suggest a snippet!

Do you want to create custom functionality in your Divi site, but don’t know how? Submit your snippet request by commenting below and our team of expert developers will get to work!

PHP

add_filter('woocommerce_sale_flash', 'ds_change_sale_text');

function ds_change_sale_text() {
   return '<span class="onsale">Custom!</span>';
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.9.4 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com,  and Woocommerce Plugin by Automatic modified by Divi Space, October 29, 2020. Licensed under the GNU General Public License v3, no warranty; click here for details.

Your Comments

13 Comments

  1. Mike van Dijk

    Hello Anna Kurowska

    Hello!
    I would like to change the text of the sale bandage only on a specific product page.

    Is this possible?

    And is it possible to set different sale bandage on different product pages.

    And when the sale bandage are changed is the sale bandage of the product page automatically been displayd on the product category page

    I ask this question because I have a E-commerce store and we sale products in bulk of 2 and 3 when a customer buys 2 or 3 products they get the product with a discount

    1 product for 39.90 2 for 70 3 for 90

    And is it possible to display the sale bandage on the product and product category page without putting the product in sale.

    Because I use the plugin woocommerce dynamic pricing for the bulk discount

    And I want to use the sale badges to let the customer see when they buy 2 products or more they get the products ad a lower cost.

    When this is possible I am going to buy the plugin Divi shop builder for woocommerce

    And change my theme on my website to the Divi theme

    With the best regards,

    Mike

    Reply
    • Anna Kurowska

      Hello, yes, there is a way to create custom sale badges with Divi Shop Builder and Woo Shop+ Module, please see the example: https://divishopbuilder.aspengrovestudio.com/shop-builder-layouts/demo-custom-description-badges/

      You can add “Sale Badge” Element or/and “Custom Meta Field” element that you can stylize as a badge, through module settings, as in this example above. You can download our layout and import on your site. With Divi’s conditional logic module settings, you can display the module based on custom conditions. You can also create completely different product page designs with Divi theme builder and assignments (“specific product page”).

      I think everything is possible, but needs a little bit of thinking. Hope that helps.

  2. Eric

    Worked perfet. Thanks

    Reply
  3. Shakil

    how may i can change the colour of sale badge from black to red?

    Reply
  4. Anders

    Hello, how can I change the color of the sales badge?
    Thank you for this guide!

    Reply
  5. Myriam Bron

    How can I change it also for the sale badge on the woo carousel?

    Reply
    • Anna Kurowska

      Hi! For Product Carousel for Divi And WooCommerce, since 1.0.4 you can set custom sale text from the module settings.

  6. Usama Adeel

    hello kindly tell me please how I can change the position of sale badge on the shop page?

    Reply
    • Anna Kurowska

      Hi, it’s doable with CSS. What exactly do you want to achieve?

      Here is the code to put badge in the top right corner:

      .woocommerce-page ul.products li.product span.onsale {
          right: 10px !important;
          left: unset!important;
          top: 10px!important; 
          position: absolute; 
      }
      
  7. Ujjwal Rathore

    how can add “save now!” with “amount.”

    like
    save 100$

    the amount needs to be calculated by
    regular price – sell price

    Reply
  8. Dirk

    Hello!
    I would like to change the text of the sale bandage only in a specific category.
    Is this possible?

    Regards,
    Dirk

    Reply
    • Anna Kurowska

      Hi, yes, this is possible.

      add_filter('woocommerce_sale_flash', 'ds_change_sale_text');
      function ds_change_sale_text() {
           if( is_product_category() ) {
      	// we are on a product category page
              return 'This will be displayed on the category page!';
            } else {
              return 'This will be displayed everywhere else!';
            }
      }
      

      You can use it for specific category pages, by passing arguments to the function is_product_category

      is_product_category()

      Returns true when viewing a product category archive.

      is_product_category( 'shirts' )

      When the product category page for the ‘shirts’ category is being displayed.

      is_product_category( array( 'shirts', 'games' ) )

      When the product category page for the ‘shirts’ or ‘games’ category is being displayed.

Submit a Comment

Your email address will not be published.

Receive notifications about our new blog posts.

Next snippet Change the WooCommerce Sale Badge to Display a Percentage Discount
Previous snippet Change The “Read More” Text of the WooCommerce Button