How to Add Custom Badges to WooCommerce Products (2026 Guide)

Product badges are small labels displayed on product images — like “Sale”, “New”, or “Low Stock”. They grab attention and help customers find what matters.

Studies show product badges can increase click-through rates by 15-25% and conversion rates by 10-18%. Yet WooCommerce only includes a basic “Sale!” badge out of the box.

In this guide, we’ll cover 3 ways to add custom badges to your WooCommerce store:

Method 1: Free Plugin (Easiest)

The fastest way to add product badges is with a free plugin. Product Badges for WooCommerce (by CartEngine) gives you:

2 modern badge templates (Sale, New)
Automatic rules (category, price, stock, date, on-sale)
CSS-only rendering (no frontend JavaScript)
Works with any WooCommerce theme

Step-by-step:

Install “Product Badges for WooCommerce” from WordPress.org
Go to WooCommerce → Badges → Add Badge
Choose a template (Sale or New)
Set a rule (e.g., “On Sale” or “Published in last 14 days”)
Save — badges appear instantly

The plugin handles positioning, theme compatibility, and caching automatically. It works with block themes (Twenty Twenty-Five) and classic themes (Astra, OceanWP, etc.).

Need more? BadgePro adds 5 templates, manual assignment per product, and unlimited badges.

Method 2: Custom CSS (Code Approach)

If you prefer code, you can add badges with CSS using WooCommerce’s built-in hooks.

Add this to your theme’s functions.php:

add_action('woocommerce_before_shop_loop_item_title', function() {
    global $product;
    
    // Show "NEW" badge for products published in last 30 days
    $created = $product->get_date_created();
    if ($created) {
        $days_old = (time() - $created->getTimestamp()) / DAY_IN_SECONDS;
        if ($days_old <= 30) {
            echo '<span class="custom-badge new-badge">NEW</span>';
        }
    }
}, 10);

Add matching CSS:

.custom-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
}

.new-badge {
    background: linear-gradient(135deg, #4ade80, #22c55e);
}

li.product {
    position: relative;
}

Pros: No plugin dependency, full control. Cons: Doesn’t work with block themes, no admin UI, requires code changes for each badge type.

Method 3: WooCommerce Block Patterns

If you’re using a block theme, you can create custom product grids with badge-like elements using WooCommerce Blocks:

Edit your Shop page
Add a “Product Collection” block
Filter by “On Sale” or specific categories
Add a heading above: “On Sale Now”

This isn’t a true badge (it doesn’t overlay the image), but it’s a native way to highlight products without any plugins or code.

Which Method Should You Choose?

Method	Difficulty	Block Themes	Classic Themes	Custom Rules
Free Plugin	Easy	Yes	Yes	Yes
Custom CSS	Medium	No	Yes	Manual
Block Patterns	Easy	Yes	No	Limited

Our recommendation: Start with the free plugin. It takes 2 minutes to set up and works everywhere. If you need more control, consider the Pro version or custom CSS.

Badge Best Practices

Don’t overuse badges — If every product has a badge, none stand out
Use clear, short text — “SALE”, “NEW”, “-30%” work better than long phrases
Limit to 1 badge per product — Multiple badges create visual clutter
Match your brand colors — Or use high-contrast colors for attention
Test on mobile — Make sure badges don’t obscure important product info

Conclusion

Product badges are one of the simplest ways to increase engagement in your WooCommerce store. Whether you use a free plugin, custom code, or block patterns, the key is making important products stand out.