How to Add Color Swatches to Your WooCommerce Store
Last updated: August 2026
This walks through the video above step by step. The result: clickable color swatches on your WooCommerce product pages, right inside your Swiffle Grid — no code required.
Step 1 — Create the Color attribute
Go to Products → Attributes in your WordPress admin. Create a new attribute named « Color », then check the « Base color? » box to enable color swatches for this attribute.
The « Color » attribute, with « Base color? » checked.
ℹ️ The « Base color? » checkbox is what tells Swiffle Grid to render this attribute as clickable color swatches, instead of a plain dropdown list.
Step 2 — Add a term and pick its color
Click « Configure terms » for your new attribute, then create your first term (for example « Blue »). Use the color picker to set its base color.
Picking the base color for the « Blue » term.
Step 3 — Repeat for every color
Repeat the process for every color you want to offer on your products. Here, a second term, « Red », is created with its own base color.
« Blue » is saved; « Red » is being created.
Step 4 — Assign colors to your variations
On your product page, in « Variable product » mode, assign each color to its variations. Every color/size combination becomes its own product variation.
Product variations with « Blue » and « Red » assigned.
Result
Your store now shows beautiful color swatches, clickable right on the product card — a small detail that makes a real difference in the shopping experience.
Clickable color swatches, shown live on the grid.
Thanks for reading. Check out our channel for more tutorials to help you succeed.