How to Add Sale Badges in WooCommerce (Custom Product Labels)

Learn how to add custom sale badges in WooCommerce to highlight discounts, promotions, and special offers. This complete guide covers using the Sale Booster plugin and the Discount Rules plugin to create custom product labels for any discount rule including simple, bulk, BOGO, tiered, bundle, and group discounts. Boost conversions and attract more customers with eye-catching sale badges.

📋 Table of Contents

• Why Add Custom Sale Badges?
• Method 1: Using the Sale Booster Plugin
• Method 2: Using the Discount Rules Plugin
• Next Steps

---

🚀 Why Add Custom Sale Badges?

A WooCommerce sale badge is a visual label or icon displayed on product images to highlight special information, such as discounts, new arrivals, seasonal sales, best sellers, or limited stock. Product badges can increase conversion rates by 15-25% by drawing attention to key products and offers.

Why Replace the Default "Sale" Badge?

Default WooCommerce Sale Badge	Custom Sale Badges
Only shows "Sale" text	Display any custom text or percentage
Cannot change text/color without code	Customizable colors, fonts, and styles
No dynamic discount display	Auto-display discount percentages
Cannot schedule for campaigns	Schedule badges for specific date ranges
Limited positioning	Flexible placement options

Key Statistic: Product badges help attract customer attention, enhance product visibility, and boost conversions by signaling important product details or offers.

When to Use Custom Sale Badges

With this guide, you can add custom sale badges for any rule type created in the plugin, including:

• Simple Discounts — "Save 20%"
• Bulk Discounts — "Buy More, Save More"
• BOGO Deals — "Buy 1 Get 1 Free"
• Tiered Discounts — "Volume Discount"
• Bundle/Group Discounts — "Bundle Deal"

Now you're ready to create custom sale badges using the Sale Booster plugin.

---

Method 1: Using the Sale Booster Plugin

The easiest way to add custom sale badges is with a dedicated badge plugin. We recommend the Product Badge, Label, Countdown Timer for WooCommerce – Sale Booster plugin, available for free on WordPress.org.

Step 1: Install and Activate the Plugin

1. Go to Plugins > Add New in your WordPress admin
2. Search for "asanaplugins" or Product Badge, Label, Countdown Timer for WooCommerce – Sale Booster
3. Find the Product Badge, Label, Countdown Timer for WooCommerce – Sale Booster plugin by asanaplugins in the search results
4. Click Install Now and then Activate

Step 2: Access the Badges Menu

After activation, a new Sale Booster menu appears in your WordPress admin dashboard.

Step 3: Create a New Badge

1. Navigate to Badges > Add New
2. Enter a descriptive Name for your badge (e.g., "Flash Sale")
3. Ensure Status is set to Enable
4. Check Display on Archive Page and Display on Product Page to show the badge on both product listing and single product pages

Step 4: Choose a Quick Badge Template

Under Quick Badges, select a ready-made badge style to instantly apply label, color, and shape settings. You can customize it further after applying.

Available Quick Badges:

• Selling Fast!
• Limited Stock
• 20% OFF
• Best Seller
• New Arrival
• Popular Choice
• Free Shipping
• Only 11 Left
• NEW
• Hot Deal
• Clearance
• Save 20%
• Flash Sale
• Members Only
• Trending
• Staff Pick
• Today Only
• Back in Stock
• Bundle Deal

Step 5: Configure the CSS Label

Switch to the CSS Labels tab and customize your badge:

1. Label Field: Enter your custom badge text (e.g., "Flash Sale", "Bundle Deal", "Special Offer")

2. Dynamic Placeholders: Use placeholders to display dynamic values:

   • {price} — Regular price
   • {sale_price} — Sale price
   • {saved_percent} — Percentage saved
   • {saved_price} — Amount saved in currency
   • {sale_ends} — Sale end date
   • {qty} — Product quantity
   • {currency} — Store currency symbol
   • {sku} — Product SKU
   • {br} — Line break

   Example: {saved_percent} OFF, {saved_price} OFF

3. CSS Label Position: Choose "On Image" or "Out of Image"

Step 6: Customize Badge Appearance

Label Styles: Choose from multiple pre-designed label styles in the style selector.

Customization Options:

• Font Size: Set for archive and product pages separately
• Line Height: Adjust spacing for readability
• Font Weight: Choose light, normal, bold, etc.
• Width & Height: Set precise dimensions
• Label Color: Customize the background color
• Text Color: Change the badge text color

Step 7: Advanced Customization Options

• Border Radius: Adjust corner rounding (0-100px)
• Opacity: Set transparency level (0-100%)
• Rotation: Rotate the badge horizontally or vertically
• Reverse Text: Display text from right to left
• Label Position: Fine-tune positioning with pixel values (Top, Bottom, Left, Right)
• Shadow: Add a shadow effect with custom color
• Animation Effects: Apply animations with adjustable duration and iteration count

Step 8: Set Display Conditions

Switch to the Products & Conditions tab and choose how the badge should be displayed:

Option A: Apply to All Sale Products

Set condition: "Is on sale" → Yes. This displays the badge on all products that have a sale price.

Option B: Apply to Specific Categories

Under Categories, select Included and search for your desired categories.

Option C: Apply to Specific Products

Under Products, select Included and search for your desired products or product variations.

Option D: Apply to Discount Rules

Under Discount rules, select your created discount rules. This automatically displays the badge on products that have active discounts from the Discount Rules plugin.

Option E: Combination of Conditions

Combine multiple conditions using "+ Or Group". Example: Apply badge to specific products OR specific categories.

In this example we used "Discount rules" condition to select products of our discount campaign

Step 9: Schedule the Badge (Optional)

Switch to the Schedule tab:

• Leave empty for an unscheduled badge that runs immediately
• Set a start date and end date for the badge to appear

Step 10: Save and Test

1. Click Save to apply the badge
2. Visit a product page to see the custom sale badge in action

---

Quick Badge Examples

Here are some example badges you can create for different promotion types:

Promotion Type	Badge Example
Simple Discount	"Save 20%"
Bulk Discount	"Bulk Offer"
Bulk Discount	"Buy More Save More"
BOGO Deal	"Buy 2 Get 1"
Bundle Deal	"Bundle Deal"
Flash Sale	"Flash Sale"
Special Offer	"Special Offer"

---

Troubleshooting: Badge Not Showing?

If your "You Save" badge doesn't appear on your product pages, follow these steps:

Step 1: Check Plugin Versions

Ensure both the free and pro plugins are updated to the latest and matching versions. Outdated or mismatched versions can cause compatibility issues.

Step 2: Test Badge Positions

Go to Plugin Settings → General Tab and test the available positions one by one:

• For archive pages: Check all positions listed under the archive section
• For product pages: Check all positions listed under the product section

Remember: There are separate positions for "On image" and "Out of image" badges—make sure you're testing the correct one for your use case.

Step 3: Use Custom Hooks (If Positions Don't Work)

If none of the default positions work, you can enter custom hooks provided by your theme developer:

• Use the "Archive Loop Custom Hooks" field for archive pages
• Use the "Single Product Custom Hooks" field for product pages

Step 4: Try Shortcodes

As an alternative, you can use these shortcodes:

For product pages:

[asnp_badge hide="1"]

For archive/product listing pages:

[asnp_badge]

To target a specific product:

• Product page: [asnp_badge product_id="7" hide="1"] (replace 7 with your product ID)
• Archive page: [asnp_badge product_id="7"] (replace 7 with your product ID)

---

Method 2: Using the Discount Rules Plugin

You can add sale badges with the Discount Rules and Dynamic Pricing for WooCommerce plugin for the pricing rules.

How It Works

The Discount Rules plugin automatically generates sale badges for products that have active discount rules. You can:

• Choose between showing "Sale" text or the actual discount percentage
• Set the badge position on archive and product pages
• The badge appears automatically on products with active discounts

Step 1: Access the WooCommerce Settings

1. Go to Woo Pricing & Discounts > Settings in your WordPress admin
2. Navigate to the General > Product Pricing tab
3. Ensure that Show Sale Badge enabled for the pricing rules that you would like to show sale badge on those campaign types

Step 2: Configure Sale Badge Type

Sale Badge Type option:

Option	Description	Example
Sale	Displays "Sale" text inside the badge (same as WooCommerce default)	"Sale"
Discount	Displays the discount percentage value inside the badge for simple pricing rules	"20%"

Note: The discount type only shows percentage discount for simple pricing rules and for other rules it just shows "Sale" badge.

Step 3: Configure Sale Badge Position on Archive Page

Under the Sale Badge Position On Archive Page option, choose where the badge appears on product listing pages (shop page, category pages, etc.):

Available Positions:

• Before product thumbnail (Default)
• After product thumbnail
• Before product title
• After product title
• Before product rating
• After product rating
• Before product price
• After product price

Step 4: Configure Sale Badge Position on Product Page

Under the Sale Badge Position On Product Page option, choose where the badge appears on individual product pages:

Available Positions:

• Before product images (Default)
• After product images
• Before product title
• After product title
• Before product price
• After product price

Step 5: Save Your Settings

1. Click Save changes at the bottom of the page
2. Your sale badge settings are now configured

Step 6: Ensure that you have created a pricing rule

1. Go to Woo Pricing & Discounts
2. Open the Pricing tab
3. Ensure that you have created a pricing rule campaign

Step 7: Test Your Sale Badge

1. Visit a product page or archive page that has active discounts
2. The sale badge should appear on product image

---

Troubleshooting: Badge Not Showing?

If the sale badge doesn't appear on your product pages, follow these steps:

Step 1: Check Your Settings

1. Make sure "Show Sale Badge" is enabled for your pricing rule type

Step 2: Try All Available Positions

The plugin uses WooCommerce hooks to display badges. Some themes don't support all hook positions.

For Archive Pages:

• Go to Woo Pricing & Discounts > Settings > General > Product Pricing
• Find "Sale Badge Position On Archive Page"
• Try each position one by one: Before product thumbnail, After product thumbnail, Before product title, After product title, Before product rating, After product rating, Before product price, After product price

For Product Pages:

• Find "Sale Badge Position On Product Page"
• Try each position one by one: Before product images, After product images, Before product title, After product title, Before product price, After product price

Step 3: Use the Shortcode

If none of the positions work with your theme:

1. Set "Sale Badge Position On Archive Page" and "Sale Badge Position On Product Page" to "None"
2. Use the shortcode [wccs_sale_flash] in your theme templates to display the sale badge

Technical Note for Theme Developers

The plugin uses these WooCommerce hooks:

Archive Page Hooks:

• woocommerce_before_shop_loop_item_title
• woocommerce_shop_loop_item_title
• woocommerce_after_shop_loop_item_title

Product Page Hooks:

• woocommerce_before_single_product_summary
• woocommerce_single_product_summary

If your theme uses custom hooks, you may need to adjust the badge position or use the shortcode method.

---

🎉 Success!

You've learned two methods to add custom sale badges in WooCommerce:

• Method 1: Sale Booster Plugin — Best for full customization, more badge types, and advanced styling options
• Method 2: Discount Rules Plugin — Best for automatic badge display on products with active discount rules

Both methods allow you to highlight discounts, increase conversions, and make your products stand out.

Try it Live & Explore PRO

Experience all discount rules and pricing strategies in action on our Live Demo Website.

Upgrade to Discount Rules and Dynamic Pricing for WooCommerce PRO to unlock advanced conditions, user role pricing, recurring schedules, tiered variations, and priority support.

---

📚 Next Steps

Now that you've mastered custom sale badges, explore other visual promotional tools and pricing rules:

• Display Percentage Badges — Show dynamic "Save 25%" calculation badges on sale items.
• Add Countdown Timer — Add countdown clocks to product pages to boost flash sale conversions.
• Display Quantity Table — Show clear bulk pricing tables for volume discounts.
• Create Storewide Sale Prices — Configure the pricing rules that trigger your sale badges.
• Create Targeted Product Discounts — Apply discounts and badges to specific products or categories.

---

🔍 SEO Keywords

Primary Keywords: sale badge WooCommerce, custom product badge WooCommerce, WooCommerce sale badge, product label WooCommerce, WooCommerce badge plugin, add sale badge WooCommerce

Secondary Keywords: custom sale badge, product badges WooCommerce, WooCommerce discount badge, WooCommerce sale label, custom product labels, flash sale badge, best seller badge, new arrival badge, WooCommerce badge manager, free WooCommerce badge plugin, Sale Booster WooCommerce, Discount Rules and Dynamic Pricing plugin