How to Add Sale Tag in WooCommerce

Want to see your sales numbers do a little happy dance?

Then you need sale badges. They’re like the exclamation points of eCommerce—they add excitement and urgency.

Without them, your products on sale are just… quietly sitting there, hoping someone notices. Don’t let your discounts go unnoticed!

This guide will walk you through how to add sale tag in WooCommerce and customize them so you can turn up the volume of your promotions and watch those sales roll in.

Let’s jump right into how you can display sale badge on WooCommerce products.

How to Add Sale Tag in WooCommerce?

You add promotional labels in WooCommerce when there’s a sale/discount price on the products. A WooCommerce sale tag or badge is basically a visual indicator, typically displayed on the product image, to highlight the discount to shoppers.

It’s pretty straightforward to add sale tag to product WooCommerce. The core WooCommerce allows displaying a WooCommerce discount label as soon as you input a sale price for a product.

However, the design of the product-specific sale tags varies depending on the WordPress theme you are using. You can also customize sale badge text using custom codes or a sale badge WooCommerce plugin.

Therefore, there are 3 methods you can use to add sale badge to product.

1. Displaying WooCommerce sale flash badge using WooCommerce’s Built-in Features
2. Using custom codes
3. Using WooCommerce Plugins

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

Step 1: Log in to Your WordPress Dashboard

You first need to log in to your WordPress site’s back panel as an admin.

Step 2: Go to the Products Section

Click on Products, then select All Products from the left side menu panel. You’ll see a list of all the products in your store.

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

• You need to scroll down to the Product Data section.
• In the General tab, you’ll see two fields: Regular Price and Sale Price.

• Enter the discounted price in the Sale Price field.

Step 5: Schedule the Sale (Optional)

If you want the Sale price to be valid for a specific period, you can set start and end dates by clicking the Schedule link.

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

Once you’ve added the sale price (and scheduled it if needed), click the Update button to save your changes.

Step 7: Check Your Product Page

• Visit the product page on your store to confirm that the sale tag is visible. The default “Sale” badge should now appear on the product image.

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 Sale Badge Design and Its Limitations

As you have seen above, WooCommerce provides a basic “Sale” badge by default. Here’s what you need to know about it:

1. Default Appearance
   • The badge is a small label, usually displayed at the top-left corner of the product image.
   • It simply says “Sale” without additional details like the discount percentage or duration.
2. Customization Limitations
   • You cannot change the text, color, or style of the badge without custom code or a plugin.
   • The badge does not dynamically display the discount percentage (e.g., “20% Off”) unless customized.

While the built-in feature is easy to use, it’s best suited for stores with simple sale requirements. If you want more advanced options, like countdown timers or a complete WooCommerce custom sale label, you’ll need to explore plugins or custom coding.

How to Customize Sale Tags with Code

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

Step 1: Adding Custom Text to Sale Tags

Right now, as you can see, the sale badge displays the word “Sale” by default. Let’s change it to “Discount” to make our WooCommerce discount offers more efficient.

You can replace the default “Sale” text with custom text for WooCommerce sale badges by adding a code snippet to your site.

• To do so, go to Appearance >> Theme File Editor or use a code editor if you’re working locally.
• Add the following snippet to your theme’s functions.php file:

// Change the "Sale" text on sale badges

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

function custom_sale_text( $html, $post, $product ) {

return '<span class="onsale">Discount!</span>';

}

• Save the file, and check your product pages. The badge will now display “Discount!” instead of “Sale.”

Step 2: Changing Badge Color, Position, or Style with CSS

You can customize the appearance of sale badges as well as the WooCommerce sale tag placement by using CSS. Here are the steps –

• Go to your WordPress dashboard, then navigate to Appearance >> Customize >> Additional CSS.

Changing Badge Color – How to Add Sale Tag in WooCommerce (Changing Positions)?

Let’s change the color of the sale badge first. Add the following CSS code to the following window.

.onsale {

background-color: #ff5733 !important; /* Add !important to override theme styles */

color: #ffffff !important; /* Change text color */

}

Here’s the result –

How to Add Sale Tag in WooCommerce (Changing Positions)?

The badge is currently placed on the right side on the Shop page list. Let’s place it on the left. To reposition the badge:

.onsale {

position: absolute !important; /* Ensures precise positioning */

top: 10px !important; /* Keeps the badge near the top */

left: 10px !important; /* Moves the badge to the left */

right: auto !important; /* Ensures it's not positioned on the right */

}

Note: You don’t need to repeat the .onsale class for every additional change. Simply add all the extra CSS properties within the same {} block for cleaner and more organized code.

Here’s the result.

How to Change the Shape of The WooCommerce Sales Tag?

Right now, the WooCommerce sales tag is round or circular in shape. Let’s change it to a square but with some border-radius. To change the style:

.onsale {

border-radius: 5px !important; /* Adds a slight border radius for square look */

width: auto; /* Automatically adjusts the width based on text */

height: auto; /* Automatically adjusts the height */

padding: 5px 10px !important; /* Adds padding to avoid text cutting */

display: inline-flex; /* Ensures the badge remains flexible */

justify-content: center; /* Centers the text horizontally */

align-items: center; /* Centers the text vertically */

font-size: 14px !important; /* Adjust font size */

white-space: nowrap; /* Prevents text wrapping */

}

• Publish the changes and preview your product pages.

These simple tweaks let you make sale tags match your store’s branding and style!

How to Add Sale Tag in WooCommerce Using a Plugin?

We found multiple good plugins that can help you create customized sales badges in your Woo store. The plugin we will use for this article is called Product Labels For WooCommerce (Sale Badges)By Acowebs.

Another free plugin is Custom Product Badge for WooCommerce, which allows you to add customizable badges to products, enhancing their visibility and appeal on your store.

As you know by now, WooCommerce doesn’t have any features to customize sale label. Plugins allow you to extensively customize the attributes of a WooCommerce sales badge (label text, colors, position, etc.).

Let us walk you through how to add sale tag in WooCommerce using a plugin.

Step 1: Install the Display Sale badge WooCommerce Plugin

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

Step 2: Hide WooCommerce’s Default Sales Badge

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

Let’s now personalise the badge. You can set custom attributes such as,

• Text Color
• Font Size (Pixel)
• Font Weight
• Line Height (Pixel)

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.

Best Practices for Effective WooCommerce Sale Badges

Effective sale badges are crucial for drawing attention to discounted products and driving sales. Here are key best practices to consider:

Strategic Placement for Maximum Visibility

• Corner Placement: The most common and effective placement is in the top-left or top-right corner of the product image. This placement is immediately noticeable without obstructing crucial product details.
• Avoid Overlap: Ensure the badge doesn’t overlap important elements of the product image, such as the product itself or key features.
• Mobile Optimization: Consider how the badge appears on mobile devices. It should remain visible and legible even on smaller screens. Test on different devices to ensure optimal display.

Compelling and Concise Messaging

• Urgency and Scarcity: Use text that encourages immediate action, such as “Limited Time Offer,” “While Supplies Last,” or “Sale Ends Soon.”
• Clear Discounts: Clearly state the discount amount (e.g., “50% Off,” “$10 Off”) or use descriptive terms like “Sale” or “Discounted.”
• Conciseness: Keep the text short and to the point. Avoid lengthy phrases that can clutter the badge. Examples:
  • Good: “30% Off”
  • Better: “Save 30%”
  • Bad: “Get 30 percent off your entire purchase today!”
• Testing: A/B test different messaging to see what resonates best with your audience.

Maintaining Consistent Branding

• Color Palette: Use colors that align with your store’s branding and create visual contrast against the product image. Consider using colors that evoke feelings of excitement and value, such as red, orange, or gold.
• Font and Style: Choose fonts that are legible and consistent with your overall branding. The badge’s style (e.g., shape, border) should also complement your store’s design.
• Consistency Across Platforms: Ensure the sale badge design is consistent across your website, mobile app (if applicable), and other marketing materials.

Additional Considerations

• Badge Shape and Size: Experiment with different shapes (e.g., circles, squares, ribbons) and sizes to find what works best for your products and store design.
• Animation (Use with Caution): Subtle animations can draw attention to badges, but avoid excessive or distracting animations.
• Contextual Relevance: Consider using different badge designs or messages for different types of sales or promotions.

By following these best practices, you can create effective WooCommerce sale badges that attract attention, drive sales, and enhance your customers’ shopping experience.

Wrap up

So, what we have learned in this article is that a product in WooCommerce can feature a sale tag, visually represented by a badge on its product page. This badge highlights the discounted price and aims to attract customers by increasing visibility and urgency.

Plugins can enhance this functionality with features like custom text, countdown timers, or dynamic conditions, making the sale promotion more effective.

By customizing the badge’s design and functionality, you can align it with your store’s branding and marketing goals. This simple yet impactful element can play a crucial role in boosting sales and enhancing the shopping experience.