How to Add Custom Product Badges in WooCommerce (Step-by-Step)

Want to make your WooCommerce products stand out? Custom product badges are a great way to highlight sales, new arrivals, and limited-time deals. They can boost conversions and grab customer attention instantly.

In this guide, we’ll show you two easy ways to add product badges in WooCommerce: using a plugin for full customization or adding simple code for a lightweight solution. No matter what you choose, we’ll walk you through every step.

Need expert help customizing your WooCommerce store? Request a quote today and let our team optimize your eCommerce experience.

What Are WooCommerce Product Badges?

Ever noticed those little “Sale” or “New” tags on online stores? That’s a product badge. These small but mighty visual cues help highlight products that are discounted or freshly added.

WooCommerce comes with a default sale badge, but it’s quite basic. You can’t change its design or choose where to place it. With custom badges, you control everything—from colors to placement to how they display.

Here’s why custom badges matter:

• Encourage impulse buys: A flashy “Limited Offer” badge can push a hesitant buyer to act fast.
• Highlight new arrivals: Customers love fresh products. Make them easy to spot.
• Showcase exclusive deals: Make VIP or seasonal discounts stand out.

Let’s explore two proven ways to add these badges to your WooCommerce store.

Option 1: Use YITH WooCommerce Badge Management (Best for Customization)

For maximum flexibility, a plugin is the way to go. We recommend YITH WooCommerce Badge Management. It lets you create unique badges, automate when they appear, and customize their design.

Step 1: Install the Plugin

• Go to the YITH website and purchase the plugin.
• Log in to your account and download the plugin file.
• In WordPress, go to Plugins » Add New and upload the file.
• Activate the plugin and enter your license key.

Step 2: Disable WooCommerce’s Default Sale Badge

To prevent overlap, disable the built-in sale badge:

• Go to YITH » Badge Management in WordPress.
• Click the ‘General Settings’ tab.
• Enable ‘Hide WooCommerce “On Sale” Badge’ and save.

Step 3: Create a Custom Badge

Now, design a badge that suits your store:

• Go to YITH » Badge Management » Badges.
• Click ‘Create Badge.’
• Choose a badge type: text, image, CSS, or discount-based.
• Customize its colors, placement, and animations.
• Click ‘Save Badge.’

Step 4: Assign Badges to Products

Next, tell WooCommerce where to display your badge:

• Go to the ‘Badge Rules’ tab.
• Click ‘Set Rule.’
• Choose how the badge appears: by category, sale status, shipping class, or individual products.
• Click ‘Save Rule.’

With YITH, badges can also show for specific customer groups, like VIP members or wholesale buyers. This helps personalize the shopping experience.

Want a fully customized WooCommerce store? Explore our WooCommerce services and let us handle the setup for you!

Option 2: Add Custom Code (Free & Lightweight)

Prefer a simple, no-plugin approach? Custom code is the way to go.

Step 1: Add PHP Code for Custom Badges

We’ll use the WPCode plugin to safely add custom snippets.

• Install and activate the WPCode plugin.
• Go to Code Snippets » Add New.
• Select ‘PHP Snippet’ and name it “Custom WooCommerce Badges.”
• Paste this code:

remove_action('woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10);
add_action('woocommerce_before_shop_loop_item_title', 'add_custom_product_badges', 10);

function add_custom_product_badges() {
    global $product;
    if ($product->is_on_sale()) {
        echo '<span class="product-badge sale-badge">' . round(( ( $product-&gt;get_regular_price() - $product-&gt;get_sale_price() ) / $product-&gt;get_regular_price() ) * 100) . '% OFF!</span>';
    }
}

Step 2: Style the Badges with CSS

Now, let’s make them look polished:

• Go to Code Snippets » Add New and choose ‘CSS Snippet.’
• Paste the following CSS:

.product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    font-weight: bold;
    padding: 5px 10px;
}

 

Click ‘Save Snippet,’ and you’re set! Now, your WooCommerce store will automatically show discount percentages without a plugin.

Enhance Your WooCommerce Store Today

Product badges make your store more visually appealing and help boost sales. Whether you prefer a feature-rich plugin or a lightweight code snippet, now you have the tools to implement them!

Need expert assistance setting up custom WooCommerce features? Contact us today, and let’s enhance your eCommerce store.

• Reduce Stripe Transaction fee – Improve your transaction fees with Stripe and our tips & tricks.
• Recover lost online sales – With our cart abandonment email setup, we can help you increase conversions in WooCommerce & recover those lost sales.