WooCommerce lets you offer one product in different sizes, colors, or styles without creating separate listings

Instead of listing a shirt in blue, red, and green as three different products, you can create one product with color variations. Customers pick their choice from a dropdown or button on the same page, and the price, image, and stock count update based on what they select. This is called a variable product in WooCommerce.

Setting this up takes about 10 minutes once you know the steps. You'll define what varies (like size or color), then add each combination and its details. WooCommerce handles the rest — showing the right image when someone picks an option, tracking stock separately for each variation, and charging the correct price.

Key Takeaways

  • Variable products let customers choose options like size or color on one product page instead of buying from separate listings.
  • You create attributes first (the category of choice, like "Color"), then add values (the actual options, like "Blue" or "Red").
  • Each variation can have its own price, image, stock count, and SKU, so you track inventory separately for each option.
  • You can show variations as dropdowns, buttons, or color swatches depending on your theme and settings.

Create attributes before you create the product

An attribute is the category of choice — Color, Size, Material, or Length. You define these once, then reuse them across all your products. This saves time if you sell multiple items in the same sizes or colors.

Go to your WordPress dashboard. Click Products in the left menu, then Attributes. Click Add Attribute. Type the name — for example, "Color" — in the Attribute Name field. Leave the slug as WooCommerce fills it in automatically. In the Terms section, type each option on a new line: Blue, Red, Green. Click Add Attribute at the bottom.

Repeat this for each attribute you need. If you sell shirts in sizes, create a Size attribute with values Small, Medium, Large, XL. If you sell items in different materials, create a Material attribute. You only do this once per attribute, even if you use it on 50 products.

Convert your product to a variable product

Open the product you want to add variations to, or create a new one. On the product edit page, look for the Product Data box on the right side. Click the dropdown that says Simple Product and change it to Variable Product. Click outside the dropdown to save the change.

The page will reload and show new tabs: Attributes, Variations, and Linked Products. You're now in the right place to add options.

Add attributes to the product

Click the Attributes tab. You'll see a section called Custom Product Attribute. Click Add Attribute. A dropdown appears with all the attributes you created earlier. Select Color (or whichever attribute you want to use). Click Add Attribute.

The attribute now appears in a box below. You'll see checkboxes next to each value you created — Blue, Red, Green. Check the boxes for the options this product actually comes in. If this shirt only comes in Blue and Red, check only those two. Leave Green unchecked.

If you need more than one attribute — say, both Color and Size — click Add Attribute again and repeat the process. Check the Visible on the product page box for each attribute so customers can see the options. You can leave Used for variations checked; WooCommerce does this automatically.

Generate variations for each combination

Click the Variations tab. You'll see a message saying "No variations yet." Click Generate Variations. A popup appears asking which attributes to use. If you added Color and Size, both will be listed. Make sure both are checked, then click Generate.

WooCommerce now creates one variation for every combination. If you have 3 colors and 4 sizes, you get 12 variations — Blue Small, Blue Medium, Blue Large, Blue XL, Red Small, and so on. Each one appears as a row you can edit.

Set price, image, and stock for each variation

Click on any variation row to expand it. You'll see fields for Price, Cost Price, Stock Quantity, and Image. Fill in the price for that specific variation — if Blue Small costs $20 and Red Large costs $25, enter each separately. Add the stock count so WooCommerce knows how many of each combination you have.

To add an image for a variation, click the image placeholder. This is optional — if you don't add one, the main product image shows. But if Blue and Red look different enough that customers should see both, upload a separate image for each color. Click Set image to attach it to that variation.

You can also add a SKU (stock keeping unit) for each variation if you track inventory by code. This is useful if your supplier sends you items with different codes for each size or color.

Scroll down and click Save Changes when you're done editing a variation. Repeat for each one. If you have many variations, this takes time, but you only do it once per product.

Choose how variations display to customers

By default, WooCommerce shows variations as dropdown menus. Customers click "Color" and select from a list. Some themes and plugins let you show them as buttons or color swatches instead — customers click a blue square instead of typing "Blue."

To change this, go back to the Attributes tab. Look for a setting called Attribute Type or Display Type (the exact name depends on your theme). Some themes don't offer this option, and that's fine — dropdowns work on every store.

If your theme does offer it, you can usually choose Select (dropdown), Button, or Color. Pick what makes sense for your product. Color swatches work well for clothing; buttons work for any attribute.

Test the product page and check stock tracking

Save the product and view it on your store. You should see the attribute options on the product page. Click through each one and make sure the price, image, and description update correctly. Add a variation to your cart and check that the right one appears in the cart.

Go to Products in your dashboard and click Stock. You should see each variation listed separately with its own stock count. When a customer buys Blue Small, only that variation's stock decreases — Red Small stays the same.

If stock isn't tracking correctly, go back to the Variations tab and make sure you entered a Stock Quantity for each one. If you left it blank, WooCommerce treats that variation as out of stock.

Frequently Asked Questions

Can I add variations to a product I already created?

Yes. Open the product, change it from Simple Product to Variable Product, then follow the steps above. Any existing product data stays — you're just adding options on top of it.

What if I want to hide a variation without deleting it?

Click the variation row to expand it, then look for a checkbox that says "Enabled" or "Active." Uncheck it. The variation disappears from the store but stays in your dashboard so you can turn it back on later.

Can different variations have different shipping weights?

Yes. When you expand a variation, you'll see a Shipping section with a Weight field. Enter the weight for that specific variation. WooCommerce uses it to calculate shipping costs at checkout.

Do I have to set a price for every variation?

No. If you leave the price blank for a variation, it uses the main product price. This is useful if most variations cost the same but a few are different — only fill in the ones that differ.

What happens if I run out of stock for one variation?

That variation becomes unavailable. Customers still see it on the product page, but they can't select it — it appears grayed out or shows "Out of Stock." The other variations stay available for purchase.