WooCommerce: Add Custom Badge To Featured Products @ Shop Page

If you’ve ever wanted to customize how WooCommerce featured products appear on your classic product grid (Shop, Category, Tag, archive, search, shortcode pages) or Product Collection block, you’re in the right place!

For example, adding a custom label gives your featured products the attention they deserve and helps them stand out, catching the eye of your shoppers. Amazon does that, for example.

Whether you want to create a sleek, minimalist tag or a bold, colorful banner, a bit of custom code can transform your product display and enhance your store’s design.

In this guide, you’ll discover how to add a fully customizable label specifically for featured products in WooCommerce. With a simple CSS code snippet, you can take control of your shop’s visual identity. Read on to find the solution and start enhancing your store today!

CSS Snippet: Display “Staff Pick” Label On Featured Products @ Classic Shop or Product Collection Block

One thing you didn’t know, maybe, is that WooCommerce adds the “featured” CSS class to each list item that has been manually starred in the WordPress Dashboard. All we need is targeting that class in our custom CSS!

Note: this is CSS, not PHP. You should place this in your child theme’s style.css or under WP Dashboard > Appearance > Customize > Additional CSS.

/**
 * @snippet       Custom CSS Badge For WooCommerce Featured Products
 * @tutorial      Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 9
 * @community     https://businessbloomer.com/club/
 */

li.featured { 
   position: relative 
}

li.featured:before { 
   padding: 3px 8px; 
   text-align: center; 
   background: #222; 
   color: white; 
   font-weight: bold; 
   position: absolute; 
   top: 6px; 
   right: 6px; 
   font-size: 12px; 
   content: "Staff Pick"; 
   z-index: 10 
}

Here’s the explanation for the CSS:

1. li.featured:
   • This targets any <li> element with the class featured.
   • The position: relative; ensures that the pseudo-element :before is positioned relative to this <li> rather than the entire document.
2. li.featured:before:
   • This adds a pseudo-element before the content of the <li> with the class featured.
   • padding: 3px 8px;: Adds space inside the label for proper spacing around the text.
   • text-align: center;: Centers the text inside the label horizontally.
   • background: #222;: Sets a dark gray background color for the label.
   • color: white;: Sets the label text color to white for contrast against the background.
   • font-weight: bold;: Makes the text bold to stand out.
   • position: absolute;: Positions the label relative to the parent <li> element.
   • top: 6px; and right: 6px;: Places the label in the top-right corner of the <li> element, offset by 6px.
   • font-size: 12px;: Specifies the size of the text inside the label.
   • content: "Staff Pick";: The text displayed in the label. You can replace "Staff Pick" with any custom text.
   • z-index: 10;: Ensures the label appears on top of other overlapping elements.

This CSS creates a visually distinct badge for featured list items, perfect for highlighting special products or recommendations.