In this tutorial post we\’ll show you how to create variable and donation products in WooCommerce for WordPress. This is important for anyone selling products that go beyond the basic product types and nonprofit organizations that want a simple way to allow supporters to quickly contribute online.
We\’ll be walking you through the processes in text and video. This is the third post in a series of posts on WooCommerce settings.
As a recap, you can find the other post topics here:
- How to install and configure WooCommerce Settings for WordPress
- Creating Basic Products in WooCommerce
- Creating Variable Products and Multiple Option Donations in WooCommerce (this post)
- Creating Name Your Own Price Donation Options in WooCommerce
- Navigating the WooCommerce Checkout Process
- WooCommerce Order Review and Manual Edits
- WooCommerce Reporting Features
- How to Add Manual Orders to WooCommerce
- How to Process Refunds through WooCommerce
What are Variable and Donation Products in WooCommerce?
A variable product is a product that has options; something where the customer has a choice of features. The simplest example, the one we\’ll start with here and in the video, is the sale of a t-shirt.
T-shirts are usually sold in multiple sizes to accommodate a wider range of customers. Your standard size list is small, medium, and large. In some cases, vendors choose to sell larger items for higher prices because it could take more material to make the item, and thus cost the vendor more to make it. This is the perfect example for a variation – since one feature of the item might cost more than another, variations give us the ability to offer different priced items without having to create an entirely new product.
Variable donations work the same way. Rather than offering just one donation price – say $10, you give the donor multiple levels of donations, say $10, $25, $50, and $100. That way, you don\’t miss out on donors willing to give more than a product set at a lower amount, or price out donors who can\’t afford a set price at a higher amount.
In the video below, we\’ll cover creating variable products and donations in WooCommerce, and the section below the video explains the same information via text and images.
The Video Tutorial: Variable and Donation Products in WooCommerce
You can watch all our tutorial videos in HD, so remember to click the cogwheel when the video starts and use the highest resolution your computer will offer. If you have questions you can leave them here as a comment to the post or on the video in YouTube. We moderate both forums equally.
Create a Variable Product in WooCommerce
Switch from Simple to Variable
First thing you\’ll do is visit the product data section of the product and switch from a simple product to a variable product.
Right away, you\’ll notice price information drops off leaving only the SKU field visible in general settings. That\’s because price information will now be determined by the individual variations.
Adding and Customizing Global Attributes
Variations are controlled with attributes. An attribute is a unique categorizing feature of the product. Each attribute can hold multiple variations.
In our t-shirt example, our attribute is called SIZE, and our variations are the unique sizes offered; SMALL, MEDIUM, LARGE.
Attributes can be added in one of two ways:
- Globally
- At the individual product level
Global attributes are added in product settings and can be applied to any or all of your products throughout the site.
Individual product attributes are available only to the product in which you add those attributes. They will not be available to use on other products.
If you have an attribute that you will want to use on multiple products you\’ll want to use global attributes. Don\’t worry, you can still set individual prices per product.
To further illustrate the point, the t-shirt store is going to sell different types of t-shirts. Maybe there\’s one with a logo, one without, one with short sleeves and one with long sleeves. Those are 4 different products, but each one will offer the same size options – small, medium, and large. Rather than creating the same attribute (size) four times, one for each product, we\’ll create it just once as a global attribute and have it available for use across all our products.
Adding Global Attributes to Products
To add a global attribute navigate to the area of the admin menu called ATTRIBUTES. This is located as a sub-menu of the main Products Menu choice.
Once there, you\’ll have text boxes to create a new attribute. You\’ll fill out the name of the attribute and select the type. Text attributes are those which allow input, select boxes are those which you\’ll set and offer the user a choice of different options. We want SELECT.
For ordering, we\’ll leave custom order selected, that way the options will be listed in the order we create them.
The name of our global attribute is SIZE.
Once you\’ve saved your attribute you\’ll see it listed in the right side of the attributes panel. Click the cog icon to add variations.
Just like the attribute section, we have fields to enter here to create the individual variations. Add the name of the variation and any description that helps identify it. We\’re using SMALL, MEDIUM, and LARGE as individual variations, so you\’ll need to create three, one for each name above.
Choosing parent make the attribute fall underneath and belong to another variation. For example, if we wanted to choose adult or children\’s sizes we might put that there.
We could create children\’s small. In that case, we\’d first create the SMALL Variation. Then we\’d create the CHILDRENS SMALL variation and when doing so remember to select the PARENT drop down and choose SMALL. That way, Children\’s small will show up underneath SMALL.
That\’s outside the scope of this tutorial, but you can experiment with that on your own to see how many unique variations you can create.
Selecting Variations on Products
Once the global attributes and variations have been created you add them to your product through the product data area.
Navigate to your product and its product data meta box. Choose the ATTRIBUTES tab on the left side of the box. If you choose the select box next to the ADD button you\’ll see the attribute you just created – SIZE. Select that and click ADD.
One the attribute is added, a box will drop down showing you the available variations. You can add these one by one or add all at once.
Single Variations
To add a single variation as a choice just click inside the variation field box and start typing. It will then allow you to select the variations one by one.
Link All Variations
If you know you want to offer every variation in the attribute just click the button SELECT ALL VARIATION and they\’ll be added all at once.
Make sure to check the boxes for VISIBLE ON THE PRODUCT PAGE and USED FOR VARIATIONS. Those will allow us to edit prices and offer the options to the customer on the front-end of the site.
Remember to click the SAVE ATTRIBUTES button when you\’re done editing, otherwise you can lose your changes and have to start over again.
Customizing Variations
Once you\’ve added the attribute and chosen the available variations it\’s now time to actually customize the variations that will show up on the product. This is done through the VARIATIONS tab just underneath the attributes tab on the left side of the product data box.
Just like how we added attributes, we have the option to LINK ALL VARIATIONS or to add a single variation.
Adding all variations will add everything we have available at once, whereas adding single variations lets us go one by one.
Here, we know we want them all available so we click LINK ALL. This will bring in a variation for every variation of the attributes we wanted to make available. In this case – 3.
You\’ll get a status message warning asking if you really want to add all at once. This can be dangerous if you\’ve got dozens of variations – because once you add them getting rid of them is a manual, one by one, process.
Once the variations are added, you\’ll see a box for each one. Click the title bar of the box and it opens downward to reveal price, shipping, and other information. You now have the ability to alter that information on a variation by variation level.
Also, notice each variation gives you the ability to choose a thumbnail image. This is a really nice feature that allows the customer to get a good view of the variation when he or she chooses it on the product form.
The image below shows the way we\’ve setup our variable product with thumbnails for each variation.
Bulk Editing Variations
Note the ability to bulk edit the variations with the bulk edit select box.
This is great for products with many variations. Instead of editing each one separately, you can change features of all the variations with the bulk editor. Say, for example, your price of materials on making the product goes up 10% and you want to pass that onto the customer. Instead of going into each variation and changing the price, you use the bulk editor to change them all at once. Nice!
Variations on the Front-End
Remember to save all your changed and either publish the product or update existing products. Once you do, the new variations will show up on the front-end of the site and allow your customers to make a choice.
In your shop view catalog pages, now the product will have a \”SELECT OPTIONS\” button underneath it rather than \”add to cart\” because a variable product demands that an option be made (here one must choose t-shirt size), rather than just adding a single product to a cart.
Create a Donation Product in WooCommerce
Creating a variable donation product is no different from any other variable product, except instead of dealing with size of t-shirt we\’re dealing with size of the donation; varying dollar amounts.
Donation Variations and Attributes
In this example, we\’ll be adding the attribute locally, rather than creating it globally, since we\’ll only have one donation product for our entire shop.
In the attributes panel of the product data box we choose to ADD an attribute. We name it DONATION LEVEL and select the boxes for make visible on the product page and available for variations.
The variations are entered in the VALUE(S) box that opens up for us to the right. To separate options, we use the pipe character ( | )which looks like a straight up and down line. On most keyboards it is created by pressing SHIFT and the backslash button (that\’s the one just above the enter or return key). So, pressing SHIFT + \\ gives you this: |.
Though not required, I like to put each option on its own line – it\’s easier to read that way. When we save it, WooCommerce will mash them altogether for us.
In our example, we\’re using 3 donation levels, and for each one we put more information than we did with the regular product type. We do this to show the donor what the name and amount of donation will be directly in the select box.
Our donation levels used are:
- Friend – $25 |
- Advocate – $100 |
- Benefactor – $250 |
Notice the usage of the pipe character after each one.
When done, remember to save the attributes and head back over to the variations tab.
Once there, we\’ll LINK ALL variations.
Now we have three boxes to work with and each one has a name and price. We click into each one and set the price equal to the donation level. The image below shows our settings for each.
Using Virtual Products
Since donations are virtual products and not physical products to be shipped we can select the virtual product check box.
That removes all the shipping options and helps clean up the variation information area. Don\’t worry about the \”downloadable\” box – it\’s not relevant here and we\’ll cover it in a future tutorial.
Selecting a Default Variation
Sometimes when creating donation pages we want to suggest a donation level for our potential donors, rather than just let them choose. You see this often on websites with price option tables – where one is pre-selected for you.
You can do that same thing here by selecting a default option in the DEFAULTS? option select box at the bottom left of the variation editing box. Here, we chose the middle option as a suggestion.
Donation Variations on Front-End
You can see that the variations show up on the front-end, and this time instead of it asking the donor to choose a level – one is suggested for him. Of course, he or she could change the level or clear it out altogether and start over.
Summary
By adding variable and donation products in WooCommerce you can offer customers more choices, thereby making your store more user-friendly.
Make sure to stay tuned for our next tutorial in the e-commerce series where we discuss creating donation products where the user/donor can enter his own price. This will really open up your store to new possibilities!