What are Variable Products
Variable products are products with options. This means your product page will show a dropdown list of options for your customers to choose from. These options may also have different prices and images.
Edit Simple Product to become Variable Product
For this tutorial, I’m going to change the simple product I uploaded in the previous tutorial to a variable product.
Click on the product name on the product listing page to get to the product editting page. Scroll down to “Product Data” and change the dropdown option to “Variable Product”.
Input Attributes
Next, select the “Attributes” tab. Under “Name”, key in the name of that dropdown. Eg. Colours, Size, etc. Under Values, key in all the options of the dropdown, separated by |.
You need to make sure the box beside “Used for Variations” is checked.
Then, click on the “Save attributes” blue button.
Create Variations
Next, Click on the “Variations” tab. Then, click on the “Add variation” dropdown and select the option “Create variations from all attributes” and click on the Go button. If any pop up appear just click OK.
You will see your options appear. You will now need to click on each of them to add in the details.
Click on the white space beside the dropdown for each option to open up the data window for that option. You can also use the edit link.
If you upload an image it can help your customers see the right image when they select that option on the frontend.
You will need to set the price for this option. Repeat for all other options.
If you key in the description field for each variation, the description content will appear at the space right below your options dropdown at the front end.
For the next tutorial, we will take our first dive into Elementor’s Site Design functions to design the header and footer of the website.
Watch Video
If you need more visuals, watch the video explanation.
