Creating Variable Products in Woocommerce
Hi! In this e-session we’ll be looking at how to add variations to your Woocommerce products. A variation is a product that in some way is customizable by the visitor when they’re in your e-store.
If you’re at the stage of watching a video like this, then probably up ‘til now the only products that you’ve dealt with have been what’s called a simple product. A variable product is a different type of product and yeah, I’ll show you the process now of setting that up.
Anyway, so you can see that we’re in Woocommerce now. The buttons and controls are all gonna be very familiar to you if you’ve used this software before. We do have a product here in front of us. It’s a T-shirt and you can see that it’s got a price and a description and so on and so forth. All the usual stuff! What we’ll do is we’ll head north and go to our Edit Product button and we’ll click on that and that’s of course going to take us into the backend where we’re able to edit the details on the product. And as the screen renders…
So, what we’re gonna be doing is we’re gonna be scrolling down to our Product Data section and you would be familiar with this section already. You can see that there’s a price here in the Regular Price section. And as I was talking about just a second ago, a simple product, that’s what this product is. I’ll just open that up one more time. OK. So it’s a simple product because you can see it’s a T-shirt, and unusually enough for a T-shirt, you can’t choose a size or a colour or anything like that.
So what we’ll do is we’ll convert this into a variable product. OK. You can see that the price is gone, which is part of the logic. You’ll understand that in the next minute also. And what we’re gonna be doing is we’ll allow people to buy this T-shirt in different sizes. Now, when you have a product, an attribute of a product would be a quality of that product. So if a T-shirt is red or a T-shirt is blue, then that means colour is an attribute. If a T-shirt can be in the sizes Small, Medium or Large, then that means size is an attribute.
So we do have a menu tab right here on the left-hand side. It says Attributes. So that’s what we’re gonna create first. Remember that we’re gonna be creating this T-shirt so that people are able to pick particular sizes. So we’re gonna be adding a size attribute. OK? So we just click on this button, the blue one over here that says Add, ‘cause I wanna add an attribute and the name of the attribute in this case is Size. And for the particular values it’s asking you for here is what values should be selectable from the drop-down that we’re gonna have on our product screen.
It does give you a little bit of a hint here as to how it’s expecting to see these. It’s expecting that each value would be separated by something called a pipe, which somewhere on your keyboard is that straight up and down line. So I’m just gonna enter some sizes. Small and then a pipe, and then Medium, and then a pipe, and then Large… OK? And that’s enough. Alright.
So there’s two checkboxes over here that probably should always be checked anyway. “Visible on the product page” means that this attribute is selectable by the visitor and “Use of variations”….in this case that’s yes because we do want to have different product variations for this attribute. And this probably will all become a little bit more clear in the next minute also. Alright. So we do have a button over here that says “Save Attributes”. I’m gonna click on that and the screen’s gonna update a little bit. And it looks like it’s locked in. Alright.
So the next thing that we’re gonna be doing is we’re gonna be heading over to our Variations tab and there’s a few ways that you can do what I’m about to do. I just like to click the button that says Link all variations and it’s gonna ask me “Are you sure you wanna do that?” and we’re just gonna say yes. So basically what this is gonna do is it’s gonna give us a separate area for product data for each of the different sizes that we’ve created. Alright.
So you can see here that we’ve got Small and we’ve got Medium and we’ve got Large. And the idea is that you can…it might not be quite so applicable with T-shirts, but if you have products that come in different sizes, they might have different weights which should affect your shipping prices and there’s other things you can do here as well.
What we will do is just for the fun of it we’ll set different prices for each of the sizes. So Small is $10 and Medium is $15 and a Large is $20. And that’s really it. So, if we now click on Update and we wait for the screen to refresh in here and then we just pop up back to our front-end, click Refresh. Alright. So you can see we’ve still got our product here, but now we’ve got a little box that says “Size”. You’ll notice that the price is now $10 to $20 because remember a Small T-shirt was $10 and a Large T-shirt was $20.
We’ve got the selection box here and if I select one of these sizes, you’ll see that we’ve got a price here which is $10. OK? That’s for the Small, and if I go to the Large, you can see that the price is automatically updated to $20, which is exactly what we’re expecting to happen.
And the rest of this purchasing process is exactly the same as ordinarily. You just click Add To Cart, it will take you to the cart and the checkout and the cart and the checkout are gonna both reflect that in this case a Large T-shirt was selected and that the visitor must pay $20. And it’s also gonna be reflected in the emails that are sent to you by Woocommerce, notifying you of the order having come in and it needing processing.
Anyway, I hope that was useful too, and yes, stick around for the next e-session.