Adding a variable product

One of the complexities of e-commerce stores is figuring out how to sell similar products; for example, the same t-shirt design in different sizes and colors. Do you sell each size and color as a separate product with its own product page or do you combine them somehow?

WooCommerce handles this with variable products. Variable products can have multiple attributes such as size and color to help you sell these products. Throughout this chapter, I've been creating a poster product and attributes. I'm going to use the same data in this recipe as well, except that this time I'm going to create a variable product so people can choose the color of the poster.

How to do it…

There are two basic parts to this. The first part is setting up the attributes this variation will use to distinguish between the different variations. The second part will define how each variation is different.

1. From the WordPress admin, go to Products | Add Product.
2. Just as with a simple product, add the Product name and Featured Image.
3. Scroll down to the Product Data panel and, from the drop-down, select Variable product. You may notice a few of the settings in the panel have been moved around.
   
4. Click on the Attributes tab. You have to add attributes before you can add variations.
5. Select one of the global product attributes we created in the previous recipe and click on Add.
6. The poster I'm creating comes in blue and red. I'm going to select those attribute terms.
   
7. Click on the Used for variations checkbox.
8. Click on the Save attributes button.

By this point, we've told WooCommerce the attributes we're using to distinguish between the different variations. Now it's time to create our variations and tell WooCommerce how each one is different.

1. Click on the Variations tab in the Product Data panel.
2. Click on Add Variation.
   
3. Select your attribute in the drop-down, enter a price, and upload an image for that variation.
   
4. Repeat this for as many variations as you have. For my example, I'll be doing it one more time for the red variation.
5. Once you're all done, click on Publish.

Tip

If you view the product on the frontend of your site, you'll notice how the featured image and price will change when selecting different attributes.