"Featured" Badge on Featured Products
Shows a "Featured" or "Staff pick" badge on the image of products you have starred as featured, in the shop and on product pages.
Opens WPIDE on
Code
$wpide_featured_badge = array(
'text' => 'Staff pick',
'background' => '#1e3a8a',
'color' => '#ffffff',
);
$wpide_featured_badge_html = function () use ( $wpide_featured_badge ) {
global $product;
if ( $product instanceof WC_Product && $product->is_featured() ) {
printf( '<span class="wpide-featured-badge">%s</span>', esc_html( $wpide_featured_badge['text'] ) );
}
};
add_action( 'woocommerce_before_shop_loop_item_title', $wpide_featured_badge_html, 9 );
add_action( 'woocommerce_before_single_product_summary', $wpide_featured_badge_html, 9 );
add_action( 'wp_head', function () use ( $wpide_featured_badge ) {
if ( ! is_woocommerce() ) {
return;
}
printf(
'<style>.woocommerce ul.products li.product,.woocommerce div.product{position:relative}.wpide-featured-badge{position:absolute;top:.5em;right:.5em;z-index:9;padding:.25em .6em;border-radius:3px;font-size:.8em;font-weight:600;line-height:1.4;background:%s;color:%s}</style>',
esc_attr( $wpide_featured_badge['background'] ),
esc_attr( $wpide_featured_badge['color'] )
);
} );Notes
Star products in Products > All Products to feature them, and change the badge text and colours at the top.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.