Variable Products

Simple Variation Swatches

This WooCommerce extension allows to display color swatches or custom images instead of standard select drop-downs on variable product pages.

Check if a Product Has Variations

In this simple tutorial I’d like to show you easy ways to check whether a specific product has variations or not.

The first thing you need to understand here is that variations are also a custom post type product_variation and “variation posts” are always child in relation to “product posts”.

The second thing is that we have public (“Enabled” checkbox is checked) and private (“Enabled” checkbox is unchecked) variations:

Enabled (public) and private variations of WooCommerce products

The thing is that depending on whether your variation is public or private, you need to use different functions and class methods.

How to Create Product Variations Programmatically

There is also a tutorial on my blog about creating products programmatically where I slightly cover the product variations.

But there are still a couple moments I would like to discuss more thoroughly, I came to them when I was doing the variable products crossposting for my multisite crossposting plugin.

Delete all Product Variations Using REST API

Recently I have found this question on the internet and since I was doing exactly the same when developing WooCommerce functionality for my crossposting plugin, I decided to create a small guide for you.

The long story short we will need two REST API requests here:

  • To get all variations of a specific product,
  • To delete all of them in a single batch request.

I think the most clear way here would be to create a function for that, let’s say for example rudr_delete_all_variations() or something.

How to Gray-out Out of Stock Variations

In this tutorial we will try to make specific variations (out of stock ones) in the variations dropdown list not selectable:

how to grey out WooCommerce variations in the dropdown which are out of stock

By default WooCommerce allows to select a variation even if it is out of stock and as a result we have a frustrated customer who sees this sad smiley instead of an active “Add to cart” button:

example of out os stock variation in WooCommerce

Display Variations as Radio Buttons

In this tutorial I’d like to show you an example how to replace the default variation select dropdowns with radio buttons without plugins. Maybe for specific WooCommerce product attributes or product IDs only.

Something like that:

how to display WooCommerce variations as radio buttons

We’re going to do it without any plugins, though, you might think that it’d be better to display the “Color” attribute not as radio buttons but as color swatches. Like this:

how to display WooCommerce product variations as color swatches

In this case I would recommend you to take a look at my plugin which allows to do that.

But now let me describe a little bit more what we are about to do in this tutorial:

  • We are not going to change any WooCommerce HTML templates, that’s quite a rough method and I noticed that some plugin in WordPress plugin directory are doing that which I think is absolutely unnecessary.
  • I will show you a couple of conditions which will allow you to replace variations select dropdowns with radio buttons only for specific products or only for specific attributes.

Now let’s get started.

Display Product Variations Dropdown on the Shop Page

In this tutorial I am going to show how you can create your own variation dropdowns on the shop page (or any archive product page). When I’m saying “creating your own”, I mean it exactly, so we don’t just copy and paste a couple of hooks from single product pages.

Our another goal here is making sure that AJAX add to cart buttons are working great for our custom variation dropdowns as well.

Here on the screenshot I am showing what exactly we are going to create in this guide:

custom variations select dropdown on the shop page
Selecting a variation with two attributes on the Shop page and adding it to cart with AJAX.

And also If you would like something more interesting, like on the screenshot below, with variation swatches, then consider checking my variation swatches plugin.

display color swatches for product variations on the shop page