# Product Badges From Product Tags

> Turns chosen product tags into coloured badges on product images, so tagging a product "vegan" or "limited" instantly shows a matching label.

- Type: PHP
- Runs: Run everywhere
- Category: [WooCommerce](https://wpide.com/library/category/woocommerce/)
- Requires: WooCommerce
- Tags: woocommerce, badges, tags, catalog
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/woo-tag-based-badges/

## Code

```php
$wpide_tag_badges = array( // Tag slug => array( label, background colour ).
    'vegan'   => array( 'Vegan', '#15803d' ),
    'limited' => array( 'Limited edition', '#9a3412' ),
    'eco'     => array( 'Eco friendly', '#0f766e' ),
);

$wpide_tag_badges_html = function () use ( $wpide_tag_badges ) {
    global $product;

    if ( ! $product instanceof WC_Product ) {
        return;
    }

    $slugs = wp_list_pluck( get_the_terms( $product->get_id(), 'product_tag' ) ?: array(), 'slug' );
    $html  = '';

    foreach ( $wpide_tag_badges as $slug => $badge ) {
        if ( in_array( $slug, $slugs, true ) ) {
            $html .= sprintf( '<span class="wpide-tag-badge" style="background:%s">%s</span>', esc_attr( $badge[1] ), esc_html( $badge[0] ) );
        }
    }

    if ( $html ) {
        echo '<div class="wpide-tag-badges">' . $html . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput -- Escaped above.
    }
};

add_action( 'woocommerce_before_shop_loop_item_title', $wpide_tag_badges_html, 9 );
add_action( 'woocommerce_before_single_product_summary', $wpide_tag_badges_html, 9 );

add_action( 'wp_head', function () {
    if ( is_woocommerce() ) {
        echo '<style>.woocommerce ul.products li.product,.woocommerce div.product{position:relative}.wpide-tag-badges{position:absolute;top:.5em;left:.5em;z-index:9;display:flex;flex-wrap:wrap;gap:4px}.wpide-tag-badge{padding:.2em .55em;border-radius:3px;color:#fff;font-size:.75em;font-weight:600;line-height:1.4}</style>';
    }
} );
```

## Notes

Map each tag slug to a label and colour; products with several mapped tags show several badges.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Product Badges From Product Tags" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/