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
so thanks for watching I'll see you in the next video bye bye