Requirements
Requirements
This plugin requires WooCommerce 6.0+ and PHP 7.4+. It is compatible with WooCommerce High-Performance Order Storage (HPOS).
The plugin works with any WooCommerce-compatible theme and hooks into standard WooCommerce variation templates.
Installation
Upload the plugin
Download the plugin ZIP file from your purchase confirmation email. In your WordPress admin, go to Plugins → Add New → Upload Plugin and select the ZIP file. Alternatively, extract the ZIP and upload the
woo-attribute-swatchesfolder via FTP to/wp-content/plugins/.Activate the plugin
Go to Plugins in WordPress admin and click Activate on “WooCommerce Attribute Swatches”.
Enter your licence key
Navigate to WooCommerce → Attribute Swatches and enter the licence key provided in your purchase email to activate updates and support.
Setting Up Swatch Types
Swatch types are configured at the attribute level. Each attribute (e.g. Colour, Size, Material) can display as a different swatch type.
Navigate to Products → Attributes
In your WordPress admin, go to Products → Attributes. You’ll see a list of your existing product attributes.
Set the Swatch Type
When adding or editing an attribute, you’ll see a new “Swatch Type” dropdown. Choose from:
- Colour: displays a filled circle/square with a hex colour. Supports dual-tone (split diagonal) colours.
- Image: upload a custom image (material texture, pattern, etc.) for each term.
- Label: clean text buttons, ideal for sizes like S, M, L, XL.
- Radio: traditional radio buttons for non-visual attributes.
Configure each attribute term
Click Configure terms on an attribute, then edit each term individually.
- For Colour swatches, you’ll see a colour picker for the primary colour, and an optional second colour for a dual-tone/gradient effect.
- For Image swatches, upload or select an image from the media library.
- For Label swatches, the term name is used automatically.
Global Settings
Go to WooCommerce → Attribute Swatches to configure global settings:
| Setting | What it does |
|---|---|
| Swatch Shape | Round, Rounded Square, or Square. Applies to all swatch types. |
| Swatch Size | Width and height in pixels (16–100px). Default is 36px. |
| Selected Style | How the selected swatch is highlighted: Border, Tick/Checkmark, or Both. |
| Show Tooltip | Display the attribute name as a tooltip when hovering over a swatch. |
| Large Image Preview | Show a magnified preview when hovering over image-type swatches. |
| Out of Stock Style | How unavailable variations appear: Cross/Strikethrough, Faded, or Hidden. |
| Display Style | Stacked (wrapping rows) or Single-line (horizontal scroll). |
Per-Product Overrides
You can override the global swatch type on a per-product basis. This is useful when a specific product needs a different visual representation.
Edit a product
Open any variable product in the WordPress admin.
Go to the Attribute Swatches tab
In the product data panel, click the “Attribute Swatches” tab.
Override swatch types
For each attribute used by this product, you can select a different swatch type. You can also override individual term colours or images for this product only.
Swatch Groups
Swatch groups let you organise attribute terms into labelled categories, for example, grouping colours into “Plain” and “Patterned”. When editing attribute terms, assign each term to a group. On the frontend, swatches will be displayed under their group headings with a visual separator between groups.
Catalogue / Shop Page Display
Attribute Swatches can display swatches directly on your shop, category, and archive pages, letting customers preview variations without opening the product page.
Enable catalogue swatches
In WooCommerce → Attribute Swatches, find the Catalogue Display section and enable swatches for shop pages.
Select which attributes to show
Choose which attributes appear as swatches in the catalogue. Typically, colour is the most useful visual attribute to show.
Enable image swap (optional)
When enabled, hovering over a colour swatch on the shop page will swap the product image to show the variation image.
Enable link to variation (optional)
Clicking a catalogue swatch can take the customer directly to the product page with that variation pre-selected.
Frequently Asked Questions
- Will this work with my theme?
- Yes. The plugin hooks into standard WooCommerce variation templates and is designed to work with any WooCommerce-compatible theme.
- Can I use different swatch types for different products?
- Absolutely. Set the default swatch type globally for each attribute, then override it per-product in the “Attribute Swatches” product tab.
- Does it support dual-tone / gradient colours?
- Yes. Each colour swatch term has a primary and optional secondary colour field, creating a split diagonal gradient effect.
- Is it compatible with HPOS?
- Yes. The plugin declares full compatibility with WooCommerce High-Performance Order Storage.