If you want to use swatches for a specific product only or override the styling for your global swatches, then you can do so with WooCommerce Attribute Swatches.
To add product-specific swatches, take the following steps:
Note: This guide presumes you already have a variable product set up and saved with attributes already assigned.
- From your WordPress dashboard, go to Products > All Products and click to edit the product you want to edit or add custom swatches to.
- Scroll down to the Product data section of the Edit Product page and click the Swatches tab.
- Here you’ll see all the attributes assigned to your variable product. For example, ‘Frame Color: Colour Swatch’.
- If you created a custom attribute for the product you’re editing, this will also appear here.
- Click on an attribute, or hover over it and click the black down arrow to see more information.
- If you’ve created a custom attribute for the product you’re editing, you’ll see Swatch Type and a dropdown menu. Change this to whatever swatch you want to create and all your custom swatch settings will appear.
- If you’re editing a swatch that was first created as a global swatch, all of the existing (global) settings for this attribute will then appear. You can change everything from the swatch colors, to their size, shape and more.
- Once you’re happy with your changes, scroll to the top of the page to the Publish section and click the blue Update button.
