How to Set Up Variable Products in WooCommerce (Color/Size Options)

Are you selling products that come in different sizes, colors, or styles? With WooCommerce, you can easily set up variable products that allow customers to select from various options on a single product page.

This guide walks you through everything you need to know about setting up variable products in WooCommerce—from attributes to variations, and more!

---

🔍 What Is a Variable Product?

A variable product in WooCommerce is a product that offers multiple options or variations, such as:

• T-shirts (Size: S, M, L / Color: Red, Blue)
• Shoes (Size: 7, 8, 9 / Color: Black, White)
• Rings (Material: Gold, Silver / Size: 6, 7, 8)

Instead of creating separate listings, you can manage them all under one product using product attributes and variations.

👉 Official WooCommerce Docs – Variable Products

---

🛠️ Step-by-Step Guide: How to Set Up Variable Products in WooCommerce

Step 1: Create a New Product

1. Go to your WordPress Dashboard > Products > Add New.
2. Add the product title and description.
3. Upload the main product image and gallery images.

---

Step 2: Choose “Variable Product” Type

1. Scroll down to the Product Data section.
2. From the Product Type dropdown, select Variable product.
3. Leave the rest as default for now.

⚠️ Don’t choose “Simple Product” or you won’t see the variation settings.

---

Step 3: Add Attributes (Color, Size, etc.)

1. Click on the Attributes tab (inside Product Data).
2. Select “Custom product attribute” from the dropdown and click Add.
3. Name it (e.g., Color).
4. In the Value(s) field, add values separated by pipe | symbols. Example:
   Red | Blue | Green
5. Check both:
   • Used for variations
   • Visible on the product page

Repeat for other attributes like Size.

---

Step 4: Generate Variations

1. Go to the Variations tab.
2. Click on the dropdown that says “Add variation”, then select “Create variations from all attributes” and click Go.
3. WooCommerce will auto-generate all combinations.

Example: Red – Small, Red – Medium, Blue – Small, etc.

---

Step 5: Configure Each Variation

For each variation:

• Set the price (this is required).
• Add a unique image if needed (e.g., show red color when red is selected).
• Set stock status, SKU, and dimensions (optional).

Repeat for all variations.

---

Step 6: Save and Publish

Once all variations are configured:

• Click Save Changes.
• Publish or update the product.

Your customers will now see dropdown menus or swatches (if supported by theme/plugin) to choose size, color, or other variations.

---

🎨 Optional: Add Color/Size Swatches for Better UX

Want buttons or color circles instead of plain dropdowns?

Use plugins like:

• 🔗 Variation Swatches for WooCommerce – by Emran Ahmed (Free)
• 🔗 WooCommerce Attribute Swatches by IconicWP (Premium)

These plugins improve the user interface and boost conversion rates.

---

✅ Pro Tips

• Use descriptive product images for each variation.
• Set default variation so the product doesn’t appear as “Unavailable.”
• Optimize each variation for SEO using a plugin like Yoast SEO.

---

🧾 Example Use Cases

• Fashion Store: T-shirts in 5 sizes and 4 colors
• Footwear Store: Shoes with different sizes for men and women
• Jewelry Store: Rings in various metals and sizes

---

Setting up variable products in WooCommerce helps streamline your store and improves the shopping experience. By combining variations in a single product listing, you make it easier for customers to choose exactly what they want.

With plugins and a little setup time, you can create a professional and user-friendly storefront that boosts sales and keeps customers happy.