Way back in another age (at least if you count using internet years), I wrote about setting up variable cost products in WooCommerce. We’re talking ANCIENT HISTORY – 2012. That post existed, in various states, on an old blogspot site, on my website design area of this site, and elsewhere.
To make a long story short, those are all gone, but the link remains one of the highest-sought-after pages on my site. So I thought I’d do everyone a favor and revisit this topic. I also thought it was time because, back in 2012, I’d only set up a few basic installations for my clients. But for the last year, Love Plus Flour Bakery one of my biggest clients (who also happens to be my daughter) uses them constantly, so I have much more experience under my belt.
The goal, just to be clear, is to set up a product in WooCommerce (the popular ecommerce plugin for WordPress) that has different prices based on variations – such as size, quantity, color, etc.
I want to offer a high-level outline first, so you know where I’m going with this. Then I’ll dig into the step-by-step with pictures. The process is actually quite simple, if slightly un-intuitive:
- Set up your attributes first (color, size, flavor, etc).
Make them general enough that you can re-use them for multiple products. You don’t need “tshirt color” and “hat color” if they’re basically the same colors.
Also note that even if you have 5 colors of tshirts but only 3 colors of hats, you can use a single attribute. - Set up the attribute “terms”. These are the actual colors, flavors, sizes, etc.
- NOW set up (or edit) your product.
- Add the attribute or attributes.
- Add the variations
- Set the custom aspects (price, picture, description, etc) for each variation
That’s it! I should note that this is the optimal process. You actually CAN create attributes on the fly, but I’ll leave that technique for another blog post.
Our Example – Cookies!
In this case, I’m going to use the example of cookies. I want to sell cookies individually (for $1.00 each) or by the dozen (for $10).
I’m going to sell sugar cookies, raisin oatmeal cookies, and chocolate chip cookies. Raisin oatmeal is actually a more expensive set of ingredients, so those cookies will go for $1.25 and $12, respectively.
Finally, I need my customers to tell me if they want their order ready for pickup on Monday, Wednesday, or Friday. That doesn’t affect price, but I need to know so I have my work orders set up.
That may be kind of hard to visualize, so here it is in table form:
Flavor | Single | Dozen | Delivery |
---|---|---|---|
Sugar | $1.00 | $10.00 | (any) |
Chocolate Chip | $1.00 | $10.00 | (any) |
Oatmeal Raisin | $1.25 | $12.00 | (any) |
Set up your attributes
- In your WordPress admin panel, go to “Products” and click “Attributes”
- On the left side of the screen, add a friendly name (that’s what customers will see) and a “slug” (a single word, or words connected by hyphens or underscores)
- Click “add attribute”
- Repeat until all your attributes are created.
Set up the attribute “terms”
- Once you have your attribute(s) created, on the right side find your new attribute and click “Configure Terms”
- On the left side of the new screen, type the friendly name (that’s what customers will see) and a “slug” for your first term.
- Repeat until you have all the terms you need.
NOTE: You can *always* go back and add more terms later, although it’s a bit of work. I’ll cover that in another post.
Create your product
- (Just like you would for any other product), go to Products, Add New
- Create your title, description, product category, etc.
- Set your default product image (the one that will show before the customer has selected any variations)
- Add your product gallery if you have one
- etc.
Add the attribute(s)
- Scroll down to the “product data” area and select “Variable product” from the drop-down
- Click Attributes from the left side list under “product data”
- Find the drop-down that says “custom product attribute”
- Pick your attribute from the list and click “Add”
- Click in the box marked “Value(s)” and you’ll see the list of terms you created in the previous step.
- Pick the terms you want for THIS product.NOTE: That’s what I meant when I said you didn’t have to use ALL the terms. If your tshirts use 5 colors, but hats only use 3, then for “color” you’ll only select the 3 you need when setting up hats as a variable product.
- Now, AND THIS IS IMPORTANT, make sure you click “use for variations” for each of the attributes.
- Finally (at least for this step), click “Save attributes”
Add the variations
Before we add variations, you have a choice to make. Your two options are to automatically create all possible combinations, to manually pick which variations you want.
Let’s say your choices werecookie quantity and cookie flavor. You really DO need a different variations for each combination.
But if your choices were cookie flavor and delivery day, then you don’t need variations for “sugar cookie, Monday”, “sugar cookie wednesday”, “sugar cookie Friday”, and so on. So you might be better off creating them manually.
Since the option create all possible combinations is easy (one click), I’m going to skip it and show you how to pick manually.
- From that left-hand list, click “Variations”
- The drop-down will say “Add Variation”. Oddly enough, this is what you want. Click “Go”
- You’ll see a dropdown for each of the attributes you added in the previous step.
- Pick the combination for THIS particular variation
- Keep adding variations and setting combinations until you’re done
NOTE: If you want a specific menu choice to show up by default, the row of values along the top (labeled “Default Form Values”) is how you do that.
Set the custom aspects for each variation
- Hover your mouse over the first variation. You’ll see a red word “Remove” appear to the right, along with a down-arrow and a hamburger menu (hey, that’s what it’s called. I don’t make the rules.)
- Click the down-arrow and this entry will expand to show a whole set of options.
While there are A LOT of options to set, for today I’m focusing on the product image and the regular price. - Set the regular price for this item in the box labeled – surprise, surprise – “regular price”
- Set the image for this variation by clicking the blue… um… “thing” that’s supposed to be a placeholder image
- Repeat this for each of your variations
- Click “Save Changes” when you’re done
Finish Up
Do whatever else needs to be done, and publish your new product.
The Customer’s-Eye View
Before the customer has selected any options:
If the customer chooses a dozen chocolate chip cookies
If the customer chooses 3 oatmeal raisin cookies