Introduction to Product Variations
Hi and welcome to another episode of Peaced TV. In this week's video, we're going to be checking out how we can deal with variations and complex products using WooCommerce.
This week's WooCommerce video tutorial is sponsored by the Nitro theme for WordPress from Woo Rocket. This powerful theme is designed to give you everything you need to create a great-looking WooCommerce website. Now Nitro provides a feature-packed range of add-ons included to enhance your store with features like wish lists, popups, sales countdowns, and much more. But it also features some of the top commercial WordPress add-ons like Visual Composer. So for more information, click the link in the description below to take a look at Nitro in action for yourself.
So I've got my copy of WooCommerce ready installed and set up and what we're going to do in this video is I'm going to take you through step by step how we can deal with variations and attributes for your products. Now, this is something that's quite complicated, but WooCommerce makes it quite straightforward once you understand what it is you're doing. Now we're going to be using the Nitro theme as the backdrop to this so everything you see will be based upon that particular theme. The link to that is in the description below so you can go and purchase that if you'd like to sort of follow along exactly what we're doing. Now one of the things that I want to note right off the bat is the fact that Nitro inserts some additional plug-in, some additional functionality, and where that is included in the page, I'll tell you exactly what's going on there and just pinpoint the fact that that's not part of your normal WooCommerce installation, that's specific to working with the Nitro theme.
Converting a Simple Product to a Variable Product
So anyway, let's crack on and take a look at how we can start setting things up to deal with our variations and attributes for our products. So to start off with, I'm just going to jump into the product section and go to take a look at some previously created products. Now these are all installed as part of Nitro, but you can create a product, and I've covered that in the previous video. I'll put a link in the top corner and in the description below right now, so you can go and check it out how to create your first basic products. So what I'm going to do is I'm going to jump into a product that I've gone in and edited, which is this Mammoth J top. So I'm just going to go in there.
Everything has been set up now the way you normally expect it to be set up for a standard product. And you can see if we scroll down to the product data, we've got simple product settings on there. Now this is all geared to using WooCommerce. So nothing in here is based upon the Nitro theme or any of the other themes. This is standard WooCommerce configuration settings. So what we can do is we can change this from being a simple product or we can change it to being a variable product. Now a variable product gives us a load of other options that we can start working with. We can assign attributes, for example, colors and sizes and so on. And then we can deal with variations. So for example, you may have a blue top that's in small, medium, and large; a gray top that's in small and medium; and so on. The other thing you can do with this is you can set up and deal with the inventory on a per combination basis or per variation basis.
Creating and Configuring Global Product Attributes
But before we do any of that, we need to go through and set up some basic parameters. So if we take a look at attributes, you can see we've got a pretty simple interface. And you can see it says custom product attribute and we can add that in there. So if we click on the link, you can see there's already five that have been set up. So what I'm going to do is I'm going to take you over and show you where we set those up and what you can do, and then we'll jump back into this and see how we then start assigning those to the particular product.
So if we just jump over to the attribute section, so I'll just open that up in a new tab, you can see we've got the same five attributes that I just set up, and these are just groupings. So underneath this attribute group, you can have various different subsections. For example, your brand, you can have various different brands. Your size: small, medium, large, 8, 10, 12, 14, 16, or so on, whatever kind of sizing and information you need to provide in there. You just group them together. The other nice thing that's good about WooCommerce is the fact that you can put all the variations in there, but you don't need to use those on every product.
So if we take a look at this example on the size section and we look at the terms, you can see we've got 10, 12, 13, 14, 8, large, medium, small, and extra small. So we've got two completely different kind of size structures here, one that's geared towards women and one that's generally geared towards men. So what we can do is we can set those up, and we can pick and choose those on a per product basis. So I can come in and I can edit any of these if I want to, just by clicking on the configure terms, the little cog on the right-hand side. If I want to create a new attribute, I can do that quite easily, and we'll just call this new attribute just so I can show you how easy it is to do it. We can leave the slug, that will go through and automatically populate that. That's just the URL code that's going to be placed after your domain for people that are looking for items that have this attribute. Now the enable archives is specific to the Nitro theme so we're not going to worry about that, but the type and the default sort order are something you're going to get with WooCommerce as standard. What you are going to get with the Nitro theme though is some additional options under the type. By default, WooCommerce only has select and text, and select is basically a drop-down list of different attributes you assign to it, and text allows someone to insert the text they want to use themselves. Obviously Color Picker, Image Select, and Text Label and so on, like I said, they're specific to the Nitro theme. So if you want more functionality, that's available to you if you're using a theme like this. The custom ordering then, or the default sort order, you can see we've got some options in there. We can set it to be custom ordered. We can do it on a name, a name numeric, and a term ID. Now everything is drag and drop inside this particular field, so anywhere you're going and put these things in, if you choose custom ordering, you can easily just assign that to the order that you want by dragging and dropping those around to get exactly what you want. So it doesn't matter what order you put them in, you can easily assign those to any order you want.
So we'll click on add attribute. Once we've done that, you can see our new attribute is assigned. We've got no terms, and everything else is set up in there. So let's just come into the new attribute and let's just click to configure terms. And you can see it brings us into a box that's very similar. So we'll just call this attribute one. And again, we'll leave the slug and so on and parent and everything. I'm not going to worry about that. We'll say add new attribute. And then we'll do the same again to get a second attribute. So we'll call this attribute attribute two and hit add new attribute. And you can see we now have those set up for us. The order isn't necessarily the way we want it, but we won't worry about that for now. So you can see we've got everything set up the way we want. Now we can just jump back into the attribute section if you want to. And you can see all of those are now inserted in there for us.
So there's our new attributes and there's some previous ones we created. So there's the basics of creating those attributes or those things we can assign to a variable product.
Assigning Attributes to the Product
Let's just jump back into the products now and take a look at how we can use those and how everything is set up. So now that we've created some attributes, we can start assigning those to this product. So as I said, we need to make sure that the product data type is a variable product. Then just jump down to the attribute section first of all, before we can assign variations. If we click on variations, it tells us before we can do this, we need to assign some attributes to the product. So let's go to assign those attributes now. So you've got custom product attribute. We can click and dropdown, or we can add anything from there. So let's just say for example we want to deal with color first of all. So we'll click on add that. Once we've done that, that allows us then to choose exactly what we want to assign from the range of colors we have available. So we can select all, we can select none, or we can click and it'll give us a drop-down list of all the options that are available. So let's just go for black, let's go for green, and let's go for orange.
So we've now got three different colors assigned to this product. Say yes, we want to be visible on the product page. And yes, we want to use it for variations. So we'll check on that, and we'll save the attribute. So once that's been done, we can now assign a second attribute if we want to. So let's go and do that. So let's just say we're going to have size as well. So we click on Add Size. You can see that drops in a similar box for us underneath. We can check to see we want the variations, and for this, we're going to go for small, medium, and large. So you can see it's very quick and easy. We'll say save attributes on this. So that's now assigned two lots of attributes to this product.
Creating Product Variations from Attributes
So now if we jump over to variations, we can now start assigning the different variations to the product. So like I said, we may have blue in small, medium, large; we may have green in small and medium, and so on. So we can assign those combinations and then we can apply inventory to those different images and a whole range of different options for that. So let's just say we're going to add a variation. And you can see we've got the option create variations from all attributes. And depending upon the number of options or combinations you've got available, you could use this. But obviously, it's something to be careful of because if you start assigning lots of attributes with lots of potential variations to it, it can very quickly become a little unwieldy. But you could say create variations if you want from there, from all attributes and it'll do that for you. I'm going to do it manually so you can see exactly how it's done. So we say
add variation and we click on go. That will now say what variations you want to do. So you can see we've got a whole range of different options available to us from there, or we can just come in and customize the attributes ourselves. So we can say any colors and any size. So that's not really giving us anything to control. So let's just say we want the black, and we want this to have certain sizes. We say black large, and you can see if we expand this out now, we've got a whole range of different options available to us for that particular combination. So we can see black large. We can assign a different image to it. We can give it a different SKU code, so when it's being purchased, we know that that particular product has a stock control code that's assigned to it, that's specific to that color combination and that product combination. So if you were using that, then it's definitely recommended you put the SKU code in there.
You may find that you want to put this particular combination on sale. So you could put the regular price in there, and then you can put a sale price in there, and that would only apply to that particular combination. You can control the stock status, whether that's in stock or out of stock, the weight and the dimensions, especially if you're working with something with the shipping is using a weight and dimensions to actually calculate shipping, then it's worthwhile putting this information in there on a product combination basis. The shipping class: is it the same as the parent product, or is it a different shipping class? And you want to assign a different variation description to that particular product combination. So you can hit save changes once you've done that, and you can also specify what kind of product it is. So now we can go in and add another variation so we can say we wanted to have again black, we want this to be medium, do a third one, and we say black and we want this to be in large... Sorry, that's small. So we save those combinations and now we can quickly add another variation. So let's click on there, click on Go, and we'll say we want this one to be the green and this is available only in large. Again, if we want to assign the different codes to that we can in there. And we'll do one more, and we'll say go, and we'll have the orange. So we'll say orange is only available in large, and we'll say green is only available in medium. There we go. Hit save changes.
So we've now got a range of color combinations and size combinations. We can also specify what the default values for either of those drop-down lists is going to be. Now, I'm going to leave those empty because then the customer gets to choose exactly what they want when they're looking at a product. Now, speaking of looking at the products, let's jump over to the front end of the site and take a look at what this looks like with those variations being added into it and how they actually interact with a product and the way that the end user will see it when they're browsing your store.
Okay, so we've jumped over now to the front end of the site, and I've got one of the Nitro predefined themes already set up, and you can see it's pretty nice looking. And what this does is this shows up a different way of displaying the color combinations and the size combination to what you normally get with the standard WooCommerce installation, but what it's going to do is it's going to give you the same kind of functionality in a more visual way. So you can see where we've set up the black, the green, and the orange colors and we've got the large, medium, and small sizes. We can now go through and pick the color combination and the size combination that we want to work with. So let's just say for example, I click on green. That then will sub-filter the information down and only show me the ones that are available, so which would be medium, for example. But at the moment it tells me, "Sorry, this product is unavailable. Please choose a different combination." So let's go back and say clear the selection, choose black. You can see we've got small, medium, and large available. So let's click on medium on there. And again, we've got the "Sorry, this product combination is unavailable." So why is that? Well at the moment, we've set the basic information of being able to choose the colors and the size combinations, but we haven't given any parameters to it. So we haven't given any price or anything else to allow it to choose that combination and make a purchase.
Adding Price and Stock to Each Variation
So, let's just jump back into the admin section, back into the product, and let's go a look at how we can add that extra information in now so we can start picking and choosing the product and be able to go through the purchase process. So I've got the product back open in front of me and there's a lot of color combinations. So there's a couple of things I want to do. First of all, I want to go to Inventory and say enable stock management. Now, if you want to, you can put the stock quantity control in there, the overall amount. It's entirely up to you. What I'm going to do is jump down to the variations, and we're going to open these variations up, and we're going to assign the number of products and the prices and so on to each of these different color combinations. Cuz obviously when you have a variation like this, you can't just subtract from the overall stock. You're going to have to go through and let people see exactly what's in stock for any color combination and size combination.
So we can do that quite easy. You click on the drop-down arrow to expand all that information out again. We say we want to manage stock this time. And once we do that, that'll open up the stock quantity option. So in there, we'll just pop in 10. You can see we've got the variation price, which is a required field. So we need to put the price in there. So we'll say this is $19.99. If we want to put anything else in there we can do. We don't need to. We're just managing the stock quantity, managing the price of it, and specifying that it's in stock. All the rest of the things in there are pretty much optional. I would say, like I said earlier on, put the SKU code in if you're dealing with combinations because it just makes the whole process just that little bit easier keeping stock control. Okay, so there's the first one done. Let's just jump down now to the second one, the same kind of again. So we manage stock in there, we'll say we got 10 of those in stock. We want to put the price in, which is $19.99. But this option is on sale for $15.99 so we can see the difference in there. So let's go to the next one, and I'm just going to quickly go through and set all these up now. I'll pause the video and then we'll come back and take a look at this in action.
Okay, so I've gone and updated all of those now, so I'm going to hit save changes on it to save my attribute changes. Once that's finished, scroll back up the top of the page and hit update, so we update the overall product changes we've made.
Viewing the Final Product on the Storefront
So now let's just jump back over to the the front end of the site and let's take a little look at that in action now where we can start going through and purchasing the products. So we're back to the front end of the site. As you can see now, there's a couple of things have changed where I've refreshed this. Because we've assigned a product that has a discount to it, you can see we now have the option at the top telling us that this price ranges from $15.99 to $19.99, and we're getting a 21% discount on a potential product we can purchase.
So we can see that we can go through now and we can let people go and pick the color combination. They've been told there's a discount on some of the sizes, and there's also a price difference between those different options. So what we can do is if we come up and click on a color to start off with, we can click on that and we can see we've got the large, medium, and small all available. And once we click on the option we want, the price pops up, the quantity pops up, we can now add that to our cart.
If we click on the green one, for example, you can see the medium is the only option available, so we can choose that. Again, we can add that to our cart or we can clear our selection. Let's go and look at the orange one. That's only available in large, and you can see that's at the discounted price of $15.99. So all very quick and very easy, and we can go through, like I say, and we can control the entire process now of dealing with the stock on a per-item basis based upon the option that people choose or the variation that people choose.
Conclusion and Key Takeaways
So that really is all there is to dealing with variations inside WordPress and WooCommerce. It might seem daunting to start off with, but start with a simple combination like I've done with simple color and size, and you can add a third option in there, a fourth option and so on, and you can build up your variations quite quickly and easily. But take your time with it to start off with just so you get your head on exactly what's going on.
So that basically wraps up this video. I hope you've enjoyed it. I hope you found it useful and informative. If you did, please hit that subscribe button to be kept up to date with all the new content we add, and hit the like button on the video. It really does help. If you like the look of the Nitro theme that we've used throughout this video, please take a look at the description below where we've got a link you can go and take a look at that product and test it out in a lot more detail for yourselves. Well, until next time, take care.
