How to Add Product Badges in WooCommerce
Last updated: July 2026
Quick Answer
The fastest way to add product badges in WooCommerce is to install a dedicated badge plugin, create a rule that targets specific products or categories, and choose a badge style (ribbon, corner, pill, or starburst). If you would rather avoid another plugin, you can add a lightweight custom field and a few lines of CSS to your theme’s product loop template. Both approaches work well for a sale badge woocommerce setup or a permanent “Made in Canada” label.
Prerequisites
- Admin access to your WordPress dashboard
- WooCommerce active and at least one published product
- A staging copy of your site if you plan to edit theme files directly
- 5-10 minutes per method to test on desktop and mobile
Step 1: Decide Where Badges Should Appear
Before picking a tool, map out where the badge needs to show up: the shop grid, the single product page, or both. A new product label WooCommerce store owners use on category pages often looks cluttered on the single product view, so many stores restrict badges to the shop and category archives only.
1.1 List your badge types
Canada Create readers often ask which badge types matter most: common ones include Sale, New, Bestseller, Low Stock, and Made in Canada. Keep the list short. Three or four badge types are easier to scan than eight competing labels on the same thumbnail.
1.2 Pick a visual style
Ribbon badges sit diagonally across a corner, pill badges are rounded rectangles near the image, and starburst badges work well for percentage-off callouts. Whatever you choose, keep the same shape across the catalog for consistency.
Step 2: Install a Badge Plugin (No-Code Route)
For most stores, a plugin is the quickest path to custom product badge functionality without editing template files, similar to the setup we recommend in our e-commerce website services in Downtown Toronto.
2.1 Choose a plugin
Search the WordPress plugin directory for a WooCommerce badge or discount rules plugin that includes badge styling. Look for one that is actively maintained, has recent WooCommerce version compatibility listed, and includes a free tier that covers basic badge shapes.
2.2 Create a badge rule
Inside the plugin, create a new rule and set the condition: a specific product, a category, or “all products.” If you only want a badge with no actual discount, set the discount value to 0% and use the rule purely to trigger the badge.
2.3 Style the badge
Choose a shape, set the badge text (for example “New” or “20% Off”), and pick colors that match your brand rather than the plugin’s default red and yellow. Position the badge top-left or top-right depending on where your product images have breathing room.
2.4 Preview and publish
Most plugins show a live preview of how the badge will look on the shop grid before you save. Check it on a mobile viewport too, since woocommerce ribbon tags that look fine on desktop sometimes overflow smaller product cards.
Step 3: Add a Badge with Custom CSS (Code Route)
If you would rather skip another plugin, you can add a badge using a custom field and a short CSS snippet in your child theme.
3.1 Add a custom field to the product
Use a custom field or a simple taxonomy term (like a product tag named “bestseller”) to flag which products should show the badge.
3.2 Add a conditional badge span
In your theme’s product loop template, wrap a small span with the badge text inside a conditional check for that tag or field, then style it with absolute positioning over the product thumbnail container.
3.3 Test across templates
At Canada Create, we always check the shop page, category pages, related products section, and any custom product carousels on your homepage. It is easy to style one template and forget the others, a mistake we also flag in our guide on what to plan before building an e-commerce website.
Troubleshooting
- Badge not showing on the shop page: Clear any page caching and object caching plugins, since badge rules are often cached along with product HTML, a common culprit we cover in what actually slows down a WordPress site on shared hosting.
- Badge overlaps the “Sale” ribbon WooCommerce already shows: Either hide the default WooCommerce sale flash with a CSS rule or reposition your custom badge to a different corner.
- Badge looks fine on desktop but breaks on mobile: Use percentage-based font sizing and test at common breakpoints (375px and 414px wide) rather than relying only on desktop preview, following web.dev responsive design guidance.
- Badge disappears after a theme update: This usually means you edited a parent theme file directly. Move the change into a child theme or a custom CSS panel instead, following the same approach outlined in how to secure your WordPress website.
Frequently Asked Questions
Do I need a plugin to add product badges in WooCommerce?
No. A plugin is the fastest route for most non-developers, but a small CSS and custom field combination works just as well if you are comfortable editing a child theme.
Will badges slow down my WooCommerce store?
A well-built badge plugin adds negligible load time. Watch for plugins that load a large asset library site-wide instead of only on shop pages, since that is a more common performance drag than the badge itself, as Canada Create readers often discover when auditing managed WordPress hosting performance.
Can I show different badges for different customer segments?
Some badge plugins support conditional logic based on cart contents or customer role, but most Canadian small business stores stick to simple product or category-based rules, since segment-based badges add setup complexity without much added conversion lift.
What is the best badge shape for a sale badge in WooCommerce?
Starburst and ribbon shapes tend to draw the eye fastest for percentage-off sales, while a simple pill badge reads cleaner for “New” or “Bestseller” labels that are not price related.
Should badges appear on the single product page too?
Yes, if the badge communicates something the buyer needs at decision time, like limited stock. Purely decorative “New” badges are often better limited to the shop grid so the product page stays focused on the buy button, a conversion principle our Toronto e-commerce web design team applies across client stores.
