WooCommerce displays basic product labels like “Sale” by default. However, many store owners want to highlight additional product attributes such as “New Arrival”, “Low Stock”, or “Bestseller” to attract attention and improve conversions.

In this tutorial, we’ll show you how to add custom product badges using code, without relying on extra plugins.

Why Use Custom Product Badges?

Custom badges help shoppers make faster buying decisions. For example:

• “New” lets customers know about fresh arrivals.
• “Low Stock” creates urgency.
• “Bestseller” builds trust and credibility.

These visual cues improve engagement and can increase your WooCommerce store’s conversion rate.

Step 1: Add the Badge Markup via Hook

Add the following snippet to your theme’s functions.php file or your custom plugin:

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

function custom_product_badges() {
    global $product;

    $product_id = $product->get_id();
    $post_date = get_the_date( 'U', $product_id );
    $days_since = ( current_time( 'timestamp' ) - $post_date ) / DAY_IN_SECONDS;

    if ( $days_since <= 15 ) {
        echo '<span class="product-badge new">New</span>';
    }

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

    if ( has_term( 'bestseller', 'product_tag', $product_id ) ) {
        echo '<span class="product-badge bestseller">Bestseller</span>';
    }
}

This code checks how old the product is, stock quantity, and whether it has the “bestseller” tag.

Step 2: Add CSS for Badge Styling

Paste the following CSS into your theme’s customizer or style.css file:

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 10;
}
.product-badge.low-stock { background: #ff9800; }
.product-badge.new { background: #2196f3; }
.product-badge.bestseller { background: #4caf50; }

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

Step 3 : Show Badges on Single Product Pages

To display badges on the product detail page, add this:

add_action( 'woocommerce_single_product_summary', 'custom_product_badges', 6 );

With just a few lines of code, you can enhance your WooCommerce store’s visual appeal and user experience by showing meaningful product badges. These are especially helpful for stores with frequently changing inventory or promotions.