How to Add Product Options in WooCommerce

The video below explains how to add variable products (and simple products) to your WooCommerce catalog (in WordPress).

As a Web Designer at EZ-NetTools I frequently teach customers how to maintain and edit their own catalog.

However, our human brains are subject to forget things, so I developed this tutorial teach how to add new products and product options.

This tutorial doesn’t assume any in-depth understanding so feel free to dive in.  If you have any questions let us know in the comments below…

Also, check our tutorial on Adding Categories in WooCommerce.

— Full Video Transcript —

Hi, my name is Steven Monson with EZ-NetTools.com and I’m going to show you how to add “variable products“ and “simple products“ to a WooCommerce catalog.

So, here’s an example of a “simple product” that we’re going to be putting in.

It will show you the “price” and allow you to “add to a cart”.

Looking For An Exciting Fantasy Adventure?

Meet your newest fandom.

…It has a description, etc.

Then I’m going to show you how to add a “Variable Product“.

These are things that might have different colors, or different sizes, for example.

I’m going to show you some of the various ways you can actually implement that and some of the common pitfalls that people oftentimes run into, as well, so you can hopefully avoid those.

Um, so yeah, without much further ado, I guess we’ll go ahead and get started…

Creating Simple Products

Okay once we’re in the backend of our WordPress account

all we need to do is go over here on the left to “Products” and then “Add New”.

Add Title and Image

Okay let’s name this product “Metal Tri-Plane” and we’re going to set the product image (I already have uploaded a photo of this metal tri-plane toy) and I’m going to set it as the product image.

See The Results

Now I could just leave it right there, and I’ll show you what happens…

I’m gonna publish and now I’m going to click “View Product”.

This is as basic as it gets right now.

It just says the name…(it’s not even categorized). It’s just has a picture… you know, pretty simple.

As basic as it gets…

I’m gonna hit “edit product” now and we’re gonna add a little bit more information.

Set Price and Description

I already have some information I’ve created earlier but first I’m gonna set a price:
We’ll say it’s $30.

…but we’re gonna have it on sale for $19.

Adding a “Sale Price” is often a good idea.

If I hit “update” and I’ve view the product again you’ll see that it shows the “regular price” and then it shows the “sale price” here next to it It’s looking good.

a couple more things that we can do though…

I’m going to add… some text I prepared earlier.

This is gonna be our “long description”.

Adding a description to your product.

and I’m going to make this a bullet list.

Right before each one I’m gonna hit “Enter” just to kind of make sure the bullets come in.

and… it looks good.

Add Short Description

and in this “Short Description”: I’m just gonna go ahead and say… “It’s great”.

Hit update.

and view the product.

…and you’ll see it says “It’s great”

up here, right next to the photo, in the short description and here’s our longer description right here below.

Manage Stock Inventory

The next thing I want to show you how to do, is to “manage stock”.

or in other words, basically tell the system “how many” you have of a specific item.

So to do that, we’re gonna click on “Inventory”

…we’re gonna click on “Manage Stock”.

WooCommerce can keep track of your inventory

In here, I’m just gonna say there are 50…

I’m going to hit “Update” and I’m gonna click on “View Product” again.

Here it says, there are “50” in stock.

Product will show how much inventory you have in stock. You turn this off under “WooCommerce” > “Settings”.

Manage Inventory Settings

Now, if you don’t want that to show up for some reason we can actually turn that
off in our “WooCommerce Settings”.

To do that, I’m going to go back to “Edit Product” and now I’m going to go to “WooCommerce“ > “Settings“.

from there I’m going to click on the “Products” tab and then click on “Inventory”.

From there, I’m just gonna scroll down to the very bottom.

Here it says: “Always show quantity remaining in stock i.e. 12 in stock”.

You could also have an only show how many are in stock if it’s below a certain number, like 2.

If you want to change… what that number is it’s right here: “Low stock threshold”.

Adding Product Dimentions (and why you’d want to do that)

Here’s a few other small things you can consider adding to your products.

Sometimes you might want to add things like the “weight” and the “dimensions”.

If I do that, I’m going to say that this weighs …we’ll say it was 16 oz.

and it’s going to be 8 by 10 by 6 inches high.

Shipping class… we’re not going to worry about that right now.

I’m gonna hit update now if I add dimensions it does give us an additional tab here that gives you a little bit of information about like the weight and dimensions of the product, and that can be useful for customers to see that.

But also, if you are using a shipping plugin that actually needs to know the dimensions of a product, this will allow it to work.

Like for example, maybe you have a calculator that actually calculates how much it would cost the send something through UPS or USPS.

Then, having that information is going to be critical for the plugin to work properly.

So anyway that’s pretty much everything you need to know for a “Simple Product”.

…you want to put it in a category you want to give it a name, you want to give it a description, you want to give it a photo, you may want to give it additional photos.

Once you’ve done that, you’re pretty much ready to go.  You can move on to your next product.

Variable Products (Products with Options)

Getting Started

The next thing I’d like to show you: is how to add a “Variable Product”.

Now, this is where it gets just a little bit more complicated.

I’m going to click on “Add New” and we’re going to make a product called “Cotton T-Shirt”.

Add Description

I have a little bit of text I’ve already written.  This is going to be a bullet list.

I’m just quickly going to make it one.  I’m hitting “Enter” after this just to make the bullets appear.

Add Image

and… let’s add a product image.  So I’m gonna hit “Set product image”.  I’m gonna grab this red t-shirt.

There we go.

Uploading Images

By the way, if you haven’t already uploaded photos you can do it really
easily by clicking on “Upload Files”, “Select Files” and then go to your desktop
(or wherever you have your image) and just click on it, and it will upload the image
like so…

Then you hit “Set Product Image” and you’re done.

Grabbing Multiple Images at Once

You can also add additional products down here.

I’m gonna click this one, this one, and this one.

Did you see what just happened?

I like… checked each one.

Press “Ctr” on your keyboard to select multiple photos at one time.

If I hold down “ctrl” I can actually grab multiple products at one time.

Hit “Add to Gallery”

then you’ll see all your products here.

If I hit “Publish” …well I’m gonna put this in a category then… going to hit “Publish”. Then I’m going to go up to “View Product” you’ll see we have a basic setup now with our Title, our Image, and our Multiple Images here…

that they can look through

Now the next thing we really need to do though… is set up the variables.
And that’s where the interesting parts come in.

To do this we’re gonna click this little drop down here: and choose “Variable Product”.

And now I’m gonna click on “Attributes”.

I’m gonna hit “Add”

and I’m gonna type in “Color”

and then… “Values” are going to be “Red”

then we use a little pipe symbol (|)

this is usually right above your “Enter” key on your keyboard.

Red, Blue, and Green…

Set up your attribute as show above and click “Save Attributes”.

and then I need to make sure that I check “Use For Variations”,
and then hit “Save Attributes”.

Great now I’m gonna click on “Variations”.

…and just because I added “attributes” doesn’t mean there are going to be “variations”.  I have to actually add them.

I could add them one at a time or I can click right here and say
“Create variations from all attributes”

Click “Create variation from all attributes” and “Go” to automatically create your variations.

(this is a good time saver).

it’ll give me a little warning but I’ll say: yes and that’s fine.

and now it’s made a “red”, “blue”, and “green” variation for this product.

if I was to just update this, and hit “View Product” you’re gonna see something interesting…

it says: “this product is currently out of stock or unavailable”, the reason why is because I haven’t actually set a “price” for my variations. If I go back down here and click on “Variations” you’ll see that I open this up (and you could just click anywhere in this bar to open them up.

You can also click “Expand” to expand all of them.

But you’ll notice that none of them have a price.

There’s a way There’s two ways I could do this:

I could just go into each one and say okay this is… $10 dollars, or maybe I’ll say $20, and this is $20, and this is $20.  And when there’s 3, that’s not too hard to do.

But sometimes you may have 10 or 15 product variations.

Iin that case, it would be just tedious to put in the price for every single thing.

So you can save time by going here to the top where it says “Add Variation” and then we have a whole bunch of options here I could “set regular price” (I already did that) so I’m gonna just “set the sale price” right here and hit go.

Select “Set Sale Price” and press “Go” to set to update every variation in one stroke!

I’m gonna type in 15 and hit “OK”.

and now you should see
that all of these 20, 15, 20, 15…

So the sale price has been set for all three variations

and you could do the same thing with “weight” and “dimensions” all kinds of you know various pieces of this.  But if I go ahead and hit “update” now and view the product, you’ll see that now I like cotton t-shirts there’s “$20”, “$15” (that’s the real price) and I can choose what color I want.

now one thing you’ll notice is this isn’t changing, you know, the picture over here on the left.

But I can change that by going back into “Edit Product” and go back to my “Variations” and I’m going to open up the red one, and I’m going to click this little
“icon for an image”.

then choose red here.

Then I’ll go to blue. I’m going to choose the blue one… and choose the green one and now if I hit “Update” and view my product…

Now when I changed the product, it’s going to actually reflect that as the main image (which is nice).

Okay, I’m going to go ahead and navigate away and actually then come right back to this product because I want to show how by default it just says “choose an option”.

“Choose an option” shows up if you don’t set a default option. This can slow down customer transactions.

Sometimes this is desirable and sometimes it’s not.

A lot of times you might want to have a default option, and to do that we’re going to go back into “edit product” and we’re going to scroll on down here find our variations tab, and you’ll see right here says “Default Form Values” so I’m gonna click here I’m gonna say “Red” what that means is instead of having a default of… nothing, and making the customer choose now if I click on “view product” you’ll see that “red” is the default attribute this is nice sometimes because it creates less
confusion for your customers.

So that’s how you choose a default.

Let me show you a couple more things.

If you want to (go back to variations)… If you want to… say, have different sale prices or manage stock you can do that as well. For example, I can say: I want to manage stock for each of these individual pieces I might have say 25 red shirts and maybe I have… 15 blue shirts and I will say that I have… 18 green shirts. Now, if I go back up here and update again to save and then click “view product” again you’ll see that it shows our 24 here for red 15 for blue and 18 for green. That can be really helpful because a lot of times that’s what’s going to happen in the real world you’re going to have different amounts of different shirts and this can help keep track of that for you.

It may be kind of obvious but you can, in fact, set prices differently depending on what variation people choose so I might actually put the red shirts on sale for
$10, and they may be different than the rest.

So I’m going to click on that “update” and hit “view product” and now you’ll see that our variation actually goes from $10 to $15 and the actual price will depend on what I choose, so I see green: it’s 15. blue: is 15 red: is 10 dollars.

So again, that’s just something you can change with the product variations.

Okay, there’s one more thing I want to teach you.

Under products, there’s a menu that says “attributes”.

A lot of times you will have product variations that are going to repeat themselves over and over again.

For example, you might have t-shirts that come in different sizes and maybe you sell 100 different kinds of shirts, and they all come in small, medium, large, and extra-large.

So if that happens, what you’ll do is in “attributes” you’ll say “size” and I’m going to just hit “Add Attribute” and now I’m going to “configure the terms”. So I have
made this top-level attribute of size and then each product… or each
attribute has its own set of… I guess, sub attributes (for lack of a better word
right now) but I’m gonna say “small” and then I’m gonna hit “add new” and I’m gonnasay “medium”, add new… and say “large”… add new size…

I’ll say extra-large. And here I have those sizes.

I can even (I believe I should be able to actually change their order if I want to, as well) so by going back to attributes that just kind of going back into “configure terms” I will actually have the ability to change the order of this which could be very helpful because sometimes you don’t want to be alphabetical you want to be by size so you’re gonna say small and then medium and then large and than extra-large.

That’s just a helpful thing.

You can only really do this in the “attributes” section. So if I do that I want to go back to my t-shirts I’m gonna go back to all products I’m going to click on cotton t-shirts and then I’m going to go to my variations and I already have colors but I’m going to add a new attribute and I’m gonna choose from a drop-down list. The reason why this exists is because I already went into attributes and created it so now I can just click size add and then I could click select all and it just automatically puts all my sizes in. I check “used for variations” and “save attributes”.

Now other than that I can go into variations here and let’s just do “create variations for all attributes”. I’m gonna hit “go”, say “ok” and I’m gonna say ok it’s going to actually create 12 different variations because we have colors and they also have sizes. So red can come in to all the different sizes and so could blue, and so can green. That looks pretty good.

Let’s “expand” we’ll just kind of take a look make sure everything looks ok and here’s our regular price and a sale price and you’ll notice that this one’s not set. So this is a good example of what I was talking about before where now we have a whole bunch of options and we don’t want to go through all of these
and just (you know) insert regular price one at a time so I’m going to go here
and I’m going to click “set sale prices”

“go” say “15”, “ok” and I’m also going to do the same thing with the regular price go these that can go through and make sure it looks ok “regular price” is fine. Looks
like the sale price did not get put in maybe I didn’t do it right so gotta go to set sale prices and click here and then hit go let me say 15 ok.

There we go.

Not sure why didn’t happen the first time but there it is that’s the sale price is set for all of them now we’re good to go I’m gonna update hit “view product” we’ll now see that we can choose a size and a color. Something you might have noticed is that when I click on green and blue and red it’s not actually changing the image over here and that has to do with the fact that I added more attributes and more variations if I go to variations here you’ll see that there’s you know red with small rather medium red of large etc and goes through the whole thing that way but you can actually add manual variations which is kind of helpful sometimes and I’ll show
you how that’s done by default the main drop-down says add variation so you just click go and it adds this sort of very generic variation: “any color”, “any size”. In this case what I want to do is I want to say: “blue”, ” any size” we want to change the image to be the blue shirt and I’m gonna hit “update”.

and view the product. Now if I choose red or blue… okay you’ll see that it’s…

actually NOT working, and I wanted to actually point this out because this trips people up sometimes.

If you don’t have a price set for an option it doesn’t really work. It doesn’t
become active. So I had to go back in here to “edit product” go to my variations
here’s my new one that says blue any size I need to make sure that I set the
price for it.

and we’ll say 20 and 15 (just like all the others) then I’m gonna go up here and hit “update”.

And now if I hit “view product” you’ll see that, there it is, it’s changed blue to red that kind of thing and so I’m just gonna quickly do that for the others you’re gonna add another variation say “any color” “red”, “any size” the variation it’s going to still be 20 and the price price will still be 15, and we’ll make sure it’s red. You might have seen that it kind of looked like it worked before that’s just because red is the default image but then let’s add one more for green any size make it the green tshirt and put our regular price of what did we say?… 20 and 15 update.

Now if I “view” my product you’ll see that we have blue, green, red… and we can choose any size we want.

and it’s looking pretty good.

This leads me to one more way I want to show you how you can add variations or rather a different approach you can take to adding variations.

So what I’m going to do is I’m going to delete everything except for green red and blue I’m just going through all of these extras just and hit remove okay okay and I’ll I’ll skip ahead for this in the final cut here.

okay so I’ve now removed everything except for these three variations which

is actually all I really need I have green red and blue of any size and you’ll see that they have the image they have their price because I’ve said any size I can really kind of cut down the amount of variations that I have and go just go to view product and see we have blue we have red we have green you have any size we want and it’s working we can add to the cart life is good so I’m going to go back here the idea is that you can instead of doing the add all variations trick which I showed you earlier sometimes it’s much simpler especially when you have more than one type of  option like size and color to just kind of do it manually and again you just do it by setting add variation go and you can use these any size or you could use the “any color” feature if you wanted to to make that work.

I do want to point out that this more simple structure where we only just have three different types of variations this works really well as long as you know your pricing is simple you don’t like charge different prices for different sizes or colors.

Then you can use this very simple approach.

If however you do like for example charge more for extra-large than you do for small or things like that you probably have to use a more robust system because if I want to change the colors and I want to change the size and have specific prices for a color in size then I really have to have like all twelve of those variations that existed earlier.

But this could be a much more simple approach of managing things as long as you don’t have a complicated pricing structure.

So I hope that was helpful…

My name is Steven Monson.

I am with EZ-NetTools.com. We do Web Hosting, Digital Marketing, some social media, and… I do web design.

So if you’re interested in getting your your own website and you don’t want to do it all on your own, or you need a little help Let us know.

You can always go to our website eznettools.com…

We have web design services that range from anywhere
from a low for $500, for some very basic things to fully custom designs, databases,
the whole works.

Those are usually probably mostly in this range.

Anyway, if you’re interested in getting a new web design company or you’re looking for someone to help you have social media, or SEO, or web design you know feel free to look us up on Google we’re: “ez-nettools”.

You can find us and read our reviews.  We have lots of satisfied customers all over the country.

…And even if you’re not interested in looking for services just give us a
“thumbs up” if you liked the video, if it was helpful.

If you have any questions or comments  feel free to leave them in the comments
below and you know if I get a chance I’ll be happy to answer them.

Have a great day!