This WooCommerce extension allows to display color swatches or custom images instead of standard select drop-downs on variable product pages.
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.
In this tutorial we will try to make specific variations (out of stock ones) in the variations dropdown list not selectable:
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:
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:
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:
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.
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:
And also If you would like something more interesting, like on the screenshot below, with variation swatches, then consider checking my variation swatches plugin.
In this tutorial I will show you how to get a product or a product variation object in WooCommerce if you only know its SKU. It is easy-peasy when we get a product object by ID, we just have to use
wc_get_product() function, but we can not pass SKU to that function.
So I am going to show you three different ways how you can obtain a product object from SKU, we are going to do it both WooCommerce-way (with
WP_Product_Query and with
wc_get_product_id_by_sku() function) and WordPress-way (with
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.