Variables Products and how to update them

Variable products and attributes are complicated and we’ll start with a disclaimer that you shouldn’t follow everything in here to the letter. You’ll need to adapt things depending on what plugins, product set-up and functionality you have on your own store. Our basic WooCommerce guide covered the different types of products you can have. In this guide we’ll take a more in-depth look at how to amend variable products – adding more variations.

Step 1: check your attributes

First up you need to have all the attributes defined. You’ll find these under the products / attributes menu. Before you go any further, make sure you have all the attributes and terms you need defined. We’ll use these at the next stage. Here’s a sample from Plug Plants by Post. This is the case study we’ll use to walk you through the updates.

Step 2: Add new attributes to your product

In this example we’re taking a product which has some simple variations already set up and adding some more. Here we start with 3 quantity variations with prices set for each.

The next step is to add more variations. We’ll add a new category of ‘plug plant strips’ and set up product variations based on the attributes Plug Plant Type and quantity. Not all types will be available in all quantities. The mature plug plants will be available in 3,9 and 24 – as currently. The strips will be available in quantities of 5,15 and 45, with different pricing.

In this case we only currently have 1 attribute set on the product for variations – quantity. We’ll need to add some more.

We’ll add new attribute of ‘plug plant type’ and choose the variations we want – in this case ‘Mature plug plant’ and ‘plug plant strip’. And then save them.

Next we’ll need to add the new quantities – we currently only have 3,9 and 24. So let’s edit the quantity variation (see highlighted arrow) and add the new ones:

Step 3: Generate the new variations

Let’s move to the Variations tab and see what’s currently there:

We want to set the existing variations to be only available for ‘mature plug plants – just change the dropdowns to do this, and save. The next step is to add the new variations for the plug strips – 5,15 and 45. The easiest way to do this is to add them manually. We can start by altering the ‘any quantity / any type’ and clicking edit to change the price. At any point you can ‘preview’ your changes from the right hand admin panel. We should end up with something like this:

Step 4: Ordering of attributes on the screen

Next make sure your attributes are in the right order. In this case the Plug Plant Type attribute was added below the Quantity. So elts jump back to attributes and drag Type to the top (drag from the 3 bars)

Step 5: Check your product categories

This step is going to depend on how your shop is set up. In this case we have product categories set for ‘Mature Plug Plants’ and ‘Plug Plant Strips’. So we’ll also have to now add this product to the Plug Plant Strips category so that it shows up in the right places on the storefront.

And there we have it! The product is now in a new category, with a new ‘strip’ variation and quantities

For this store we have also installed the YITH WooCommerce Product Add-ons & Extra Options plugin so that variations which are not available are marked when a selection is made. This has already been configured, so there are not changes required.

Conclusion

We hope this has been a useful deep dive into altering product variations. You should be able to use this in any standard WooCommerce store, although your use cases may differ slightly.

You’ve got your new online shop – but what do you do next?!

What’s this article about then?

We try to write guides to help you with the sites we’ve built for you. If you google ‘how to update a WooCommerce site’ you’ll likely end up with a list of technical articles telling you how to install WooCommerce and set it up from scratch. This guide does not do that. This guide talks you through the common tasks you, as a new online store manager, will need to carry out on at least an occasional basis.

Explaining the new Menu Items

When you log into your site you’ll see some extra menu options on the left hand side. WooCommerce, Products, Analytics and Marketing. First up a quick explanation of each of these before we dive into the detail!

WooCommerce

This is where the store is set up and configured – eg your shipping rates, payment gateways, taxes, and discount rules. But it’s also where you will find your Orders and your Customers!

Products

You guessed it … here’s where your products are configured, along with all the other things that define them such as tags, attributes, categories and brands (more on all of this later). It’s also where you’ll see product reviews.

Analytics

We love this tab! It’s where you’ll see your store’s performance and top selling products. If you like stats and graphs, you’ll love this!

Marketing

If you have any marketing plugins, such as MailChimp or TrustPilot. We won’t go into any more detail on this at the moment, as none of our WooCommerce sites leverage this yet. But when they do, help will appear here!

Ok. So that’s the new WooCommerce menu items explained. Let’s explore some of the more common tasks.

Order Processing

I’ve got an order!

Congratulations! What to do now though?

When a customer buys a product on your store you’ll get an email confirming the order. It’s then up to you to fulfil the order. If your product is ‘virtual’ eg an e-book, the order will have automatically completed. But it’s likely you don’t have a virtual product. In this case the order will be set to a ‘processing’ status in WordPress.

We’re not going to rewrite the WooCommerce user guides here, so to find out more about order statuses here’s the official guide: https://woocommerce.com/document/managing-orders/. What we will do though is replicate their very handy visual diagram!

WooCommerce Order Statuses

When you fulfil an order, you’ll need to update the status from processing to completed. Doing this will issue an ‘order completed’ email to the customer. So it’s an important step to take. Don’t forget to click ‘update’ in the order actions to save the status.

Other steps you may have to take might be to refund the order, cancel it or manually move an order on from ‘on hold’ to processing – for instance when you are awaiting a cheque for payment for an order.

Here’s how to refund an order: https://woocommerce.com/document/woocommerce-refunds/ The refund should be automatically processed by Stripe / Paypal when you refund the order.

And here’s a screenshot of where to find (and process) the refund

Clicking on the refund button will allow you to choose what item(s) to refund. Click on ‘refund via <your integrated payment provider> to process the refund.

Whilst we’re on that subject here’s a list of all the emails that come by default with WooCommerce. You’ll also get emails about any failed orders (eg invalid card details) You can read more about them here: https://woocommerce.com/document/managing-orders/view-edit-or-add-an-order/#order-notes

Order notes are quite useful, and you can read more about how they work here: https://woocommerce.com/document/managing-orders/view-edit-or-add-an-order/#order-notes

OK so that’s a quick overview of orders. Next up – products!

Explaining Different Types of Product

There are 4 basic types of products: simple, variable, grouped and external. A simple product is a thing that you buy with no variations for example a wireless mouse for your computer. There may be many different types of mice, but ultimately you are buying one type of mouse that comes ‘as is’. Contrast this with a T-Shirt which many come in many different sizes* and colours* – the t-shirt is a variable product. These are the most common.

* Sizes and colours here are known as product ‘attributes’.

Sometimes we may set up a ‘grouped’ product. The example WooCommerce use is a lounge suite. The suite can be set up as a group of products which can also be bought on their own. So for instance the suite might consist of a 3 seater sofa, an armchair and a footstool. This allows a customer to add multiple related items to their cart from one product page. If you did want to set up grouped products, three’s more on products in general here https://woocommerce.com/document/managing-products/ and on grouped products specifically here: https://woocommerce.com/document/managing-products/add-product/#adding-a-grouped-product

Product Attributes and Variable Products

Where we have variable products we can configure a list of attributes to control the variations. Let’s take the T Shirt example again. We have a Size attribute (XS, S, M, L, XL) and a Colour attribute (Red, Green, Blue). By assigning these 2 attributes to the product we can then generate product variations and allow the customer to pick a size and colour. Stock control, pricing and sales pricing can be set at variation level. In the store the customer is then asked to select size and colour before adding the T Short to their cart.

Downloadable Products

We can set a product (or indeed a variation of a product) to be ‘virtual’ and ‘downloadable’ to allow a customer to buy, say, an e-book or an audio recording. In such cases the order will automatically complete on payment and the customer will get a download link with their order. Take for instance a book. It could have a few variations: paperback, hardback, ebook (pdf) or ebook (epub). 2 variations would be virtual and the other 2 physical.

Editing or Adding a new Product

We’ll set up the products for you initially, but you’ll likely want to edit them and there are lots of things you can do here. This is the guide you want to read: https://woocommerce.com/document/managing-products/

One important thing to note though is that when adding a new product we would always recommend you duplicate an existing one with similar attributes.

We’re not going to just point you at the WooCommerce documentation and leave you to it though – but you should use it as your reference guide.

The Product Layout Explained

When you edit or add a product the screen is split into two. The central section is the main product data, and on the right hand side is an area where you can alter categories, tags, brands and photos.

Product Images

Please remember when you are updating product images to follow our image processing guide here: https://www.greystokewebdesign.co.uk/help/editing-media-on-wordpress/ A great image size to use for WooCommerce is a 600px x 600px square. Remember as well that your product needs to be centred in the image with some space around it for the best results, in our opinion at least!

The Main Product Data Section

Working down from the top on the main product data section you’ll find these sections:

First up is the product description – usually displayed under the product

Then comes the Yoast SEO block – here you set your keyphrase, meta description, slug and title. For more information see our SEO Quick Start Guide

Next is the product data. This is where you set the product type, shipping, any linked products, and add attributes to generate your variations, if you have them. Variable products will have the price set at variation level. Simple products have the price set at the ‘general’ tab. If we’ve set up any custom tabs for your products, such as a coverage calculator, then you’ll also be able to edit those here too.

One important tool for variable products is the bulk edit dropdown on the variations tab. This allows you to edit all variations at once – useful if you are applying a price increase, or putting products on sale.

Managing Product Reviews

One of the options under the Product tab is ‘Reviews’. Here you’ll be able to approve or unapprove, delete and reply to customer product reviews.

Managing Brands

If we’ve added brands to your store, then you can also manage brands under the product section. It’s important to remember SEO here and to make sure to set a good description and configure your Yoast options for each brand you add.

Analytics

The analytics tab lets you deep dive into your shop. You can see your store’s revenue, your best selling products and variations. You can compare performance against the previous period, and download reports.

Custom Layouts / Sitebuilder

We use the Astra Pro theme to build eCommerce sites because it allows us to customise pages. This is great for the customer experience, but as a new store manager this means you may have something else you need to edit or create.

You’ll find custom layouts under Astra / Sitebuilder. When we create them we’ll always give them meaningful names to help you identify the correct one for instance <Brand> Header or <Brand> Footer. Editing the content should then be easy enough. See our getting started guide on that here: https://www.greystokewebdesign.co.uk/help/wordpress-content-updates/

#Toptip: You may feel more comfortable with the ‘classic’ editor view in which case click on ‘switch to table view’ in the top right corner. You will certainly want to do this if you need to clone a custom layout.

If you want to create a new custom layout, for a new brand page, for example, then the best bet is to start by copying an existing one. Then ‘all’ you need to do is update the content and edit the Display and User Conditions (from the Astra button on the right hand column). In the example below we have a custom header showing on a specific category page, which can be selected from a dropdown.

A Recap

We’ve explained the new tabs you’ll see on the left hand admin menu and given you an overview of what they cover. We’ve gone into more detail on order processing and product editing. And we’ve linked to the key WooCommerce Support pages. It’s entirely possible for you to edit your own store and make all the day to day adjustments you need. But remember, we’re always on hand to help if you find it daunting to start with. And we can offer tuition to get you up and running on any particular process. We hope you found this guide useful!

If you’d like support on any aspect of your WooCommerce store, get in touch!