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.

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.

Get Product (or Variation) by SKU

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 WP_Query).

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.

How to Display Variations with Color (or Size) Buttons

In this tutorial I will show how you can change the way the variation selection is working on the product page in WooCommerce.

We all know that by default the variations are displayed like a select dropdown.

default variation switcher on WooCommerce product page
Wouldn’t it be better to use color swatches here?

But today we will learn how to display them as color swatches. If you would like to display them as size buttons or custom images, you can do it with my plugin.

This is our goal for this tutorial:

WooCommerce display color variations with buttons

How to Add Custom Fields to Product Variations

Long time ago I published a tutorial where I described how to add custom fields to WooCommerce products. Now it is time to dive deep into product variations and add a couple settings fields there as well.

Variation Change JavaScript Events

Sometimes you need to do some stuff when your WooCommerce product variation has been changed. Maybe only for a specific variation.

Primarily there are two JavaScript events that are triggered after a variation change.