Show product colors as clickable swatches instead of dropdowns. Perfect for clothing, accessories, paint, or any color-based products.
Before You Start
Make sure you’ve configured your swatch display settings and have variable products set up in WooCommerce.
Step 1: Create a Color Attribute
Navigate to Products > Attributes.
Click Add New Attribute or edit an existing color attribute.
Set Type to Color.
Click Save Attributes.
Step 2: Add Color Options
Click Configure Terms next to your color attribute.
For each color (e.g., Red, Blue, Green):
- Name: Enter the color name
- Color Picker: Select the exact shade using the color picker
- Hover Image (Optional): Upload a product image in this color
Click Add New Term and repeat for all colors.
Click Save Changes.
Step 3: Apply to a Product
Edit a variable product and go to the Attributes tab.
Select your Color attribute and check Used for variations.
Click Save attributes, then go to Variations and click Generate variations.
Update the product.
Result
Your product now displays clickable color swatches instead of a dropdown menu.