How to Create a Custom Product Badge for Best Sellers in WooCommerce – 2026

Highlighting best-selling products with a custom product badge can boost sales and draw attention to popular items in your WooCommerce store. These badges act as social proof, encouraging customers to explore products that others are purchasing.

In this guide, we’ll show you how to add a Best Seller Badge to WooCommerce product pages, shop pages, category pages, and tag pages — all without using a plugin.

Step 1: Define Which Products Are Best Sellers

To display a Best Seller Badge, we need to identify which products are best sellers. WooCommerce already tracks product sales, so we can query the top-selling products directly from the WooCommerce database.

Code to Define Best Sellers

Add this code to your theme’s functions.php file or your child theme:

/*
 * Snippet: How to Create a Custom Product Badge for Best Sellers in WooCommerce – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1781
 * Tested with WooCommerce 10.7.0
 * "This function fetches the best selling product IDs in WooCommerce"
*/
function wcsuccess_get_best_seller_ids( $limit = 10 ) {
    global $wpdb;

    $best_sellers = $wpdb->get_col( "
        SELECT ID FROM {$wpdb->posts} AS posts
        LEFT JOIN {$wpdb->postmeta} AS postmeta ON posts.ID = postmeta.post_id
        WHERE postmeta.meta_key = 'total_sales'
        AND posts.post_type = 'product'
        AND posts.post_status = 'publish'
        ORDER BY postmeta.meta_value+0 DESC
        LIMIT $limit
    " );

    return $best_sellers;
}

Explanation:

• SQL Query: This query retrieves the product IDs of the top 10 best-selling WooCommerce products.
• Dynamic Limit: Change the $limit to adjust how many best sellers are identified.

Step 2: Add a Custom Best Seller Badge

Now that we have a list of best sellers, we’ll display a badge for those products on the WooCommerce shop, category, tag, and product pages.

Code to Add the Best Seller Badge

Add this code to your functions.php file:

/*
 * Snippet: How to Create a Custom Product Badge for Best Sellers in WooCommerce – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1781
 * Tested with WooCommerce 10.7.0
 * "This function adds a custom best seller badge to products"
*/
function wcsuccess_add_best_seller_badge() {
    global $product;

    // Get the list of best sellers
    $best_seller_ids = wcsuccess_get_best_seller_ids( 10 ); // Get top 10 best sellers

    if ( in_array( $product->get_id(), $best_seller_ids ) ) {
        echo '<div class="best-seller-badge">Best Seller</div>';
    }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'wcsuccess_add_best_seller_badge', 10 );
add_action( 'woocommerce_before_single_product_summary', 'wcsuccess_add_best_seller_badge', 10 );

Explanation:

• Badge Display: Adds the Best Seller Badge on product pages and shop pages.
• Dynamic Check: Checks if the current product is in the best seller list and displays the badge if it is.
• Reusability: This code works on shop, category, tag, and product pages without modification.

Step 3: Style the Best Seller Badge

For a professional look, you’ll want to style the Best Seller Badge with CSS.

CSS to Style the Best Seller Badge

Add this CSS to your theme’s style.css file or the WordPress customiser:

.best-seller-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #f39c12; /* Gold background */
    color: #fff; /* White text */
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.product {
    position: relative; /* Ensure relative positioning for the badge */
}

Explanation:

• Custom Badge Style: Positions the badge at the top-left corner of the product image.
• Customisation: Change background colour, font size, and padding as needed.
• Responsive Design: Ensure the badge looks good on mobile devices by using percentage-based positions.

Step 4: Customise the Badge for Specific Pages

If you only want to display the badge on the shop page or category pages, you can limit where it appears.

Code to Show Badge on Shop Page Only

Replace the existing add_action() calls with this version:

if ( is_shop() ) {
    add_action( 'woocommerce_before_shop_loop_item_title', 'wcsuccess_add_best_seller_badge', 10 );
}

This will only display the badge on the shop page, not product or category pages.

Step 5: Optional – Customise Badge Text

Instead of just “Best Seller”, you might want a different message for the badge, like “Most Popular” or “Fan Favourite”.

Code to Customise Badge Text

Update this line of code:

echo '<div class="best-seller-badge">Fan Favourite</div>';

Or make it dynamic using a filter:

$badge_text = apply_filters( 'wcsuccess_best_seller_badge_text', 'Best Seller' );
echo '<div class="best-seller-badge">' . esc_html( $badge_text ) . '</div>';

Now, you can customise the text via a simple filter in functions.php:

add_filter( 'wcsuccess_best_seller_badge_text', function() {
    return 'Fan Favourite';
});

Example Workflow

1. Mark Best Sellers: WooCommerce automatically tracks product sales, so this script identifies the top 10 best-selling products.
2. Badge Placement: The badge is displayed on shop, category, tag, and product pages.
3. Style the Badge: Customise the design, background colour, font, and position of the badge.

Example Use Case

In this example, Product A and Product C will get the Best Seller Badge.

Troubleshooting

Badge Not Showing?

• Make sure the product has enough sales to be classified as a “best seller.”
• Check the $limit in wcsuccess_get_best_seller_ids() to see if the product is in the top 10.

Need to Reset Sales?

• Reset sales for testing by editing the product and changing the total sales in Product Data > Advanced > Total Sales.

Conclusion

Adding a Best Seller Badge to WooCommerce products increases visibility for high-performing products and encourages customers to buy what’s popular. This tactic works as social proof, creating a sense of trust and urgency.

Test these changes in a staging environment before applying them to your live store. For more WooCommerce customisation options, explore our WooCommerce Visual Hooks Guide or use our wp-config generator for advanced configurations.

John Cook

I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.

Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science.  I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.