Placeholder Image

Subtitles section Play video

  • 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