How to Add WooCommerce Product Badges

🔔 As a reader-supported site, Able Rabbit may earn a small commission when you purchase through affiliate links on this article — at no extra cost to you.

✅ Reviewed by a Senior WooCommerce Specialist · Last fact-checked 19 November 2025.

Introduction to WooCommerce Product Badges

Adding custom badges on WooCommerce product thumbnails is a common and powerful way to attract shopper attention and increase click-through rates (CTR), leading to higher conversions.

With a solid background in WooCommerce development, leveraging hooks and template overrides, it is possible to implement lightweight, code-based custom badges that maintain site performance and UX integrity.

With carefully crafted code snippets you can have unmatched control, flexibility, and scalability, enabling a developer-focused approach to display badges such as “New Arrival,” “Best Seller,” or urgency indicators like low stock.

Plugins serve a great purpose when non-developers need a fast, visual UI or predefined badge templates, and complex business requirements, but nothing beats custom code for optimization, tailored UX, and behavior.

This article details exactly how to add these badges using WooCommerce hooks complemented by CSS customization to ensure a seamless integration into your theme.

Why Add Custom Badges on WooCommerce Product Thumbnails

Custom badges play a crucial role in UX (user experience) and CRO (conversion rate optimization) by grabbing users’ attention quickly, especially in crowded product listings.

Behavioral studies show that visual cues such as badges help users scan and identify important product attributes, boosting their purchasing confidence and urgency.

Badges help highlight product status (newness, sale, bestseller), which guides shopping decisions and improves aisle effectiveness on your site.

Strategically placed badges on thumbnails tap into scanning patterns, making the shopping experience quicker and more persuasive

Let us now look at some of the options to add custom badges in WooCommerce products without plugins.

WooCommerce Badge Code Snippets: How to Add Custom Badges

1. Simple Universal Badge for WooCommerce Products

php

// Hook used: woocommerce_before_shop_loop_item_title
// What it does: Adds a static "Custom Badge" to every product in the shop loop.
// When to use it: When you want one universal badge on all product thumbnails.
// Output behavior: Displays a uniform badge above the product thumbnail image.

add_action('woocommerce_before_shop_loop_item_title', 'add_universal_badge', 10);

function add_universal_badge() {
    echo '<span class="custom-badge universal-badge">Custom Badge</span>';
}

Explanation: This snippet hooks into the product loop just before the product thumbnail and adds a badge universally. It’s best for store-wide promotions or single badge campaigns. The badge’s text and style can be customized via CSS.

2. New Arrival Badge for WooCommerce Products

php

// Hook used: woocommerce_before_shop_loop_item_title
// What it does: Adds a "New Arrival" badge on products published within the last 30 days.
// When to use it: To highlight recently added products automatically.
// Output behavior: Badge appears only on new products based on publish date.

add_action('woocommerce_before_shop_loop_item_title', 'add_new_arrival_badge', 10);

function add_new_arrival_badge() {
    global $product;
    $newness_days = 30;
    $product_date = strtotime($product->get_date_created());
    $current_date = time();
    if (($current_date - $product_date) < (60 * 60 * 24 * $newness_days)) {
        echo '<span class="custom-badge new-arrival">New Arrival</span>';
    }
}

Explanation: This snippet dynamically checks the product creation date and shows a “New Arrival” badge if the product is fresh within 30 days. This automates highlighting new stock without manual edits.

3. Low Stock Badge for WooCommerce Products

php

// Hook used: woocommerce_before_shop_loop_item_title
// What it does: Displays a “Low Stock” badge when product stock quantity is below threshold.
// When to use it: To create urgency on products with limited availability.
// Output behavior: Badge appears only for products with low stock (<5).

add_action('woocommerce_before_shop_loop_item_title', 'add_low_stock_badge', 10);

function add_low_stock_badge() {
    global $product;
    $low_stock_threshold = 5;
    if ($product->is_in_stock() && $product->get_stock_quantity() > 0 && $product->get_stock_quantity() <= $low_stock_threshold) {
        echo '<span class="custom-badge low-stock">Low Stock</span>';
    }
}

Explanation: This badge leverages WooCommerce stock management to signal scarcity, which drives quicker buying decisions from customers.

4. Best Seller Badge for WooCommerce Products

php

// Hook used: woocommerce_before_shop_loop_item_title
// What it does: Adds a badge based on product tag "best-seller".
// When to use it: To highlight products tagged as “Best Seller” in WooCommerce tags.
// Output behavior: Badge only appears on products with that specific tag.

add_action('woocommerce_before_shop_loop_item_title', 'add_tag_based_badge', 10);

function add_tag_based_badge() {
    global $product;
    if (has_term('best-seller', 'product_tag', $product->get_id())) {
        echo '<span class="custom-badge best-seller">Best Seller</span>';
    }
}

Explanation: This snippet shows badges for products tagged “best-seller,” ideal for stores using tags as product markers to highlight popularity.

5. Advanced Multiple Badges for WooCommerce Products

php

// Hook used: woocommerce_before_shop_loop_item_title
// What it does: Combines previous logic to show multiple badges on the same product thumbnail.
// When to use it: When you want to layer badges based on conditions (new, low stock, tag).
// Output behavior: Multiple badges may appear stacked or side by side.

add_action('woocommerce_before_shop_loop_item_title', 'add_multiple_badges', 10);

function add_multiple_badges() {
    global $product;
    // New Arrival badge
    $newness_days = 30;
    $product_date = strtotime($product->get_date_created());
    $current_date = time();

    if (($current_date - $product_date) < (60 * 60 * 24 * $newness_days)) {
        echo '<span class="custom-badge new-arrival">New Arrival</span>';
    }

    // Low Stock badge

    $low_stock_threshold = 5;
    if ($product->is_in_stock() && $product->get_stock_quantity() > 0 && $product->get_stock_quantity() <= $low_stock_threshold) {
        echo '<span class="custom-badge low-stock">Low Stock</span>';
    }

    // Best Seller badge by tag

    if (has_term('best-seller', 'product_tag', $product->get_id())) {
        echo '<span class="custom-badge best-seller">Best Seller</span>';
   }
}

Explanation: This advanced snippet merges conditional badge logic to provide flexible, composite marketing cues, all integrated under the same WooCommerce hook.

6. Custom Field Badge Using ACF in WooCommerce

php

// Hook used: woocommerce_before_shop_loop_item_title
// What it does: Shows a badge based on a custom meta field (e.g., ACF field 'custom_badge').
// When to use it: To show a fully customizable badge per product via a meta field.
// Output behavior: Badge text/content is pulled dynamically from product meta.

add_action('woocommerce_before_shop_loop_item_title', 'add_custom_field_badge', 10);

function add_custom_field_badge() {
   global $product;
    $badge_text = get_post_meta($product->get_id(), 'custom_badge', true);
    if (!empty($badge_text)) {
        echo '<span class="custom-badge custom-field">' . esc_html($badge_text) . '</span>';
    }
}

Explanation: For high flexibility, store managers can add unique badge content per product using Advanced Custom Fields or any meta entry without code changes.

CSS Styling for WooCommerce Product Badges

css

.custom-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #D35400; /* Primary orange */
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 10;
    text-transform: uppercase;
    pointer-events: none;
}

.custom-badge.new-arrival { background-color: #27ae60; }
.custom-badge.low-stock { background-color: #e74c3c; }
.custom-badge.best-seller { background-color: #8e44ad; }
.custom-badge.custom-field { background-color: #2980b9; }
/* Make sure the product thumbnail container is position: relative */

ul.products li.product {
    position: relative;
}

Explanation: This CSS styles badges consistently and positions them visibly on the product thumbnails. Colors should be chosen to suit branding and UX contrast best practices.

WooCommerce Badge Code Snippets vs Plugins: Which Is Better?

Code snippets excel in performance and fine-tuned control, especially for stores with a developer managing custom UX.

Plugins are ideal for quick deployments or for users without coding experience who want rich features out of the box.

Recommended WooCommerce Badge Plugin

While it is possible to add WooCommerce product badges without plugin, for those preferring a robust and non-coding solution – we recommend YITH WooCommerce Badge Management.

Read our detailed YITH WooCommerce Badge Management Review

It offers a polished interface with ready-made badge templates and advanced conditional display rules. Its visual UI allows store managers to create and schedule badges without touching code, perfect for non-developers or marketers wanting fast badge implementation.

Moreover, this WooCommerce product badge plugin supports various badge types, positioning, and even image badges, balancing ease of use with flexibility. While it won’t match the fine-tuned control of custom code, it is a solid, performance-conscious choice for most WooCommerce shops.

WooCommerce Product Badges FAQs

WooCommerce Badge Positioning: How to Move the Badge

Badge position is controlled by CSS. Adjust the .custom-badge positioning properties (top, left, right, bottom) to move badges anywhere on the thumbnail.

Adding Multiple WooCommerce Badges on a Product

Yes, by combining conditions within the same hook (see the “Multiple Badges Combined” snippet) you can display multiple badges simultaneously.

WooCommerce Badges Compatibility with Caching Plugins

Yes, but if your caching is aggressive, consider excluding product pages or refreshing the cache after badge condition changes to show current states.

WooCommerce Badge Code Updates Compatibility

Custom hooks used are standard WooCommerce hooks, stable in major versions. Always test on staging and backup before updates.

Single Product WooCommerce Badge Implementation

Yes, by changing the hook to one that fires on single product pages, such as woocommerce_single_product_summary.

Child Theme Requirement for WooCommerce Badges

You can use a child theme or a code snippet plugin to avoid losing your changes on theme updates.

Custom Styling WooCommerce Badges Per Productoduct?

Yes, use custom meta fields (e.g., via ACF) and conditionally adjust badge content and CSS classes accordingly.

This comprehensive guide provides you with multiple flexible code snippets, practical explanations, and considerations for implementing custom badges effectively in WooCommerce, tailored for developers seeking performance and control while offering alternatives for non-technical users.