---
title: Show WooCommerce product attributes as badges on the product page
description: WooCommerce puts attributes in a details tab. A plugin moves selected ones into a badge row on the product page, where they actually get read.
source: https://steem.dev/blog/woocommerce-product-attribute-badges
published: 2026-11-06
updated: 2026-11-06
site: Steem — AI WordPress plugin generator
---

# Show WooCommerce product attributes as badges on the product page

WooCommerce stores every attribute you define and can display all of them on the product page, but the default location is a table inside the Additional Information tab. That tab sits below the product description, below the add to cart form, and often below the fold. For attributes that influence a purchase decision, being inside a tab means being seen after the visitor has already decided whether to scroll.

A plugin that reads selected attributes and renders them as a row of badges in the product summary column moves that information into the visible area of the page. The settings screen chooses which attributes to show as badges and where they appear, so a difficulty rating surfaces next to the price while an internal reference code stays in the tab where it belongs.

## What one build covers

- Badge display for WooCommerce attributes registered in Products > Attributes
- Position setting: before or after the add-to-cart button in the summary column
- Settings panel to select which attributes show as badges, store-wide
- Skips variation attributes that already appear in the variation form

## What it does not cover

- Color-coding or icon mapping per attribute value
- Badge display on the shop archive or product category pages
- Attributes added directly in the product editor rather than from a registered taxonomy
- Variable product attributes used for variation selection
- Per-product overrides for which attributes show as badges

## The prompt

```text
Build a WordPress plugin called WC Product Badges. Add a settings page under WooCommerce > Product Badges. The page lists every WooCommerce attribute registered in Products > Attributes with a checkbox next to each, plus a position dropdown: Before add-to-cart button or After add-to-cart button. Save with the options API. On the single product page, hook into woocommerce_single_product_summary at priority 25 for the before-cart position or priority 35 for after-cart. Read the product's taxonomy attributes with $product->get_attributes(). For each attribute that is taxonomy-based, is checked in the settings, and has is_variation() returning false, read its term values and render them as badges. Output a ul with class wc-product-badges and one li per checked attribute, showing the attribute label and its comma-separated values. Attributes with no terms assigned on this product are skipped silently. No JavaScript, no custom post types, no extra database tables.
```

## Why the Additional Information tab gets scrolled past

WooCommerce's attribute table renders through the woocommerce_product_tabs filter, which builds the tab strip that sits below the product description: Description, Additional Information, Reviews. The Additional Information tab holds a two-column layout with every registered attribute and its values for the product.

The problem is structural. The tab strip appears only after the product summary column, which on a standard single product page already contains the title, rating, price, short description and add to cart form. By the time the tab strip is visible, the visitor has read everything that would change their mind about buying. Attributes that act as specs, materials or compatibility notes belong in that column, not after it.

The woocommerce_single_product_summary action fires to build that summary column. WooCommerce attaches its own functions at fixed priorities: title at 5, star rating at 10, price at 10, short description at 20, add to cart form at 30, meta row at 40. A plugin hooking at 25 or 35 slots content in between.

## Hook priority and what it controls in the summary column

Priority 25 puts the badge row between the short description and the add to cart button. Priority 35 puts it between the buy button and the meta row (SKU, categories, tags). The first works for attributes a customer needs before deciding; the second works for specs they want to confirm after deciding. The plugin's settings panel offers both.

Each badge row is a ul with class wc-product-badges. Each li shows the attribute label and its term values, so a product with Difficulty: Intermediate and Format: Digital renders as two list items. The class is left generic so the active theme can target it. No inline styles are injected.

## Which product attributes reach the badge row

$product->get_attributes() returns every attribute the product has as an array of WC_Product_Attribute objects. Three conditions determine whether one becomes a badge: it must be taxonomy-based (created in Products > Attributes, not a custom value typed directly in the product editor), it must be checked in the settings panel, and WC_Product_Attribute::is_variation() must return false for it.

That third check matters for variable products. Attributes used to drive the variation dropdowns already appear in the add to cart form as select elements or swatches. Including them again as text badges in the same column creates a confusing duplicate. Skipping variation attributes keeps the badge row to specs that exist the same way across all variations.

If a product has no terms assigned to a checked attribute, the badge for that attribute is skipped silently. The settings panel saves a list of checked attribute slugs and the position choice to wp_options under a single key. It applies across all products; there is no per-product override in this build.

## Questions

### What about attributes added directly in the product editor, not from Products > Attributes?

Attributes entered directly in the product editor rather than selected from a registered taxonomy have is_taxonomy() returning false. The plugin reads only taxonomy-based attributes. For non-taxonomy attributes, the Additional Information tab remains the display point.

---

Source: https://steem.dev/blog/woocommerce-product-attribute-badges
Build this plugin: https://steem.dev/app