Variable Products – Page 2

Some time ago, I published a tutorial about adding custom fields to products. I covered variable products there; however, I didn’t cover adding custom fields specifically to variations of variable WooCommerce products.

Now, I decided that it is time to dive deep into custom fields for variations as well, at least because recently I’ve been adding one to my Inventory Sync for WooCommerce plugin:

In this tutorial, we’ll learn how to work with WooCommerce’s custom fields for variations. Since the new WooCommerce product editor is still in development, I’ll show you examples of how to do it only for the classic product editor, which is widely in use, by the way.

When you visit online store websites, you can notice that sometimes product variations (often colors, but not only) could be displayed nicely on the shop and category pages.

Something like this:

But how can we do it on our store created with WooCommerce as well? The thing is that, by default, WooCommerce doesn’t have a feature that allows you to show variations on shop and category pages.

In this tutorial, I will show you how you can do that. More than that, I am going to show you multiple approaches:

• First, I will show you how to do it using Simple Variation Swatches for WooCommerce, which is my plugin. Specifically, we will also learn how to show color variations on the shop page.
• If you’re ready to dive into the code, I will also show you how to do it programmatically.

Ok, let’s dive into that.

Ok, I guess, a picture is worth a thousand words, so please take a look at the screenshot below, of what I am going to explain to you in this tutorial.

In this tutorial, I will show you an example of how you can configure your WooCommerce store to display variations as single products.

If you’re wondering how it may look on your store pages, below is a screenshot for you:

Soon, you will learn three ways how you can get product variations programmatically in your code. In the first and in the second way we are simply going to use the WC_Product object (or, to be more specific, the WC_Product_Variation object). The third way is going to be a little bit more interesting – I will show how to do it via the WooCommerce REST API.

Frankly, I remember, I wanted to publish this mini-guide a long time ago, I believe I didn’t because I found an amazing explanation on another website. But guess what – today that website doesn’t exist anymore. So, here we go.

If you were ever looking for a plugin that allows your WooCommerce store customers to select multiple variations at the same time, I have good news for you – you can easily do it without using any complicated plugins for WooCommerce.

The thing is that WooCommerce already has the feature you need; it is called “Group Products”. The thing is that this feature requires just a little bit of extra configuration. And that’s exactly what we’re going to do in this tutorial.

This is how it is going to look as a result:

In this tutorial, I will show you how you can create variation swatches programmatically without using any plugins. However, if you change your mind and decide to switch to a plugin, I would highly recommend the one I developed myself.

As an example, we’re going to create a color variation. So, if by default, the variations are displayed like a select dropdown:

But we will learn how to display them as color swatches. This is our goal for this tutorial: