Colored WooCommerce Product Categories & Tags (FSE Compatible)

With FSE (block themes), you can’t rely on traditional template overrides the same way as with classic themes. This solution hooks into block rendering, ensuring that no matter how the theme outputs content (Core blocks or WooCommerce blocks), your term labels always receive the correct classes and optional color styles.

What it does

• Adds text color and background color fields to:
  • WooCommerce product categories (product_cat)
  • WooCommerce product tags (product_tag)
• Applies colors automatically when terms are rendered in block-based layouts
• Injects semantic CSS classes into term links
• Optionally outputs inline style attributes for immediate visual styling
• Fully compatible with Gutenberg, WooCommerce blocks, and Full Site Editing (FSE)

When to use

• You want visually distinct category or tag labels on product lists or product pages
• You are using a block theme or FSE
• You want color-coded product metadata without template overrides
• You need a reusable, taxonomy-based styling system

Output

Each rendered term link receives:

CSS classes

• woo-term-label
• woo-term-label--product_cat or woo-term-label--product_tag
• woo-term-label--{term-slug}

Optional inline styles

• color
• background-color

Example output

<a class="woo-term-label woo-term-label--product_cat woo-term-label--summer"
   style="color:#ffffff;background-color:#ff6b6b;">
   Summer
</a>

Notes

• Colors are optional — if not set, only the CSS classes are added
• Styling can be handled via inline styles, theme CSS, or both
• Works in product loops, single product pages, and block-based templates
• No WooCommerce template overrides required
• Safe for block themes and classic themes alike