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 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:
- 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.
- 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 extra product options
In part 1, I'll show you how to add custom options to your 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
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.
- Install WooCommerce Product Options on your WordPress site.
- In the WordPress admin, go to Products → Product Options.
- 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.
- 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.
- Add as many options/custom fields as you like to the group.
- 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.
- 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 them in the cart and checkout 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.
Some of the most noteworthy aspects of the WooCommerce Product Options plugin are as follows:
- Add custom product fields centrally and choose which products and categories to use them on.
- Works with any WooCommerce product type, including simple or variable products.
- Product input fields include text boxes, radio buttons, photo fields, file uploads, and checkboxes.
- Set both fixed and variable pricing based on the combinations of custom fields selected.
- Use minimum and maximum order amounts as well as other quantity criteria.
- Conditional logic lets you show or hide user-selected options.
- Comes with full support from Barn2's WordPress experts.
- Try it risk-free with a 30-day money back guarantee.
Part 2: Adding additional data to 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. 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.
How to add custom fields to product variations
- Get the WooCommerce Custom Fields for Variations plugin and install it on your WordPress site.
- Go to Products → Variation Field Groups.
- 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.
- In the 'Product Page Display Options' section, choose where the variation custom fields will appear on the individual product page.
- 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 cam 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.
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.
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: