June 19, 2023

Add a WooCommerce Featured Products Badge

Play Video

One way to highlight your top products is by adding a WooCommerce featured products badge. WP Simple Hacks will guide you through the process, which is surprisingly simple and can be done in just a few steps. This makes it easier for customers to identify your top products, ultimately increasing your sales chances. We will use Code Snippets to achieve this, and don’t worry if you’re not a coding expert – we’ll explain everything in a straightforward, easy-to-understand manner.

Tutorial Steps

  1. Install the Code Snippets Plugin
    Go to your WordPress dashboard, navigate to “Plugins > Add New”, and search for “Code Snippets”. Install and activate this plugin.
    Install the Code Snippets Plugin
  2. Add a New Snippet & Title
    In your WordPress dashboard, go to “Snippets > Add New”. Give your new snippet a title, such as “Featured Product Badge”.
    Add a New Snippet & Title
  3. Paste the Code
    Copy the code snippet provided below and paste it into the “Code” section of your new snippet. If you want to change the text that appears on the badge, modify the text within the quotation marks in the code.

    // Display featured product badge in Woocommerce archive page
    add_action( 'woocommerce_before_shop_loop_item_title', 'featured_badge_on_archive_pages', 10 );
    // add_action( 'blocksy:woocommerce:product-card:title:before', 'featured_badge_on_archive_pages', 1 );
    function featured_badge_on_archive_pages() {
        global $product;
        // Is a WC product
        if ( is_a( $product, 'WC_Product' ) ) {
            // Get productID
            $product_id = $product->get_id();
            // Returns an array containing the IDs of the featured products.
            $featured_product_ids = wc_get_featured_product_ids();
            // Checks if a value exists in an array
            if ( in_array( $product_id, $featured_product_ids ) ) {
                echo '<span class="featured-badge">Featured</span>';
    // Display featured product badge in Woocommerce single product page
    add_action( 'woocommerce_single_product_summary', 'featured_badge_on_product_pages', 1 );
    function featured_badge_on_product_pages() {
        global $product;
        // Is a WC product
        if ( is_a( $product, 'WC_Product' ) ) {
            // Get productID
            $product_id = $product->get_id();
            // Returns an array containing the IDs of the featured products.
            $featured_product_ids = wc_get_featured_product_ids();
            // Checks if a value exists in an array
            if ( in_array( $product_id, $featured_product_ids ) ) {
                echo '<span class="featured1">Featured</span>';

    Source: WP Simple Hacks

  4. Activate the Snippet
    Save your changes and activate the snippet. The “Featured” badge should now appear on your WooCommerce products.
  5. Customize the Badge
    If you want to change the appearance or position of the badge, you can do so by adding custom CSS in the “Additional CSS” section of the WordPress Customizer.
    Customize the Badge
    Custom CSS Code:

    /* Woocommerce featured product badge on archive pages */
    .featured-badge  {
        top: 20px;
        left: 0px;
        width: 100%;
        background: #1e1e1e99;
        color: #fff;
     display: flex;
      justify-content: center;
        position: absolute;
        z-index: 1;
            font-size: 13px;
        text-transform: uppercase;
        font-weight: 600;
    /* Woocommerce featured product badge in single product page */
    .featured1 {
        background: #fff000;
        color: #000;
        font-weight: 600;
        text-transform: uppercase;
        padding: 5px 10px;
      font-size: 12px;
        font-weight: 600;
    margin-top: 15px;
        float: right;

    Source: WP Simple Hacks

Why You Should Add a WooCommerce Featured Products Badge

Boost Your Store’s Visual Appeal
Adding a “Featured” badge to your WooCommerce products is more than just a functional step. It’s a design enhancement that can significantly boost the visual appeal of your online store. By marking certain products as “Featured”, you create a dynamic storefront that’s more engaging and interactive.

Direct Your Customers’ Attention
In the vast sea of products, it’s easy for customers to feel overwhelmed. A “Featured” badge acts as a beacon, guiding your customers towards products you want to highlight. This could be your best-sellers, new arrivals, or items on sale.

Increase Conversion Rates
By strategically featuring products, you can influence purchasing decisions and potentially increase your store’s conversion rates. It’s a subtle yet powerful way of marketing your products directly on your storefront.

Common Issues

  1. The “Featured” Badge Doesn’t Appear
    If you’ve followed the steps but the badge doesn’t show up, your theme might be overriding the default WooCommerce hooks. Additionally, if you are using WooCommerce hooks or the Elementor WooCommerce builder, these might overwrite the default settings. Contact your theme’s support for guidance.
  2. The Badge Appears but Looks Out of Place
    If the badge doesn’t look right (e.g., wrong position, clashes with your design), remember that you can customize it. Use the “Additional CSS” section in the WordPress Customizer to adjust the badge’s appearance.

Required Resources

WooCommerce Logo
Free Options
Code Snippets Logo
Free Options
Credit to WP Simple Hacks
WP Simple Hacks is a YouTube channel that focuses on delivering valuable and straightforward video tutorials for WordPress enthusiasts. The channel's creator, a seasoned WordPress expert, shares his knowledge and experience by covering various topics, such as theme customization, plugin usage, site optimization, and problem-solving techniques.
Add a WooCommerce Featured Products Badge
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.