Variation Swatches for WooCommerce replaces the default dropdown select menus on variable product pages with visual swatches – colour circles, image thumbnails, or labelled buttons. The upgrade from dropdowns to swatches is one of the highest-impact product page UX improvements for stores selling products with visual variations like clothing, paint, or accessories. Customers can see all colour options at a glance rather than opening a dropdown menu.
Why Swatches Outperform Dropdowns
Dropdown menus for colour or size selection require customers to click, scan a list of text labels, and mentally map “Navy Blue” to the colour they are looking at in the product photo. Swatches show the actual colour (or a representative image) directly, reducing the cognitive step between seeing what they want and selecting it. For mobile users especially, tapping a visible colour circle is faster and more intuitive than opening a dropdown on a small screen.
The conversion impact varies by product type. For clothing and accessories where colour choice is central to the purchase decision, swatches consistently outperform dropdowns in A/B tests. For products where size or specification is the primary variation (electronics, industrial products), labelled button swatches outperform colour swatches.
Step 1: Install and Activate
Install Variation Swatches for WooCommerce from WordPress.org (the plugin by Emran Ahmed is the most widely used). Activate. The plugin converts existing WooCommerce attributes to swatches without additional configuration for most attribute types. Go to a variable product page on your store and verify the attribute dropdowns have been replaced with the default swatch style.
Step 2: Configure Attribute Types
Go to WooCommerce -> Attributes. For each attribute (Color, Size, Material, etc.), find the “Type” column – Variation Swatches adds new type options alongside the standard “Select” type:
- Color – renders as a coloured circle. Each attribute term gets a colour value configured in the term edit screen.
- Image – renders as a small image thumbnail. Each term gets an image assigned in the term edit screen.
- Label – renders as a button with the term name as text. Good for sizes (S, M, L, XL) where text is clearer than colours.
- Radio – renders as radio buttons.
Need help setting this up? Describe your store setup and get a free estimate.
Step 3: Configure Colour Values for Each Term
Go to WooCommerce -> Attributes -> [Your Color Attribute] -> Configure Terms. Edit each term (Red, Blue, Navy, etc.) and find the Color field added by Variation Swatches. Use the colour picker to set the exact colour for each term. The swatch on product pages shows this colour.
For colours that do not map cleanly to a single hex value (multicolour, pattern, gradient), use the Image swatch type instead and upload a representative image for each term. An image swatch showing the actual fabric texture or pattern is more informative than a single solid colour for complex materials.
Step 4: Configure Swatch Appearance
Go to Variation Swatches -> Settings. Configure:
- Swatch size – width and height in pixels. Standard is 30-40px; larger for image swatches.
- Swatch shape – square or circle. Circles are conventional for colours; squares work well for images.
- Tooltip – show the term name on hover. Useful for swatches where the visual alone may be ambiguous.
- Out of stock behaviour – how to display variations that are out of stock: hide completely, show with a strikethrough, or show greyed out. Showing with strikethrough communicates that the colour exists but is temporarily unavailable.
Step 5: Archive Page Swatches
Variation Swatches for WooCommerce Pro adds colour swatches to the product archive and shop pages. When a customer hovers over or clicks a colour swatch on the shop listing, the main product image switches to show that colour variation without opening the product page. This significantly increases engagement on shop pages where customers browse many products.