Learning how to add product badges in WooCommerce helps you make important product information visible before a shopper opens a product page. A simple “30% Off,” “New Arrival,” “Low Stock,” or “Free Shipping” label can help visitors understand an offer while they scan a WooCommerce shop or category page.
In this guide, you’ll learn how to add product badges in WooCommerce without custom theme code. We’ll start with the free version of Sale Badges and Product Labels for WooCommerce, then cover the Pro features that help when you need image badges, advanced targeting, countdown timers, notification bars, or store-feature tools.
Quick answer: install and activate the plugin, open Sale Booster in WordPress, create a badge, choose its design, assign a product condition, and save. The badge then appears on matching products in your shop or product pages.
Table of Contents
- How to Add Product Badges in WooCommerce: What You Need
- How to Add Product Badges in WooCommerce: Choose a Method
- How to Add Product Badges in WooCommerce: Install the Free Plugin
- How to Add Product Badges in WooCommerce: Create Your Badge
- Style and position your product badge
- How to Add Product Badges in WooCommerce: Target Products
- Add a dynamic percentage discount badge
- How to Add Product Badges in WooCommerce: Verify the Result
- How to Add Product Badges in WooCommerce with Pro
- Optional: add a badge with a shortcode
- Best Practices When You Add Product Badges in WooCommerce
- Free vs Pro: which version do you need?
- Frequently asked questions
- Next steps
How to Add Product Badges in WooCommerce: What You Need
A WooCommerce product badge is a visual label displayed on a product image or product card. It can communicate a promotion, product status, availability, or a useful buying detail without changing the product title.
Common examples include:
- Promotion: Sale, 20% Off, Black Friday, or Clearance.
- Availability: Sold Out, Back in Stock, Limited Stock, or Pre-Order.
- Merchandising: New Arrival, Best Seller, Featured, or Staff Pick.
- Service information: Free Shipping, Handmade, or Secure Payment.
- Urgency: a countdown timer for a genuine limited-time offer.
WooCommerce includes a default “Sale!” indicator for sale-priced products, but it does not provide a complete visual badge system for every use case. A badge plugin adds reusable designs, targeting rules, placement controls, and—depending on the version—timers and campaign bars.
How to Add Product Badges in WooCommerce: Choose a Method
| Method | Best for | What you get |
|---|---|---|
| Custom code | Developers with a very specific theme workflow | Maximum control, but you maintain the PHP/CSS and compatibility yourself |
| Free plugin | Most stores adding text, CSS, or basic automatic labels | Visual badge creation, live preview, product/category/tag rules, sale and stock conditions, scheduling, and shortcode support |
| Pro plugin | Campaigns and advanced merchandising | Image and modern badge libraries, advanced customer/product rules, countdowns, notification bars, popups, embeds, Quick View, and Sticky Add to Cart |
For most store owners, the free plugin is the simplest way to learn how to add product badges in WooCommerce and replace a plain sale indicator with a consistent badge system. You can upgrade later when your campaigns need features that are not part of the free version.
How to Add Product Badges in WooCommerce: Install the Free Plugin
Before you begin, make sure WooCommerce is installed and active. The plugin requires WooCommerce because its display rules read product, sale, stock, category, and tag data from your store.
- In WordPress, go to Plugins → Add New.
- Search for Sale Badges and Product Labels for WooCommerce.
- Click Install Now, then Activate.
- Open Sale Booster from the WordPress admin menu.
You can also download the plugin from the WordPress.org plugin directory. Keep WooCommerce active while configuring the badges so the product selector and conditions can load correctly.
How to Add Product Badges in WooCommerce: Create Your Badge
From Sale Booster, open the badges screen and choose Add New. Give the badge an internal name that describes its purpose, such as “Summer Sale,” “New Arrival,” or “Free Shipping.” Turn on its status when you are ready to preview it.
Use a name that will still make sense when your badge library grows. The internal name is for administration; the customer-facing label is configured in the badge design settings.
Choose a badge type
The free version includes flexible CSS labels and a basic fixed-date countdown. Start with a CSS label when you want short text that adapts cleanly to your theme. The screenshots also show Pro options; use the feature labels below to choose the right method.
- CSS label: a text-based badge with selectable shapes, colors, typography, position, and effects.
- Image label: an uploaded or library image, available in Pro.
- Modern or advanced label: preset visual treatments and deeper style controls, available in Pro.
- Countdown timer: a basic fixed-date timer is included in Free; additional designs and evergreen timers are available in Pro.
Enter customer-facing text such as New, Best Seller, or {saved_percent} OFF when the dynamic discount placeholder is available in your editor. Dynamic placeholders are useful because the displayed discount can follow the product’s current pricing instead of requiring a separate badge for every percentage.
For the example below, name the badge Badge-New and choose New Arrival under Quick Badges. In CSS Labels, keep the label text short, select On Image, and choose a tag shape. Enable Display on Archive Page and Display on Product Page if you want both locations.
Style and position your product badge
Use the live preview while you choose the shape, color, font size, weight, opacity, rotation, and position. The goal is to make the badge noticeable without hiding the product image, price, or product title.
Useful placement choices include top-left, top-right, bottom-left, and bottom-right. If the label overlaps a theme’s sale indicator, either move the new label or enable the option to hide the default WooCommerce on-sale badge. You can also adjust the hook or display position when a theme places product images in an unusual markup structure.
Keep the text short. “30% Off” is easier to scan than a sentence, while “Free Shipping” is usually clearer than a small icon with no explanation. On mobile, test the smallest product card in your grid; a badge that looks balanced on desktop can cover too much of the image on a narrow screen.
The screenshot uses a 14-pixel font, 30-pixel line height, font weight 600, and a 100-by-30-pixel badge. Treat these as a starting point: adjust the archive and product page styles separately, then check that the full label fits. Select Top and Left to place it in the upper-left corner.
How to Add Product Badges in WooCommerce: Target Products
A badge becomes useful when it appears on the right products automatically. In the Products & Conditions area, choose the condition that matches your campaign.
- Specific products: show the badge on a hand-picked set of products.
- Category: target every product in a category such as Shoes or Summer Collection.
- Tag: target products marked with a WooCommerce tag.
- On sale: apply a sale label to products with an active sale price.
- Stock status: show In Stock, Out of Stock, or Backorder labels.
- All products: use a store-wide message when the same label belongs everywhere.
Use the narrowest condition that fits the message. A “Clearance” badge should not appear on every product just because the store has one clearance category. If you combine multiple rules, review the result on both a shop archive and a single product page.
Example: automatically label new arrivals (Pro)
For a New Arrival badge, set Stock status → In stock. Click And in the same group, then choose Recently Added → Days → 7. This Pro rule shows the badge only when both conditions match. Click Save.
Keep these rules in one AND group. Putting them in separate OR groups would also label older products simply because they are in stock. In the free version, select your new products manually or use a dedicated product tag instead.
For more examples, see the WooCommerce badge conditions documentation.
Add a dynamic percentage discount badge
Create a second badge named Badge-Saved-Percent. Choose a percentage-off template, open CSS Labels, and enter {saved_percent} OFF in the Label field. The placeholder includes the percent sign, so you do not need to add another one. For example, a product reduced from $100 to $80 displays 20% OFF.
Choose a clear background and text color. If the label needs more separation from the product photo, set Shadow Color to black and Shadow to 2. Keep animation off when a static badge communicates the offer clearly.
Next, open Products & Conditions and select Is on sale → Yes. Click Save. This targets discounted products instead of applying a discount claim to your entire catalog. Check products with different discounts and at least one product that is not on sale.
How to Add Product Badges in WooCommerce: Verify the Result
Save the badge, then open a shop or category page that contains a matching product. Check the result at desktop and mobile widths. Also open a single product page if you want the badge there too.
If the badge does not appear, check these items first:
- The badge status is enabled.
- The product actually matches the selected condition.
- The badge is configured to show in the location you are viewing.
- Your theme has not moved or replaced the WooCommerce product-image hook.
- A cache or optimization plugin is serving an older page.
- The badge is not hidden by the global settings or a mobile-only rule.
How to Add Product Badges in WooCommerce with Pro
The Pro version is useful when a text label is not enough for your promotion. It adds a library of image labels, modern badge presets, advanced conditions, and campaign elements that work across product pages and the wider store.
Use image and modern badges
Choose from more than 200 image-label designs, upload your own artwork, or use modern gradient and preset badge styles. Image labels are a good fit for seasonal campaigns, “Black Friday,” “Pre-Order,” and other messages where the visual treatment matters as much as the words.
Target by customer or product data
Pro conditions can target user login status, user roles, total customer spend, quantity, regular price, sale price, total price, shipping class, best sellers, recently added products, and other product attributes. These rules let you show a VIP message to logged-in customers, a volume message to products above a quantity threshold, or a best-seller label without maintaining a manual product list.
Add a product countdown badge
A countdown badge can show the remaining time for a genuine limited-time offer. Free includes a basic fixed-date timer. Pro adds more timer designs and evergreen modes; the progress-bar design shown below is a Pro example.
Open the badge’s Countdown tab, choose On Image, and select a timer style. Set Countdown Timer Mode to Pick A Start / End Date, then enter your own campaign’s start and end times. The dates in this screenshot are examples.
To reproduce the layout, choose Bottom and Bar, then adjust the background, text, and progress colors. Set matching product rules and save the badge. A timer communicates the deadline; also schedule the actual WooCommerce sale to end when promised.
Use notification bars for store-wide campaigns
Pro also includes notification bars for announcements, actions, countdowns, free shipping, and other campaign messages. These are separate from the product countdown badge shown above. Open Sale Booster → Notification Bars to create a store-wide message, then choose its content, timing, and display rules.
For more examples, see the WooCommerce sales countdown timer guide.
Optional: add a badge with a shortcode
If your theme or page builder needs a manual placement, the plugin provides the [asnp_badge] shortcode. Use [asnp_badge] for the current product context, or use [asnp_badge product_id="7"] when you need to render the badge for a specific product. The hide="1" option can be used for product-page placement.
Shortcodes are best used when you understand the page layout. For normal shop grids and product templates, automatic placement is usually easier to maintain because the badge follows your WooCommerce product output.
Best Practices When You Add Product Badges in WooCommerce
- Use one clear message per badge. Do not combine “New,” “Sale,” “Limited,” and “Free Shipping” into one tiny label.
- Match the rule to the claim. Only show scarcity or deadline language when the offer or inventory really is limited.
- Keep a consistent color system. Reserve one accent for discounts, one for availability, and one for shipping or service information.
- Test product-image contrast. A white badge can disappear on light product photography; use the live preview with representative products.
- Check mobile layouts. Make sure the label does not hide the product image or cover a variation selector.
- Schedule campaign badges. Add start and end dates for seasonal promotions so expired labels do not remain visible.
- Pair badges with a useful landing page. A “Summer Sale” badge should lead to a page where shoppers can browse the matching products.
Free vs Pro: which version do you need?
Choose the free version if you need custom CSS labels, basic product/category/tag/sale/stock rules, scheduling, positioning controls, and a no-code way to improve your WooCommerce product cards.
Choose Pro if you need image-label libraries, modern presets, advanced user and price conditions, product image highlights, countdown timer templates, notification bars, sales popups, embeds, Quick View, or Sticky Add to Cart. The free plugin and Pro extension are designed to work together, so you can begin with a small badge system and add campaign features as your store grows.
See the Pro features and upgrade options →
Frequently asked questions
Can I add product badges in WooCommerce without coding?
Yes. Install Sale Badges and Product Labels for WooCommerce, create a badge in Sale Booster, choose a condition, and save. The plugin handles the front-end placement for standard WooCommerce layouts.
Can I show a badge only on sale products?
Yes. Choose the on-sale condition so the label is applied to products with an active sale price. The badge can be removed automatically when the product no longer matches the rule.
Can I replace the default WooCommerce “Sale!” badge?
Yes. Create a custom sale label and use the plugin setting that hides the default WooCommerce on-sale badge. Check the result in both the shop loop and the single product layout.
Can I show different badges by category?
Yes. Create separate badges or rules and target each WooCommerce category. This is useful for messages such as “New Season,” “Clearance,” or “Free Shipping” that apply to different product groups.
Why is my badge not showing?
Confirm that the badge is active, the product matches its condition, the display location is enabled, and caching is cleared. If the theme changes the standard WooCommerce product-image markup, use the plugin’s hook or compatibility settings and test again.
Related tutorials: WooCommerce sale badge guide, product labels guide, and sales countdown timer guide.
Next steps
You now have a complete no-code workflow for how to add product badges in WooCommerce: install the plugin, create a reusable design, target the right products, verify the storefront, and add Pro campaign features only when you need them.
Start with one focused badge—such as a percentage-off label for sale products—then add category rules, scheduling, and a countdown bar for your next real promotion. For deeper setup details, continue with the badge installation documentation and the badge management guide.
