Woocommerce product swatches

By default, woocommerce uses Select type for variation select and text values in specifications. Woocomerce addon adds several additional options for attribute types: color tag, text tag, image and image + text tag

This feature supports variable selector, specification table and dynamic comparison

How to add product swatches to Woocommerce FSE templates?

When you create attribute in Woocommerce, you can select it’s type

Once you select custom type and save it, you can find additional fields when you configure your attribute terms

How to show swatches on pages

On inner product pages, swatches are added automatically if you use Single Product Template Button block. This will show dynamic swatches which are connected to variations and show dynamic price.

If you just need swatches as information (not clickable), you can use Meta getter block – Woocommerce – Product swatches

You can also show swatches in query, for this, use block “Button with quantity and variations”

Copy this post’s content
Copy code below, and paste it (CTRL+V) in content of page