How to Create a Product with Sizes and Colors (Variable Product) in WooCommerce
Learn step-by-step how to add variable products to your online store, set different prices by size, and track inventory by variant.
One of WooCommerce's most powerful features is the ability to create Variable Products. This way, instead of creating ten different products for a T-shirt that comes in 5 sizes and 2 colors, you create *one* main product, and the system takes care of showing the user the appropriate options.
Change Product Type to “Variable”
Open the product you want to edit (or tap New Product). Scroll down until you find the box Product Data. From the drop-down menu that says, by default, Simple product, select the Variable product.
[ Screenshot: The “Product Data” menu with “Variable Product” selected ]
Adding Attributes
Now we need to tell the system what the options are for this product (e.g., Size):
- In the left-hand menu of the pane, click on Attributes.
- If the properties have been preset by Skynetix, select, for example, “Size” from the drop-down menu and click Add. *If not, select “Custom product attribute”*.
- In the field Values, select the sizes available for this product (e.g., Small, Medium, Large).
- A crucial step: Check the box that says Used for variations.
- Click Save Attributes.
[ Screenshot: The Properties tab with “Small/Medium” selected and "Use for variants" checked ]
Creating Variations
After saving the properties, click the tab directly below it: Variations.
Click the drop-down menu that appears and select Create variations from all attributes and press Go. WooCommerce will automatically combine the options and create separate line items (e.g., one line item for "Small," one for "Medium," and so on).
If you have 15 different sizes and they all have the same price, you don’t need to open each line individually. In the drop-down menu for variants at the top, select “Set regular prices” , enter, for example, 20, and click Go. The price of €20 will be automatically applied to all sizes at once!
Price & Inventory Settings by Size
Click on the row for a specific variant (e.g., on the Small) to “open” its hidden menu. There, you can set:
- Regular price: Required field (if left blank, this size will not appear in the e-shop).
- Inventory Management?: Check this box if you want to specify exactly how many pieces you have of the Small size (e.g., 5 pieces).
- Variation image: You can upload a custom photo (e.g., the T-shirt in red) so that when the customer selects “Red,” the main image of the online store automatically changes to red!
The most common mistake: If you create the variations but forget to include Price For some of these, WooCommerce considers them “unavailable” and won’t display them at all in the e-shop’s drop-down menu. Make sure that each variant has at least one price, and that you clicked the button Save changes at the bottom of the variants table.
[ Screenshot: The open window of a variant showing the “Price” and “Inventory Management” fields and the Save button ]
Once you've finished configuring the settings and the variants, scroll all the way to the top right of the page and click the classic button Update ή Publish by WordPress.
Would you like to display attractive buttons (swatches) instead of drop-down menus?;
Simple text drop-down menus are tedious and reduce sales. At Skynetix, we can upgrade your e-shop by installing **Variation Swatches**. This way, your customers will see actual color swatches (Color Swatches) or stylish little boxes showing sizes (Labels), improving the shopping experience and skyrocketing your store’s conversion rate.
