This guide will help you to understand:
- The difference between simple and variable products, and when to use them
- How the product pages in your WordPress dashboard map to the product web page
- How to add new products
- How to make changes to existing products.
Types of products
There are two main types of products that you will use; simple products and variable products. The difference is that for variable products, your customers will be required to select an option before they can add the item to their basket, such as colour or size (or both). A simple product has no options and a customer can add the product directly to their shopping cart. Figure 1 is an example of a simple product, as we don’t have any options to select before adding the product to cart.
Although the layout varies from shop to shop, the basic layout of a product page is shown in Figure 1. Each section is labelled so that as we start to add products through the WordPress Dashboard, we can see which section of the actual product web page we are editing.
Adding a new simple product
- From your WordPress Dashboard menu (on mobile, click the three lines in the top left hand corner of the page), click on products and then “Add New”.
- Figure 2 shows how each section maps to the product page that will be visible on your website once published. We will go through each section in turn, as well as the other options that need to be completed.
- Complete the Product Name and Short Description.
- Under the Product Data section, make sure that “Simple Product” is selected and enter the price of the product. If your item is on sale, enter the sale price here too (Figure 3).
- In the Product Data section, click on “Attributes”. You can see from Figure 1 that these attributes are displayed in tabular form on the product page. It’s important that these are entered correctly, as not only do they present your customers with key information in an easy to read way, they are also used for filtering purposes.
- Click on “Custom product attribute” and you will see a list drop down with Attributes. These are “Global Attributes” that are set in WooCommerce. We will learn to add new attributes at a global level later on.
- Select the first attribute for your product, and click “Add”.
- Click in the Value box, and you will see a dropdown menu with the options that you can select from. If the option isn’t here, click on “Add New”, enter the attribute and the OK.
- Keep adding attributes until your product is fully described, and then click “Save Attributes (Figure 5).
- Next, we’re going to add product images. Select the product image first; this will be the image that best represents your product as it will be shown in the Shop pages, as well as being the main image your customers see when clicking on each product. Click on “Set product image” and the WordPress media library will show (Figure 6).
- Use the “Upload Files” tab to navigate to your file, or drag the image and drop it on the window. Once your image has uploaded, make sure you have clicked on it to select it and click “Set Product Image.
- Repeat the process for your Product Gallery, but this time select multipe images to show in the gallery.
Selecting a category
- The final option we need to select before we can publish our new product is the category in which it belongs. Check the category, or add a new category.
- Double check your product details are entered correctly, and then hit “Publish”.
Adding a new variable product
- Follow the same steps as for a simple product, but rather than select simple product from the dropdown menu, select “Variable product”. You will see the options in this section change slightly.
- Again, click on attributes, and enter the product information, but this time you will see an additional checkboxe; “Used for Variations”.
- We’re going to make this product a variable product, where we ask our customers to choose the colour.
- Making sure that “Custom product attribute” is selected, click Add.
- Add the attribute name (Colour in this instance), and then add the options into the values box, separating them with a |. Check “Used for variations” and uncheck “Visible on product page”, then click Save (Figure 8).
- We’re now going to create the options for the product. Click on “Variations”, and then “Create variations from attributes”. Click “Go”.
- The list that appears will show all options for the product, based on the attributes we entered in the previous step (Figure 9).
- For each option, you can click on the value (for example, white) and enter product values specific to that attribute. You can change the price of different options, stock level and photo. If you make changes, make sure to click “Save Attribuets” before publishing or updating your product.
- Figure 10 shows the published product on the website. You can see that we now have a dropdown option that allows the user to select the colour before adding the product to their shopping cart.
Adding Global Attributes
Under the product section of the WooCommerce menu, click on “Attributes”. From here, you can add new Global Attributes that will show up when you’re adding attributes to new products. You can click on “Configure terms” to manage the different options that you have within that attribute (Figure 11).