Attribute swatches module
Letting shoppers choose a variation without opening the product.
In short
Attribute Swatch puts a product's variations into the listing item as something to click - text, icons or images, or colours. Choose the attribute, choose how its values are shown, then set each value's icon or colour and hide any you don't want offered. They're fully customisable on the Design tab, so what they end up looking like is up to you. Paired with the other product modules they let a shopper pick a variation, see it, and buy it without leaving the results.
Note
This module reads WooCommerce product attributes, so it only applies when you're filtering products.
What it's for
On its own it shows the variations a product comes in. Alongside the other product modules it does considerably more: with Product Image & Gallery in the same item, clicking a swatch changes the picture to that variation, and with Add to Cart the button then adds exactly that variation to the cart.
Together those turn a filtered listing into somewhere a shopper can finish. They pick a colour, see it, and buy it - three things that normally cost a trip to the product page and a trip back.
Choosing the attribute
Attribute points the module at one of your product attributes - colour, size, material, whatever your shop uses. One module covers one attribute; place it twice to offer two.
Display As then decides how that attribute's values appear, and it's the setting that shapes everything below it.
| Display As | How each value appears | What you set per value |
|---|---|---|
| Text | The value's name, as words. | Nothing - the names come from WooCommerce. |
| Icon/Image | An icon or a picture. | An icon from the library, or an image of your own uploaded. |
| Color | A colour swatch. | The colour, from a colour picker. |
One attribute, shown as text, icons or colours.
Setting up the values
Below those, every value of the chosen attribute is listed. What sits beside each one follows the display type: a colour picker if you chose Color, an icon and upload control if you chose Icon/Image, and nothing at all if you chose Text, since the names need no setting up.
Each value also carries an eye control. Switch it off and that value isn't offered at all - useful where an attribute holds values you no longer sell, or ones that only apply to a handful of products and would clutter every other card.
The values can be dragged into the order you want, so a size attribute reads small to large rather than alphabetically.
A control per value, plus the eye to leave one out.
Tip
Colour is the attribute worth doing properly. A shopper can judge a colour from a swatch but not from the word “Teal”, and getting the swatch close to the real product is the difference between a useful control and a decorative one. For anything with no visual form - sizes, materials - text is usually clearer than an icon.
Filter Label
The same label settings as the filter modules: Enable turns it on, Label Text is the wording, Show Icon adds an icon beside it, and Enable Collapse lets visitors fold the swatches away by clicking the label.
Styling
How the swatches look comes from the Design tab, with the usual groups - Layout, Text, Sizing, Spacing, Background, Border and Box Shadow
There are no swatch styles to choose from, and that's the point - the shape you end up with is whatever you build. Between the border radius, a background, a border, padding and the layout direction, the same module can be round colour dots, square tiles, text buttons, a row running across the card or a column down it. What you make of it is open.
Sizing and Gap are the settings to get right first, whatever the style. Keep swatches small enough that a product with eight colours doesn't take over its own card, and large enough to hit with a thumb on a phone.
One module, and what can be built from it.
FAQ
Can one module show two attributes?
No - it covers one. Place it again for a second attribute.
How do I set the colour for each value?
Choose Color as the display type, then pick each value's colour from the picker beside it.
Can I use my own images instead of icons?
Yes - with Icon/Image you can choose from the library or upload an image per value.
How do I stop a value being offered?
Switch off the eye beside it in the values list.
My sizes are in alphabetical order.
Drag the values into the order you want.
Can I change the shape of the swatches?
Yes - the Design tab controls it entirely. Border radius, background, border, padding and direction between them cover round, square, button-like, in a row or in a column.
Can clicking a swatch change the product photo?
Yes, where the item also has the Product Image module.
Can a shopper buy a variation from the listing?
Yes, where the item also has the Add to Cart module - they choose the variation here and the button adds it.
Was this page helpful?
Thanks for your feedback!