Variable products are a great feature of WooCommerce for offering variations of a product such as the color and size on a different prices.

Below is a step by step tutorial on how to:
1. create a product and set product image and gallery
2. set the product type (variable product)
3. define variation attribute (color)
4. add variations (color and image)

Step 1: Create a product and set product image and gallery.

To do this, go to WP Dashboard >Products>Add Products. Scroll down to the bottom right and click on Set product image to add a product image. You can also add a gallery under the product image by clicking on Add product gallery images. Then publish / save it.

Step 2: Set the product type

On the same page which is the product page, click on the drop down box beside Product Data and choose Variable Product.

Step 3: Define variation attribute (color)

Click on Attributes > Add

Under Name field, type the word Color, and then under the Value(s) box, enter the color names by pipe ( | ) separating values and make sure to check the box that says Used for variations. Then click Save Attributes and Update the page.

Step 4: Add variations (color and image)

Click on Variations tab and click Add Variation. Choose Blue from the drop down box and click on the box that says “Woo” to upload an image. Please don’t forget to put any price on the price field or else the variation on the live site won’t show up.

Do the same process for the colors Pink and Green. Click on Add Variation again and choose the color and upload the image of each shoes. After doing that click on Update button and test your site online.

Here is a video tutorial on how to add variable products in your Woocommerce site: