How to Add a WooCommerce Sale Badge (3 Methods)

WooCommerce displays a sale badge automatically when you set a sale price on a product. The default badge shows a plain “Sale” label on the product image. To show custom text, a discount percentage, or a fully branded badge, you need either a CSS/PHP snippet or a WooCommerce sale badge plugin.

This guide covers all three methods:

1. Using WooCommerce’s built-in sale badge (no code)
2. Customizing the sale badge with code (CSS and PHP)
3. Adding a custom WooCommerce sale badge using a plugin

Let’s find out how to add sale tag in WooCommerce.

Method 1: How to Add a Sale Badge in WooCommerce (Built-In)

WooCommerce shows a sale badge on any product that has a sale price set. Here is how to enable it.

Step 1: Log in to Your WordPress Dashboard

Log in to your WordPress site as an administrator.

Step 2: Go to Products

Click Products in the left menu, then select All Products.

Step 3: Edit the Desired Product

Find the product you want to put on sale, hover the mouse over and click Edit.

Step 4: Set a Sale Price

Scroll to the Product Data section. Under the General tab, you will see two fields:

• Regular Price: The standard price for the product.
• Sale Price: The discounted price to display.

Enter the discounted amount in the Sale Price field.

• Enter the discounted price in the Sale Price field.

Step 5: Schedule the Sale (Optional)

Click the Schedule link next to the sale price to set a start and end date. WooCommerce will show and hide the sale badge automatically based on those dates.

Set the start date in the From field and end dates in the To field for the sale, and WooCommerce will automatically display the sale tag during this period.

Step 6: Save the Changes

Click Update to save. The WooCommerce sale badge will now appear on the product image on your shop and product pages.

The default badge shows the word “Sale” at the top-left corner of the product image. The product price area also reflects the discount by showing the original price with a strikethrough next to the sale price.

Here’s how our current theme displays the WooCommerce sale flash badge on the Shop page.

Here’s the product page view.

In addition to the sale badge, the price display also reflects the discount. The original price is shown with a strikethrough, while the discounted price is displayed prominently.

This is how to add sale tag in WooCommerce using the default options.

Default WooCommerce Sale Badge: Limitations

The built-in WooCommerce sale badge works out of the box but has several constraints:

• Badge text: Displays “Sale” only. You cannot change the text without custom code or a plugin.
• No percentage display: The badge does not show how much is discounted (for example, “20% Off”) unless you add custom code.
• No style control: Color, shape, font, and position are controlled by your theme, not WooCommerce.
• No scheduling per badge: You can schedule the sale price, but you cannot control badge visibility independently.

If your store needs custom badge text, a discount percentage badge, or branded styling, use Method 2 or Method 3 below.

Method 2: How to Change the WooCommerce Sale Badge with Code

Here’s a simple guide to customize WooCommerce sale badges using codes:

Step 1: Change the Sale Badge Text (PHP)

To replace the default “Sale” text with custom text, add this snippet to your theme’s functions.php file. Go to Appearance > Theme File Editor and locate functions.php.

add_filter( 'woocommerce_sale_flash', 'custom_sale_badge_text', 10, 3 );

function custom_sale_badge_text( $html, $post, $product ) {
    return '<span class="onsale">Discount!</span>';
}

Save the file. Your WooCommerce sale badge will now display “Discount!” instead of “Sale.”

To show the discount percentage on the badge, use this snippet instead:

add_filter( 'woocommerce_sale_flash', 'wc_sale_badge_percentage', 10, 3 );

function wc_sale_badge_percentage( $html, $post, $product ) {
    if ( $product->is_type( 'variable' ) ) {
        return $html;
    }
    $regular_price = (float) $product->get_regular_price();
    $sale_price    = (float) $product->get_sale_price();
    if ( $regular_price && $sale_price ) {
        $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
        return '<span class="onsale">-' . $percentage . '%</span>';
    }
    return $html;
}

This displays a WooCommerce sale badge percentage (for example, “-20%”) directly on the product image.

Step 2: Change Badge Color and Style (CSS)

Go to Appearance > Customize > Additional CSS and add the following.

Change badge color:

.onsale {
    background-color: #ff5733 !important;
    color: #ffffff !important;
}

Change badge position (move to top-left):

.onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
}

Change badge shape (rounded square):

.onsale {
    border-radius: 5px !important;
    width: auto;
    height: auto;
    padding: 5px 10px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px !important;
    white-space: nowrap;
}

You can combine all of these properties into a single .onsale {} block rather than writing separate blocks for each change.

Method 3: How to Add a WooCommerce Sale Badge Using a Plugin

A WooCommerce sale badge plugin gives you full control over badge design, placement, scheduling, and targeting without touching code. This is the best approach for stores that run frequent promotions or want branded sale badges.

The plugin used in this guide is Product Labels For WooCommerce (Sale Badges) by Acowebs.

Step 1: Install the Display Sale badge WooCommerce Plugin

Go to Plugins >> Add New. Search, find, install and activate the plugin.

Step 2: Hide the Default WooCommerce Sale Badge

Before creating your custom badge, disable the default WooCommerce sale badge to avoid overlap. Go to the plugin’s settings and enable “Hide Default WooCommerce / Theme Sale Badges.”

Before we start designing our custom sales badge, we need to hide the default WooCommerce badge. This will prevent any visual overlap or conflict between the two.

Go to the plugin’s dedicated menu and click Settings. Enable the option “Hide Default ‘Woocommerce / Theme Sale Badges”

Step 3: Create the WooCommerce Sales Tag/Badge

Go to Badges and hit the Add New Badges button.

Give your badge a name. After that, set your sales badge label text in the Badge Label box.

You can also set dynamic values instead of custom texts. Here are some possible dynamic values you can insert – {day} {month} {year} {category} {salepercentage}.

Step 4: Customizing the Sales Badge

Set the visual properties of the badge:

• Text Color: Choose a hex color for the badge text.
• Font Size: Set the size in pixels.
• Font Weight: Select normal or bold.
• Line Height: Set in pixels.
• Badge Style: Select from preset shapes (circle, rectangle, ribbon, and others).

A live front-end preview updates as you make changes.

You can select the sales badge style from the following section and check the front-end preview from the right panel.

Step 5: Selecting Products for the Badge

Next, you need to select which products will display the badge. If you only want the On Sale products to display badges, go to the Products Selection tab and enable the following option.

If you want to display the badge on a custom list of products, you can create the list from the Product Lists menu.

After that, come back to the Products Selection tab and assign the list.

For this example, we will continue with the On Sale Products option.

Step 6: Publish The WooCommerce Sales Badge

The plugin allows you to set a custom schedule for displaying the sales badge on the front.

If you want to display it right away, hit the Publish button without scheduling any specific date. Here’s how the front page displays the badge now.

This is how to add sale tag in WooCommerce using a plugin. As you can see, adding sale tags in WooCommerce using a plugin is a simple and effortless process, yet it offers surprisingly advanced capabilities for managing your promotions.

If you are using a dedicated discount plugin such as Disco and running multiple discount campaigns you can display custom badges for your offered discounts using the combination of these plugins.

How to Show the Sale Percentage in the WooCommerce Badge

Showing the discount percentage on a WooCommerce sale badge (for example, “Save 25%”) is one of the most effective ways to communicate value to shoppers. There are two ways to do it.

Using code: Use the PHP snippet from Method 2, Step 1 above. It calculates the percentage from the regular and sale price and injects it into the badge.

Using a plugin: In the Acowebs plugin (and similar tools), add {salepercentage} to the badge label field. The plugin calculates and displays the discount percentage automatically, including for products with multiple price points.

Note: The code method does not work for variable products without additional customization. A plugin handles variable products more reliably.

Best WooCommerce Sale Badge Plugin: Product Labels For WooCommerce

Product Labels For WooCommerce (Sale Badges) by Acowebs is a dedicated WooCommerce sale badge plugin with a free version available on WordPress.org.

Key Features

• Custom badge text and dynamic values including {salepercentage}
• Full style control: colors, fonts, shapes, sizes
• Badge position control including top-right and top-left placement
• Product targeting: apply badges to on-sale products, specific products, or custom lists
• Scheduling: set start and end dates per badge
• Hides the default WooCommerce sale badge to prevent overlap

The free version covers core badge customization. Check the official plugin page for paid plan details before publishing, as pricing may change.

Freequently Asked Questions

Key Takeaways

• WooCommerce adds a sale badge automatically when a product has a sale price set. No plugin is needed for the default badge.
• The default badge displays “Sale” only. Customizing text, color, shape, or position requires CSS, a PHP filter, or a plugin.
• To display the sale percentage on the badge (for example, “-20%”), use the woocommerce_sale_flash PHP filter or a plugin with a {salepercentage} dynamic value.
• A WooCommerce sale badge plugin gives you the most control: custom design, dynamic values, scheduling, and product targeting without any code.
• For the top-right badge position, adjust .onsale with right: 10px and left: auto in CSS.
• Showing a percentage discount on the badge is one of the clearest ways to communicate value on product and shop pages.
• Variable products require a plugin or custom PHP logic to show accurate badge percentages.