How to Add Multiple Variation Swatches in WooCommerce for More Engaging Product Displays

WooCommerce offers a great way to sell variable products with attributes like colors, sizes, and styles. However, many stores need to display multiple swatch options, such as text color, background color, or material type.

This is especially useful for stores selling:
✅ Smartphone cases – where customers choose both case color and text color.
✅ Clothing & Fashion – offering multiple color options for fabric and embroidery.
✅ Furniture & Home Decor – allowing users to select finishes, wood types, or upholstery colors.
✅ Custom Printing & Stickers – where multiple customization options are available.

In this tutorial, we’ll guide you through enabling multiple variation swatches using WooCommerce and the GOMAX Theme, so your customers can enjoy a more interactive shopping experience.

🔹 Step 1: Enable Extended Filters for Product Custom Fields

1. Navigate to GOMAX Theme > WooCommerce > Extended Filters.
2. Enable the option “Product Custom Field” if you plan to use custom attributes beyond the default ones.

🔹 Step 2: Create Custom Attributes

1. Go to WooCommerce > Products > Attributes.
2. In the Name field, enter your desired attribute label (e.g., “Text Color”).
3. In the Type dropdown, select “Color” to generate color swatches on the frontend.
4. Click “Add attribute”.

💡 You can repeat this process to create other attributes, such as “Background Color”, “Material”, etc.

🔹 Step 3: Configure Attribute Terms

1. Once the attributes are created, they will appear in a table on the right.
2. Click “Configure terms” next to each attribute.
3. Add the different options (e.g., red, blue, black) by entering:
   • Name: The label (e.g., “Red”).
   • Color: The respective HEX or visual selection.
4. Click “Save”.

🔹 Step 4: Assign Attributes to Your Products

1. Go to Products > Edit Product.
2. In the Product Data section, navigate to the Attributes tab.
3. Select the attribute you created and click “Add”.
4. Choose the values (e.g., select the available colors).
5. Click “Save attributes”.

🔹 Step 5: Generate Variations

1. Switch to the Variations tab.
2. Click “Create variations from all attributes” or manually add specific variations.
3. Assign prices, stock, and images for each variation if necessary.
4. Click “Save Changes”.

🎉 Step 6: Check the Frontend

Save your product and preview it on your store. You should now see multiple swatch selectors, allowing customers to choose from various customization options!

This setup helps enhance the user experience, making product selection more intuitive while improving conversion rates.

🚀 Want more WooCommerce tips? Stay tuned to the Themeasy Blog for expert guides and insights!