How to set up custom fields for WooCommerce variations

The phrase WooCommerce custom fields for variations can be used interchangeably to refer to both product options and custom fields. Keep reading to find out how to add extra fields to WooCommerce products, AND how to add extra data to product variations.

When you have a WooCommerce store, you owe it to your customers to provide them with extra options, and additional information about each option. This is particularly important in e-commerce because, unlike in a traditional store, online customers cannot try the goods out for themselves.

While WooCommerce lets you create product variations, these are pretty basic. They only appear as dropdowns and it's not possible to add other field types. For example, you can't add checkboxes or text area custom input fields. Apart from a simple variation description, there's also no way to add extra data to product variations.

Fortunately, there's a solution. Depending on what sort of custom fields you want to add to your product variations, there are some excellent WooCommerce plugins to choose from.

What are the two types of WooCommerce custom fields for variations?

Before we start, let's clarify exactly what is a WooCommerce custom field for variations. It can be confusing because people often use this term to mean two different things:

1. Adding extra fields or options to a product which customers can select fromTechnically, extra product options are not custom fields because this means something else in WordPress terms. However, for practical purposes, a product option is a custom field type which appears on a product for customers to fill in. As a result, it makes sense to refer to it as a "custom field". For example, this might be extra checkboxes, a text box or text area that customers can type in, or another custom field type.
2. Adding additional data to specific variationsThis is the literal definition of WordPress custom fields. A custom field is a way to add extra data to a post. By default, you can add custom fields to WooCommerce products but not individual product variations. However, there are plugins to help with this.

The phrase "WooCommerce custom fields for variation" can be used interchangeably to refer to both product options and custom fields. As a result, in this article I will tell you how to achieve both. That way, you will find the information you need - whatever you're looking for!

Part 1: Adding custom fields for advanced product options (beyond variations)

In part 1, I'll show you how to add custom option fields to standard WooCommerce products. These allow users to customize the product in a way that is much more flexible than using variations.

The problem with product variations is that they only ever appear as dropdown lists. For example, imagine that you offer a choice of sizes and colors. Customers must select their size from one dropdown and their preferred color from another. That creates a fairly boring user experience. Even worse, there's no way for add more flexible custom field types to variations such as text input or file upload fields.

Instead of (or in addition to) using variable products, you can add more custom options using the WooCommerce Product Options plugin. This comes with a huge range of custom field types including clickable images, checkboxes, dropdowns, radio buttons, text and paragraph fields, and more.

You can use WooCommerce Product Options to add all the custom field options to your products. This would mean adding your products as simple products rather than variable products. Alternatively, use variations to add dropdown options, and then use WooCommerce Product Options to add any additional custom fields that you require.

How to add selectable custom fields to WooCommerce products and variations

Now we know how WooCommerce Product Options can help with adding custom field options to your products and variations, let's learn how to set it up.

1. Install WooCommerce Product Options on your WordPress site.
2. In the WordPress admin, go to Products → Product Options.
3. Either edit the default product option group, or add a new one. You can create as many groups as you like, each containing a different set of custom product option fields.
4. Use the visibility options to show/hide the custom fields on specific products or categories, or leave this blank to show them on all products.
5. Add as many options/custom fields as you like to the group.
6. Decide whether to use the advanced settings, such as conditionally showing and hiding custom fields depending on which other options are selected. You can also add rules, such as a minimum and maximum number of each custom field which can be selected.
7. Create as many custom field option groups as you need, each containing different new fields.

You can now visit a product page on your store to see the custom fields you have added. Pretend to be a customer and test what happens when you select different options. Add them to your card, and you will see the conditional fields in the checkout and cart page.

More about the WooCommerce Product Options plugin

Before we move on to Part 2 of this tutorial, let's talk a bit more about the WooCommerce Product Options add-on.

We built this plugin after struggling with the limitations of WooCommerce variations and the lack of built-in field types. We wanted to give shop owners more control over the products they sell in WooCommerce.

The plugin is flexible enough to accommodate a variety of scenarios, and it is easy to set up to meet your shop's needs. You can use it to add any type of product add-on or custom field. This ranges from gift wrapping to engraving and printing, to pizza toppings and individualized grocery lists.

Key features

Some of the most noteworthy aspects of the WooCommerce Product Options plugin are as follows:

Related: How to add custom order fields to WooCommerce. 

Part 2: Adding custom fields for specific variations

So far, we've learned how to add custom field types which allow users to choose options and customize products - often as an alternative to using variations. However, as we saw at the beginning, that's only one interpretation of WooCommerce custom fields for variation. The other definition involves showing additional data about specific variations. I'll show you how to do this next.

Normally, WordPress custom fields can only be enabled for pages, posts, and custom post types such as WooCommerce products. For example, you can do this with plugins like Advanced Custom Fields (ACF). That's how WooCommerce custom fields are generally used. You can then display custom fields on the product page. However, these appear to the entire product and aren't specific to individual variations.

To add custom fields to specific variations, you need Iconic's WooCommerce Custom Fields for Variations plugin. This extends the basic functionality of WordPress custom fields so that you can also add them for individual product variations.

How do the variation custom fields work?

WooCommerce Custom Fields for Variations is a flexible plugin for displaying static information on a product variation. It works by letting you add custom field groups, which appear on the 'Edit' screen for all your products and variations.

You can add an unlimited number of variation custom fields. These are options to structure them into groups with headings between each section.

You then add the required product data to the custom fields for all of the variations that you want it to appear on. Leave the custom field value blank for any that aren't needed. The custom fields won't be used for any variations where you don't add the extra data.

Warning: This option only displays static product data

While you can add various custom field types for variations in the WordPress back end (checkboxes, custom text fields, number fields, etc.), these are only for admin purposes. The WooCommerce Custom Fields for Variations plugin is only for displaying product data in the front end. As a result, the variation custom fields will always appear as text on the front end.

If you need to create options for customers to choose from and add information to, then you need the WooCommerce Product Options plugin instead. We covered this in Part 1 of this tutorial, above.

How to add custom fields to product variations

1. Get the WooCommerce Custom Fields for Variations plugin and install it on your WordPress site.
2. Go to Products → Variation Field Groups.
3. Next, click 'Add New' and give your group a title. Click 'Add Field'. Add as many new custom fields that you need for your variations. Add the required information such as the field name and label.
   

   

4. In the 'Product Page Display Options' section, choose where the variation custom fields will appear on the individual product page.
   

   

5. Finally, edit one of your variable products and go to the 'Product Data' section of the 'Edit Product' screen. On the 'Variations' tab, open up a variation that you want to add custom field data to. You will see your variation custom fields under the variation description snippet.
   

   

As you can see in the screenshots, it's easy to add custom fields to variations. Now when you view the product page and select a variation, the custom field data (if entered) will appear.

Add custom fields to your WooCommerce variations now!

To recap, we've looked at two ways to add different types of custom field to a WooCommerce product:

1. Use the WooCommerce Product Options plugin to add extra fields or options to a product which customers can select from.
2. Use the WooCommerce Custom Fields for Variations plugin to display additional static data on specific variations.

---

FAQ

Why show custom product variation fields for WooCommerce products?

Before we close, let's dive a bit deeper into why you might want to display custom fields on specific variations. After all, WooCommerce itself comes with variation descriptions where you can add extra data about each option.

Sometimes, a variation needs to display more information than you can neatly fit into the variation name and description. For example, imagine that you offer security software and need to show the security level and rating for each option. Variation custom fields offer a structured way to display this data.

Long variation descriptions with too much information may clutter the product page once a variation is selected. Use custom fields to provide unique product variant information to structure and organize the product page.

By displaying custom fields for complex product variants, you can improve the look and feel of your product page. This makes it easier for consumers to choose the right option for their needs. It also gives you greater freedom to display more details about your products.

Can custom fields for variations be used to alter product pricing?

Yes - when you use the WooCommerce Product Options plugin to add custom fields to variations, then each extra option can have its own price. Use this to increase the price by a fixed amount or percentage when that option is selected.

What other plugins can be used for adding custom fields to variations?

WooCommerce Product Options is the best plugin for adding extra options to products which customers can select. Alternatively, use Iconic's WooCommerce Custom Fields for Variations plugin to add read-only custom fields to variations.

How do I add custom fields for product variations using WordPress hooks and WooCommerce functions?

If you want to add variation custom fields which customers can select on the product page, then it's best to use a plugin. This is complex functionality and it would take you many months of development to replicate a plugin like WooCommerce Product Options.

However, if you just want to add read-only custom field data to WooCommerce variations, then developers can do this themselves using a code snippet.

The following code snippets are courtesy of Business Bloomer. If you don't know how to use them then you should ask your developer, then you can use our customization services or the Iconic plugin recommended above.

Step 1. Add the custom field to the variations

Use the following code snippet to add a custom field to each variation in the WordPress back end. Either add it to your child theme or using a free plugin such as Code Snippets:

/**
* @snippet Add Custom Field to Product Variations - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 4.6
* @community https://businessbloomer.com/club/
*/

// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation

add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 );

function bbloomer_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
) );
}

// -----------------------------------------
// 2. Save custom field on product variation save

add_action( 'woocommerce_save_product_variation', 'bbloomer_save_custom_field_variations', 10, 2 );

function bbloomer_save_custom_field_variations( $variation_id, $i ) {
$custom_field = $_POST['custom_field'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}

// -----------------------------------------
// 3. Store custom field value into variation data

add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );

function bbloomer_add_custom_field_variation_data( $variations ) {
$variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
return $variations;
}

Step 2. Display the custom field on the product page when a variation is selected

Next, you need to override the WooCommerce template file 'variation.php' in your child theme. You can find this in woocommerce/templates/single-product/add-to-cart. Put the amended version of this file in your child theme's woocommerce/single-product/add-to-cart folder (or create this if it doesn't exist).

Add the following to the template file in the child theme. Replace each instance of "custom_field" with the actual name of the custom field that you created in the previous code snippet:

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>

<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>

<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
</div>

<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>