Hey folks! This post isn’t intended for anything other than a reference on specific how-to items when it comes down to how to create & edit WooCommerce products on your WordPress/WooCommerce website. If you’re still trying to decide what eCommerce platform to use for your website, we recommend a little light reading on our blog of a brief comparison between platforms.
We also have a list of tutorial videos on our YouTube channel that you may find helpful as several others have (link).
Disclaimer: Most shops will never use any of the product types that we’ll show below aside from the simple & variable product. Some of the products we show will have multiple steps involved which makes them seem complex but when you look at each item & the control it gives the shop owner, you’ll see that options aren’t something to be afraid of & are good to have.
A simple product is can be thought of as just a thing with no variations. It might be a shirt that you only have in one size, type, & color, a service that you’re offering, a tool that you make, etc. Creating a simple product in WooCommerce is incredibly easy & we’ll use it as the foundation for this tutorial:
When you’re logged onto your website dashboard, hover over Products on the left & click Add New
On the next screen, you’ll see the product editing options that are available to you, start with the product name at the top. This is an important field for both your website’s SEO & for your potential customers – it should be clear from reading the name exactly what the product is both for a search engine & for a human.
After you’ve named your product, scroll down a bit until you see the Product Image on the right side, located between the Product Tags & the Product Gallery sections – set the main product image here.
Give your product image an img alt of the product name
Add in any additional product images that you feel are relevant to the product listing in the product gallery section directly below the product image – these will display, in most cases & depending on the theme you’re using, directly below the main product image.
Next, scroll down the page to locate the Product Data section in the middle of the screen, this is where you’ll set the price & other items on your new simple product.
Go ahead & set the new product’s price here & if you feel like setting an introductory sale to kick it off, you can set the sale price here as well & schedule an end date for it by clicking “Schedule” right beside the sale price. Nothing will be published at this point.
If you’re tracking inventory for this product, simply click the Inventory tab in the product data section & set it accordingly. At this point, you’re done with the product data section.
Now scroll all the way to the bottom of the page & enter in the most important information about your product or service in the Product short description field:
Any text that you enter into this field will be the first text that a visitor to your website will see on the product, it displays directly to the right of the product images, in most themes.
Now scroll back to the top of the product editing page & enter in any detailed information that a potential customer might need to know for your new product in the text editing box located below the product name field – this text displays on the publicly visible product below the product images & product short description:
Don’t forget to categorize your new product! This helps both search engines & your visitors to better understand your product or service. This can be done on the right side of the screen using this field:
You can also see some marginal SEO benefit setting your product tags – there are differing opinions on the SEO value of product tags but we’ve seen it in action, so we’re going based on experience.
Once you’ve made all of the edits that your product needs, you’re ready to publish it! You can do so by clicking the (usually) blue Publish button in the top right Publish box:
Note that for existing products, this will say “Update” rather than “Publish” & you must click it for your edits to take effect.
Next, click on the Attributes tab in the product data box:
This is where you’ll define what is used to create the variations – click on the “Add” button directly to the right of the dropdown that reads Custom product attribute & we’ll first set the shirt sizes here. Simply give this attribute a name, we’ll use “Size” here, then enter the attribute values, separating each with a pipe, which is the “|” character, so for our exercise, we’ll have Small | Medium | Large in our attributes field. Check the box that this attribute is used to create product variations & you can either choose to display or not display the name on the publicly visible product here by checking/unchecking the “Visible on product page” box, this won’t impact the variations actually being present:
After you finish with the shirt sizes, click Save attributes & then repeat the process for your shirt colors. For our exercise, we’re using “Red | Green | Blue | Yellow | Orange | Black | White” as the shirt color attributes:
Now that you’ve set your product attributes, you’re ready to actually create the variations that your website visitors will see when they view the product. Click on the Variations tab located directly below the Attributes tab & you’ll see a dropdown menu that says “Add variation” that you can click on to reveal something that will make your life much easier here – an option to create variations from all attributes:
When you select that option, you’ll be given a warning message that you can dismiss in most cases without too much fuss because it says that the most you can do at one time is 50 so unless your product is more complex than most, you’ll be fine to continue. Once your website adds all the variations based on the attributes you entered, it will tell you how many there are & for our exercise we had 21 variations set up. Now it’s time to edit each variation accordingly – you can hover over each variation panel to reveal controls for that panel such as removing it altogether, which removes that variation, dragging it to reorder the variations, or opening it to edit the variation – you can see we’re hovering over the medium red shirt panel in the below screenshot:
Click that panel to expand it & you’ll see that you can set the variant image, price, stock management, add a description, etc. It’s worth noting that you’re able to set a sale up on a specific product variation, say for instance you wanted to clear out all of your small white tees, you could drop the price here to encourage sales on it to climb to make more room for more popular items:
Since we only fully set up three of the variants in our example, that’s all that will be visible on the publicly visible product as you’ll see below. We also opted to use the variant images rather than the main product image, meaning that when someone selects that product variant, they’ll see the image that was set on that variant.
Main listing:
Variant on sale:
Variant at regular price:
And that’s how to set up variable products in WooCommerce!
Contact us for help on your Woo Site
Contact us for help on your Woo Site
You then have this type of product as the end result – obviously we’re just using these products as an example & your own naming of your individual products is likely to differ from these.
Contact us for help on your Woo Site
Once you’ve added the product, you’ll be able to define the terms such as the rate, the timeframe (every week, month, year, etc.), whether there’s a free trial, and other items:
Variable subscription products follow the process for a normal variable product setup, with the only difference being that there are recurring payments on a variable subscription product.
Simple!
Contact us for help on your Woo Site
Next, you’ll need to determine the general settings on your bookable product – for our purposes, we’re making it so that the customer is able to cancel the booking ahead of time using an arbitrary figure in this case of a month ahead of time. Also, we’ve made it so that the booking needs to be approved to ensure that our classroom doesn’t get overcrowded, which makes it so that the customer isn’t actually charged until the booking is approved. The booking duration is defined in our example as 1 day, meaning that the available slots for this booking will be subtracted from the day rather than the hour, week, etc.
Next, click on the Availability tab & set your booking availability. Here we’ve set it so that there are 10 slots available per day & they can be booked a year in advance. We’ve set available & unavailable ranges of M-F & S-S.
Next you’ll need to define your costs – we’re setting our cost at $40 per person.
Now we need to define that our workshop bookings include people or this won’t work. To do this, we need to check the “Has persons” box at the top & then set it correctly on the “Persons” tab that will appear:
You can see that we set the minimum to 1 person & the maximum available per order to 2 – we can’t have anyone being greedy with the class space, can we?
Now we need to set up that wreath kit that’s part of the class. In this case we’ve made it mandatory but you can set it however you need to set it. Resources can also be used on multiple bookable products, so if we were to have a multi-disciplined workshop at this florist shop that offered wreath making, bouquet tying, and simple flower cutting, these are all resources that we could make available for that other bookable product.
To set the wreath kit, we’ll need to check the “has resources” box at the top, then navigate to the resources tab that will appear & set it accordingly – we’ve set the wreath kit to $5 only in this example:
We’re pretty happy with our workshop listing now so we set the product image & publish the listing, here’s what our example workshop looks like when someone selects a booking for 2 people:
All they need to do then is check if the date they want to attend is available & make their booking, at which point the site owner or manager will approve or disapprove the booking & upon approval they will be charged for the booking, based on how we set up our example product.
Contact us for help on your Woo Site
Similarly, there’s an option while editing a product to copy the product to a new draft, located in the Publish box of the product editing page in the top right:
Contact us for help on your Woo SiteThe place that the magic happens on every WooCommerce product listing is in the Product Data section, so let’s go over what each tab in here is used for, using a mostly stock WooCommerce view, without some of the additional extensions we’ve discussed previously.
Primary Options
You’ll notice in the images below that there are two boxes to the right of the product type, “Virtual” & “Downloadable,” that determine how the product is handled.
- Virtual Product: Checking the virtual box will completely remove the shipping tab option from your product data section because you’re telling the software that you’re not shipping a physical product. This is useful for avoiding shipping rules issues.
- Downloadable Product: Checking the downloadable box will present another range of options on the General tab in the Product Data section that allow you to define the file that’s being downloaded, how many times the file can be downloaded using the token from a given transaction, and whether or not the download will expire. There may be reasons to limit the time a file is available & how many times the file can be downloaded, such as the file becoming obsolete over time or people sharing the link with others.
General Options
On a simple product, this is where you set the regular & sale pricing information & you can set whether it’s taxable or not.
On a variable product, the pricing fields disappear here because the price is set on each varation:
Inventory Options
If you need to maintain visibility on inventory of a product that you’re selling, this is where you would do that. Checking the Enable stock management at product level box will reveal the fields for your inventory management. Here you can input how many of an item you have, whether or not the item can be backordered (sold when it’s out of stock), when the system should notify you or your stock manager that you’re running low on the item, and whether you want to limit purchase of the item to one per customer, like panic-buying toilet paper. It’s worth noting that if you do allow backorders, you also have the option to notify the customer that the item is backordered when they purchase.
This is also where you can set the product’s SKU, which is usually an alphanumeric designator used to identify the product in a database. If you’re selling products that are manufactured by another company, they may require that their product SKU be present on your listing. If you have a lot of your own listings, such as with our own Premade Logos, setting a SKU helps clients & employees quickly identify the exact listing in communication.
Here we have the inventory options from a website that only sells digital items, so the website has no need to maintain inventory. You’ll notice that the enable stock management box is absent here.
Shipping Options
Shipping is a bit of a sticking point for eCommerce businesses & we published a blog post about what to charge for shipping … suffice it to say that your shipping options may be drastically different from another website owner’s & they’re based entirely on your business model & needs. At its core, though, you’ll see in the below image that you can define a product’s dimensions & weight, as well as define the shipping class. Why would you set this? Because if you want to pull live rates from any shipper, they need this data. They live & die by package dimensions & weight so without that they won’t even consider quoting a rate. If you do a little extra work to set this when you create a product it can save you & your customers a ton of frustration later on.
Shipping classes are set separately in WooCommerce by the site owner, so if you’ve set any up they’ll be available here.
Linked Products
(Upsells & Cross-Sells)
- Setting Upsells: An upsell is a product that displays on the product listing that the customer might be interested in as well. Think of an outfit that you might be selling in separate pieces on your website, you would set the other pieces on each listing as an upsell so the customer can see the entire outfit at once & add the pieces to their cart.
- Setting Cross-Sells: Cross-sells are exactly the same as upsells but they display in the cart, rather than on the product listing.
Advanced (Reviews & Notes)
If reviews are enabled on your site, the advanced tab shows a box to enable reviews on the product level, which is always checked by default.
You can also set a note to customers who purchase a specific product here – note that the Purchase Note section will support the use of HTML, for those of you who have a bit of coding knowledge.
Menu order is used to determine the order that products are displayed using the default settings in WooCommerce – it’s possible to override these settings, though, so it depends on how you’ve set up your own store. The way menu order works is that products with lower numbers are displayed before other products & negative numbers are allowed.
Facebook Options
If you have the free Facebook for WooCommerce extension installed on your site, you’ll have this tab here. It’s pretty self-explanatory, you can change the image, plain-text description (no HTML), & price for your listings in your Facebook shop.
Leave a Reply