Custom fields for WooCommerce variations

In this article, we’ll look at how to add WooCommerce custom fields for variations. Custom fields can mean either:

• Fields to display additional data about a variation, or
• Fields to accept user input for customising the product variation

We’ll look at both options.

Adding WooCommerce custom fields for variations

I wrote extensively about adding custom fields to WooCommerce products here. In this article, we’ll focus specifically on adding custom fields to variations.

Let’s take a look at an example product. We’ll imagine that we’re selling clothing and we would like to provide specific sizing information about each variation. Of course, you can use this to display any kind of additional product data.

When the customer chooses a different variation, the size information changes.

You can view the demo product here.

Why do we need custom fields for variations?

Why not just add one big size table for all variations? We could do this then expect the user to find the data for the variation that they’re interested in.

But this would be clumsy and not helpful to the customer. Much better to give them exactly the information they need.

Custom fields for multiple variations

Note the second table in the screenshot above? It shows some care instructions for the garment. In this case, the custom field is added to multiple variations. We’ll also look at how to achieve this.

How to add custom data fields to WooCommerce variations

To add our custom fields, we’ll need the WooCommerce Product Add-Ons Ultimate plugin. This gives us the ability to add all kinds of custom field to WooCommerce products.

Once you’ve downloaded and installed the plugin, you can start adding your custom fields.

Step One: add a new field

Let’s assume our product variations are already set up. To add our variation-specific custom fields, go to the Product Add-Ons tab in the Product data section.

Click ‘Add Group’ then ‘Add Field’. In the ‘Field Type’ setting, choose ‘Information’.

In the screenshot above, you can see the Product Add-Ons panel. We’ve selected ‘Information’ as the field type and entered a label for the field.

Step two: add data rows

The Information field allows us to create a table of data for each variation. Click the ‘Add Row’ button to add a new row, then enter a label and data in each field.

Step three: specify the variation

Finally, you can select the variation(s) in the ‘Variations’ field. Choose the variations that you’d like this field to display for.

Note that you can choose more than one variation here if you’d like to display the custom field for multiple variations.

Step four: repeat

Finally, you just need to repeat these steps for any other custom fields you want to add for different variations. The Add-Ons Ultimate plugin allows you to duplicate fields – just click ‘Copy’ at the top of the field you want to duplicate.

This makes it much easier to create multiple fields for all your variations.

On the front end, the product will now look like this.

When the user changes the variation, the custom field will change too.

Adding WooCommerce custom fields to multiple variations

Now let’s look at adding the same custom field to multiple variations. This isn’t particularly different.

In our example product, we created a care instruction table, complete with icons. We’ll display this for all variations:

You can see in the screenshot above that we’ve added this field to multiple variations. You can add custom fields to as many or as few variations as you like.

If you want to display the field for all variations, just leave the ‘Variations’ field empty.

How to add custom input fields to WooCommerce variations

Add-Ons Ultimate allows you to add several input fields to WooCommerce variations, including:

• Calculation fields
• Checkbox fields
• Checkbox groups
• Datepickers
• Image swatches
• Name your price fields
• Number fields
• Child products
• Radio groups
• Select / dropdowns
• Text and textarea fields

Let’s have a look at another example, this time for a custom teeshirt that the user can personalise with their name and an image. You can see the demo product here.

Adding a text field to a WooCommerce variation

Let’s look at how to add a text field to WooCommerce variations. In our example, this is for a custom slogan or name that will get printed on the teeshirt.

Just as above, click ‘Add Field’. Then choose ‘Text’ as the field type:

Text field parameters

Note that there are several parameters that you can use to refine your text field, including:

• Setting the field to be required
• Specifying a minimum and/or maximum number of characters
• Charging a cost per character
• Allowing some free characters
• Only allowing alphanumeric characters
• Only charging for alphanumeric characters

Again, as with the information field above, you can choose whether to display this field for one, some or all variations.

Product Add-Ons Ultimate plugin

Hopefully this has been a useful article on how to add custom fields to WooCommerce variations. All you need is the Add-Ons Ultimate plugin: