How to Create a Sale Badge with Discount

Overview

In this article, we will cover how to create custom WooCommerce sale badges using the Advanced Woo Label plugin. These badges can display the discounted amount or percentage directly on your products, helping you create more engaging and informative labels for your customers.

In a previous article, we explained how to create a basic WooCommerce sale label for products that are on sale. Now, we’ll go a step further and show you how to use a powerful WooCommerce sale badge plugin to not only highlight discounted items but also show the exact discount value — whether it’s a fixed amount or a percentage.

Example of badge with discount amount

Example of badge with discount percentage

Creating a Badge with Discount Amount

Let’s start by creating a discount badge for WooCommerce products that shows the amount saved, like $10 off or Save $20!.

Badge with discount amount

1. Go to the Adv. Woo Label plugin and create a new blank label.
2. Set the label's display condition so it only appears for products that are on sale.

   Use this display rule:

   Product is on sale -> equal to -> Yes

   

   Label display conditions

3. Now, specify the label text. It should include any custom message along with the discount amount.

   For example, if you want to show Save {amount}!, enter the following text into the Label text field:

   Save {SYMBOL}{SAVE_AMOUNT|2}!

   

   Label text option

   Here, {SYMBOL} and {SAVE_AMOUNT|2} are special text variables that will dynamically show the currency symbol and the discount value for each WooCommerce product.

4. You can fully customize your WooCommerce sale badge — change the shape, text color, background color, font size, and more. These options are available in the badge styling settings.
   

   Label style option

5. Once you're done, click the "Publish" button. Your new WooCommerce sale label will now be visible on all discounted products.

Creating a Badge with Discount Percentage

Now let’s create a WooCommerce sale badge percentage style label, such as 10% off or Save 20%!.

Badge with discount percentage

1. Go to the Adv. Woo Label plugin and create a new blank label.
2. Set the label's display condition to show it only for products on sale.

   Use the following rule:

   Product is on sale -> equal to -> Yes

   

   Label display conditions

3. Now define the label text. This should include the current product’s discount percentage.

   For example, to show Save 20%!, enter the following into the Label text field:

   Save {SAVE_PERCENT}%!

   

   Label text option

   The variable {SAVE_PERCENT} will dynamically display the discount percentage for each WooCommerce product on sale.

4. Customize the appearance of your discount badge WooCommerce style—adjust the badge shape, background, font, and more using the styling settings.
   

   Label style option

5. Once everything looks good, click "Publish" to activate your label. The percentage-based WooCommerce sale badge will now show on all products with active discounts.