Add a WooCommerce Featured Products Badge

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.
   
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”.
   
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.
   
   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.