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

Last modified Nov 18, 2020
Difficulty Beginner
Language PHP
Category
Change the “Sale!” Text of the WooCommerce Sale Badge

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.

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 theme

When 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.

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.7.1 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, no warranty; click here for details.

Your Comments

Submit a Comment

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

Receive notifications about our new blog posts.

Download Divi Layouts

FOR FREE!

Fill the form below. We will send you a link to download layouts.  You will also get notified about the future giveaways! 

Great, you've entered our giveaway! Please check your email!