How to Add a Variable Product to Your Ecommerce Website

 

Hi guys today we are going to see how we can add a variable product

to your e-commerce site

now let's say you have a product which comes in different

variations like this

so here is a t-shirt which comes in different colors and sizes

or let's say you have a food product which comes in different flavors like this

so if you want to create different variations on your products like this

you need to create a variable product

so once you create your variable product

your customers will be able to choose the option they want

before purchasing your product

so let's get started we are going create our variable in just four steps

the first step is to create your attributes

so attribute are the differences which you have on your product

for example if your product comes in different colors

you need to create an attribute called color

so to create the color attribute

let's go to our WordPress dashboard

and then go to products

and click attributes

now you'll get this page where we are going to create the attribute

now if you have any default attribute here

you can delete it

by clicking delete

so once you have deleted the default attribute

you can now create a new attribute

so let's say you want to have different color options on your product

then all you have to do is enter the attribute name

which is color

and then click Add attribute

so once you have added the attribute name

next you need to add all the options

which you want inside the color attribute

so let's click on color

now let's say you have three colors on your product

you just have to enter the colors here

and then click add new color

and it'll be added here

now let's add all the remaining colors

now once you've added all the colors

now if you go back by clicking here

you can see that we have the color attribute

with three different colors

so now we have successfully created our attribute

so once you've created the attribute

we can now go to step two

which is to add this attribute to your product

now to add this attribute to our product

just go to new

and then click product

now enter your product name

I'm going to enter t-shirt

now if you see here right now this product is set to a simple product

which means we cannot add our attribute here

now if you want to add your attribute to this product

you need to first change this to a variable product

so to change it let's click here

and then select variable product

so once you have selected variable product

product we can now add our attribute to this product

so to add the attribute to this product

let's go to attributes

and now if we click here

you can see the color attribute which we created before

so let's select that

and let's add it to the product

now here you need to choose the colors which are available for this product

so if we click here

you can see the colors which we added before

so let's select a color

now if you want to select all colors

just click select all

and all the colors will be selected

so once you have selected the colors which are available for this product

just enable used for variations

and then click save attributes

so now we have successfully added the attribute to a product

so once you add the attribute

next let's go to step 3

which is to create your variations

so to create variations on your product

just like variations

and then click here

and choose create variations from all attributes

now this will create different variations for your product

based on the attributes you selected

so let's click go

and now you can see that three different variations have been added to our product

and each of these variations

have a different color

so now we have successfully created our product variations

so next let's go to step four

which is to set the price for these variations

now to set the same price for all the variants

just click here

then select set regular prices

and click go

now it will ask you to enter the price

so I'm going to enter 299

and click okay

and now the price will be set for all the variations

okay so now we have successfully set the price for our variations

which means we can now publish our product

now before we publish our product

let's add an image for our product

so to add a product image just click set product image

and in drag and drop an image from your computer

so once you've set the product image just click publish

and we can now see the product

by clicking here

now here you can see that we now have the option to choose the color of a product

so if we click here

you can see all the colors which we selected

so this is how we can add a variable product to your e-commerce site

so once you have added these variations

next let's see how we can change the image for each variation

now if you click here

and choose a color

you can see that the image does not change

now if you want the image to change based on the color you choose

you need to set an image for each variation

so to set the image for the variation

just go back to edit page

and then click variations

now these are the variations which we created before

now to add an image for this variation

just click on it

and then click here to add an image

a drag and drop an image from your computer

and image will be set for this variation

now in the same way we'll add images for these two variations

so we'll click here

add the image

and then add image for this one

so once you have added the images

just click Save Changes

and then click update

so now if we go to our product

and then click refresh

now if you select a color

you can see that the image changes

based on the color we choose

so this is how we can set an image for your product variations

so now you know how you can set the image for each variation

now here you can see that we have the same price for all variations

now what if you want to have a different price for each variation

it's very simple

so next let's see how we can set different prices for your variations

so to set different prices for each variation

just go back to your product page

and then go to variations

now let's say you want to change the price for this variation

just click on it

select the price

and then enter the new price here

so once you've set the price

just click update

and now if you go to our product

and click refresh

you can see that we now have a price range

now if we click here

and then select this variation

you can see that it has a price which we selected

okay so this is how we can set a different price for your variations

so now you know how you can add one set of variation to your product

but what if you want to add another set of variation to your product

like this

It's very easy

so let's go to the second part of this tutorial

where we see how we can add a second variation to your product

so to add another variation first let's create the attribute

so to create the attribute

just go to attributes

and now I'm going to create a size attribute

so let's enter that

and then click Add

now let's click size

and now we need to add all the options we want inside the size attribute

so I'm going to enter the first size here

and click Add

and it'll be added here

now let's add all the remaining sizes

so once you have added all the items you want inside the attribute

just go back by clicking here

and now we have created the size attribute

so once you created your attribute you can now add it to your product

so let's go to products

and then open the same product

and then click attributes

now click here

and in select the new attribute

which is size

and click add

now here you can select the sizes which are available for this product

so iam gonna click select all to select all the sizes

and then enable this option

and click save attributes

okay so now we have added the size attribute to our product

so once you've added the attribute

next let's create the variations based on these new attributes

so let's click variations

and here you can see that we have the variations which we created for the color attribute

now to create the variations for both color and size attribute

we need to first delete these variations

so to delete these variations

just click here

and then select delete all variations

then click go

and now all the variations which we created before will be deleted

and now we can create the variations

based on our new attributes

so to create the variation let's click here

and then select create variation from all attributes

and click go

now as you can see the variations have been created using both of our attributes

now once you created these variations

next you need to add the price

for all of your variations

so to add the price just click here

and then select set regular prices

and click go

now enter the price here

and click okay

so now we have set the price for all of these variations

now to save the changes

let's click update

and now if we go to our product

and click refresh

can see that we have two options for our products

we can now choose the product color

and the products size

so this is how we can add multiple variations to your products

so now you know how we can create these variations on your product

now instead of choosing from this drop-down menu

what if you want to display your variations like this

now these buttons will give your customers

an easier way to choose their option

so if you want to add buttons like these to your variations

you need to do four steps

the first step is to install a plugin in WordPress

so to install the plugin let's go to our WordPress dashboard

and then go to plugins

and click add new

now search for a plug-in called variation swatches

and you will get this plugin

now just click install

and click activate

okay so now the plug-in is installed

which means we can now go to step two

which is to choose the type of button you want

so to choose your button type

lets go to products

and click attributes

now first we'll choose the type for the color attribute

so let's go here

and then click Edit

and now you'll get this option called type

now as we want to show colors on our buttons

I'm going to select the type as color

so let's click here

and then select color

now click update to save the changes

so now we have set our button type

and now if we go to our products page

and click refresh

you can see that we now have buttons for the color option

but these buttons do not have any color

so let's go to step three which is to

set the color of these buttons

so to set the colors for the buttons

let's go back to wordpress

and then go back to attributes

now let's go inside color

and here you can see all the colors which we added before

now to set the color for this button

let's click on the color

and then click select color

and choose your color

now let's click update

and then go back

and do the same for these two colors

so we'll click here

set the color

and click update

so once you have set the colors

now if you go back to your product

and click refresh

you can see that we now have the colors

so now we have set the colors for these buttons

so next let's go to the final step which is to create the buttons for the size option

so to create the buttons for the size option

just go back to attributes

and then go to size

and click Edit

now just click here

and select the type as button

now if we click update

and then go here

and to refresh the page

you can see that we have now got the buttons for the size variation

so now you can choose your option by clicking on these buttons

we add this product to our cart

you can see that we now have the options we selected

so that's it guys this is how you can create variations

for your product on your ecommerce site

now if we go to your store

you can see that right now your products are displayed like this

but if you want to display your products in this way

where your customer can choose their variation directly from the store page

and then add it to their cart

you can do that by getting the premium version of the plugin

which is given in the link below this video

so this plugin also has a quick view option

lets you view the product without leaving the page

so that's it guys this is how you can add a variable product to your

e-commerce website now if you don't have an e-commerce site you can watch this

video to see how you can create your e-commerce site so next if you want to

get a domain and hosting for your website you can click here to get domain

and hosting