How to Set Up Variable Products and Attributes in WooCommerce

One tee, three colors, and three sizes. That's nine choices, but it should be one product page. In this tutorial, we'll set up a variable product in WooCommerce, step by step. Then we'll check it as a customer, and go through the mistakes that trip people up. It's all stock WooCommerce, so there's nothing extra to install.

Two ideas first. Attributes, and variations. An attribute is a choice you offer, like Color or Size. Its values are the options: Sage, Navy, and Clay. A variation is one exact combination, like Navy in medium. Each variation can have its own price, stock, picture, and SKU. So attributes list the choices, and variations are what you actually sell. All of it sits on one product, set to the Variable product type.

Let's start with Color. In your dashboard, go to Products, then Attributes. This makes a global attribute. It lives in one place, so any product can use it. Type Color as the name, and click Add attribute. Enable archives can stay off. Now click Configure terms. The terms are the values. Add Sage, Navy, and Clay.

Now the product itself. Go to Products, then Add Product. Give it a name, and a short description. Pick a category, and set the main product image. It shows until a customer chooses a variation that has its own picture. Then, in the Product data box, change Simple product to Variable product.

Open the Attributes tab. Choose Add global, and pick Color. Click Select all, to add all three colors. Size is different. Click Add new, to make a custom attribute that exists only on this product. Type Size as the name. Then type the values, with a vertical bar between each: Small, Medium, and Large. Check that Used for variations is ticked on both. It's ticked by default, but it's worth a look. Visible on the product page lists them in the Additional information tab. Then click Save attributes.

Now open the Variations tab, and click Generate variations. WooCommerce makes one variation for every combination. Three colors times three sizes is nine. Each row is one variation. Click a row to open it, and you'll see its fields.

Let's set the prices. Open Bulk actions, choose Set regular prices, and enter thirty-two dollars. Every variation now has that price. But a variation can have its own. Large costs a little more, so we'll open each large variation, and enter thirty-five dollars. Sale prices work the same way. Use Set sale prices in Bulk actions, or fill in one variation at a time.

To count stock for each variation, you first turn on stock management. That's a store setting, not a product one. Go to WooCommerce, Settings, Products, then Inventory. Tick Enable stock management, and save. Back on the variations, choose Bulk actions, Toggle Manage stock, then Stock. We'll set ten of each. Now change one. Navy in large has none left, so its stock is zero. Stock is counted for each variation. So Navy in large can sell out, while every other size keeps selling.

Each variation can have its own pictures. Click Add variation images, choose one from the media library, and click Update gallery. The first picture is the main one for that variation. Do the same for every variation. WooCommerce has no bulk action for images, so it's one at a time.

Next, Default Form Values. Choose Sage and Medium, so the product opens with those already picked. Leave them empty, and customers start at Choose an option. Click Save changes, then Publish.

Now let's be a customer. In the shop, the price is a range, from the lowest variation to the highest. The button says Select options. The product opens with Sage in medium picked, and the price for that variation. Choose Navy. The picture changes to the navy tee. Choose large. That one is thirty-five dollars, and it's out of stock. Choose Clay. Clay in large is in stock, so we can add it to the cart. The cart keeps exactly which variation was chosen.

Mistake one: no variations to generate. The Variations tab says to check the Used for variations box. That box is on each attribute, on the Attributes tab. Tick the box, save the attributes, and try again. Now the Generate variations button appears.

Mistake two: commas between custom values. WooCommerce reads the whole line as one value. So three colors and one size gives just three variations, not nine. Separate the values with a vertical bar instead, save, and generate again. The three old variations stay behind, now set to Any Size. Remove them.

Mistake three: a variation with no price. Here we've cleared the price on Clay in small. On the product page, choose Clay, and Small has vanished from the size list. WooCommerce hides any combination it can't sell, so that size is simply missing. Give every variation a price, and then test each combination yourself.

Mistake four: Any. A variation set to Any Size matches every size. That can be handy, but all of those sizes then share one price and one stock count. And if two variations match the same choice, WooCommerce uses the first one in the list.

That's it. Attributes list the choices, and variations hold the price, stock, and picture for each combination. Mark your attributes for variations, give every variation a price, and test each combination as a customer. One honest note: WooCommerce has no built-in size guide. If you sell clothes, the free PluginCity Size Charts for WooCommerce plugin adds one. Thanks for watching.