How to display product variation swatches in WooCommerce

Go to Products > Attributes and create global attributes such as Colour and Size. Add the terms customers can choose, such as Black, White, Small, and Large. Global attributes are easier to reuse and maintain across the shop.

You can also create attributes inside an individual product when an option applies to that product only. Use clear, consistent names because the attribute terms become the labels used by your swatches.

Edit the product and set Product data to Variable product. Open Attributes, add the attributes and terms, then enable Used for variations before saving the attributes. WooCommerce only makes attributes available for variation combinations when this option is enabled.

Do not rely on an attribute being merely visible on the product page. It must be marked for variations, or the swatch selector will not control a purchasable combination.

Open the Variations tab and generate all combinations, or add only the combinations you actually sell. Open each variation and add its price, stock status, SKU if required, and any other product data. Set a variation image when a customer should see a different product image after choosing an option.

Save the variations and update the product. If you change the attributes afterwards, redefine or regenerate the variations; otherwise the new swatch choices may not match any purchasable variation.

WooCommerce core does not turn variation dropdowns into colour, size, button, or image swatches. The manual alternative is to build a custom product form with theme code, CSS, and JavaScript that mirrors WooCommerce's variation selection and keeps the variation ID, price, stock, and add-to-cart state in sync.

That route is only sensible for a developer maintaining a custom theme. It is easy to create a selector that looks right but submits the wrong variation, fails when an option is out of stock, or breaks after a WooCommerce or theme update. For most shops, keep WooCommerce's native variation form and add a dedicated swatch extension instead.

Install a variation-swatches extension from Plugins > Add New or upload its ZIP file, then activate it. In the extension settings, choose the display type for each attribute: colour for colour terms, images for product or pattern options, and buttons or labels for sizes. Configure the individual terms, including colour values or term images, then save.

The extension replaces the front-end dropdown presentation while WooCommerce continues to use the underlying variable product and variation data. Preview the product page after configuring each attribute, rather than assuming every term has been saved correctly.

On the product page, select each swatch in different orders and confirm that unavailable combinations are disabled or rejected, the price and stock message change, and the correct variation can be added to the cart. Test on a phone as well as a desktop browser.

For image changes, upload images to the actual variations. A swatch image is not necessarily the same thing as the variation's main product image, and some swatch extensions only use it as the selector graphic.

Watch large variable products closely. WooCommerce changes its dynamic dropdown behaviour above 30 variations for performance, so products with many combinations need careful testing with the swatch extension and theme.