How to Add a Variable Product to Your Ecommerce Website
Articles,  Blog

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 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 you
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
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
you 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 you
so once you have selected variable product we can now add our attribute to
this product so to add the attribute to this product
let’s go to attributes you
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
you 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 you
and then click save attributes you 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
you 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 $2.99 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
you and in drag and drop an image from your
computer you so once you’ve set the product image
just click publish you
and we can now see the product by clicking here
you now here you can see that we now have
the option to choose the color of a product
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
you 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
you and then click here to add an image
you a drag and drop an image from your
computer you and image will be set for this variation
you now in the same way we’ll add images for
these two variations so we’ll click here add image and then add image for this one you so once you have added the images just
click Save Changes you and then click update
you so now if we go to our product and then click refresh now if you select a color
you 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 you
and then go to variations you
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 you
so once you’ve set the price just click update
you and now if you go to our product
and click refresh you
you can see that we now have a price range now if we click here
you 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 look 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 you
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 you
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 in select create variation from all attributes and let 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 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

100 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *