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

Channel: Website Learners

Views: 239,301

Keywords: variable product, variable product in woocommerce, How To Add Product Variations in WooCommerce, Adding varible product in Ecommerce, creating a variable product in Ecommerce, Ecommerce Website, Woocommerce, How to create a variable product in Ecommerce, Create a product in Ecommerce, How to add variable product in Woocommerce

Id: TaEbDsXuAc8

Length: 18min 16sec (1096 seconds)

Published: Mon Apr 08 2019