WooCommerce custom fields: How to create & display

This is the complete guide on how to create WooCommerce custom fields. You'll learn how to show extra product data and sell extra product options on your website.

WooCommerce custom fields are an important aspect of the popular e-commerce plugin for WordPress. The standard product fields within WooCommerce provide essential details about a product, such as its product title, price, and categorization, which are used to organize and make it easier for customers to find what they're looking for. But with the use of custom fields, users can add additional information to their products, allowing for more specific categorization and greater flexibility in how products are presented in the store.

But what if you want to store advanced product fields for WooCommerce? What if you want something more flexible than product variations, such as checkboxes or text fields? What if you want to show a text field on the product page? Well, that's where WooCommerce add custom field to products plugins come in.

2 WooCommerce Types of Custom Fields

When people talk about WooCommerce custom fields, they typically mean one of two things:

1. Selling extra product options, as an alternative to variationsThis involves installing a WooCommerce add custom field to products plugin which displays dropdown lists, checkboxes, radio buttons, text fields, etc. for the customer to complete before adding the product to their cart. Technically, extra product options aren't custom fields at all - they're better known as product add-ons! However, a lot of people refer to these options as custom fields. They're perfect for adding a WooCommerce text field on the product page, and collecting other data and options from customers.
2. Adding extra information about the productThis is the classic use of custom fields. In WordPress, custom fields are used to add additional data to posts, pages, or products. You use these to store and display extra information on your website. For example, if you're already using all the basic fields for other purposes then a WooCommerce custom text field on product page plugin can display additional text for you.

Continuing on, we will explore the steps involved in adding both types of custom fields to your WooCommerce products. You will learn how to make the custom fields visible to your customers and enable easy addition of product add-on fields.

By following the steps outlined in this guide, you will be able to effectively use custom fields in WooCommerce. This will enhance your store and improve the shopping experience for customers. Whether you're looking to add extra information about your products or offer additional options, WooCommerce custom fields provide a powerful tool to help you achieve your goals.

Using custom fields to provide options and collect information from customers

First, we'll look at how to use custom fields in WooCommerce to show extra information about your products. This involves offering additional options to customers.

This type of custom field goes beyond merely displaying extra information about a product. It offers customers the option to select additional features before adding the product to their cart.

This method is a remarkable alternative to product variations. That's because it allows you to add a wide range of field types, including radio buttons, checkboxes, and text inputs. By adding extra fields on the product short description page, customers can provide more choices and data that they can receive along with their orders. For example, adding a WooCommerce custom text field on the product page lets customers enter their own text to be submitted with their order.

Read our complete guide to WooCommerce Product Add-Ons.

Introducing the Product Options plugin

There are many WooCommerce custom fields plugins available for adding extra product information to your WooCommerce store. However, when it comes to finding the best solution for letting customers select extra product options during checkout, we highly recommend WooCommerce Product Options. This plugin stands out as the best option for adding custom fields to your products and displaying them during the checkout process.

You can add a wide range of options that appear as custom fields for the customer to select. Shoppers can complete these extra fields and add them to their cart from the following locations:

• The individual product page.
• From your main product list, if you're using WooCommerce Product Table.
• From a quick view lightbox, if you're using WooCommerce Quick View Pro. (Customers can access the lightbox from the main shop page or product category pages, so it's a quick way to select add-on custom fields without having to visit a separate page for each product.)

---

Using custom fields to store extra product data

We have discussed how to incorporate dynamic fields into your WooCommerce products, allowing you to gather additional information from customers. This one aspect refers to as "WooCommerce custom fields". The other aspect involves adding static data to your products and displaying this information in your store.

Here, we're talking about how to add a static WooCommerce text field on the product page. That's why it's different from adding custom fields for your customers to fill in.

While many individuals opt to add custom fields programmatically, this guide is specifically designed for non-developers. By reading on, you will learn how to add custom fields to your WooCommerce products without writing a single line of code. This makes it possible for you to display extra product fields wherever you desire, including on the single product page, the shop page, and the category pages.

After creating our product custom fields, we'll display them on the front end using the WooCommerce Product Table plugin. This makes it easy to display custom fields created by any plugin for WordPress in a table, anywhere on your site. You can either list multiple products and their custom fields, list products with a specific custom field value only, or add a table of custom fields to the single product page.

First, I'll share a real-life case study about a company that uses WooCommerce custom fields to provide extra information about its products. Afterwards, I'll provide full instructions on how to create your own Woo custom fields and display them on your product listings.

Case Study – How Wavelength Electronics Use Custom Fields in Their WooCommerce Store

Wavelength Electronics sell technical products in the electronics industry. As with most technical products, customers need to check a lot of information before making their purchase. With all the extra product data to display, Wavelength Electronics used our WooCommerce Product Table to create WooCommerce custom fields to help their clients quickly find what they’re looking for.

The product table now displays a datasheet column with a PDF icon for each item, so customers can open up the datasheet straight from the product table. There’s also a column with ticks to show which models include a temperature controller.

Read on to find out how to add your own WooCommerce custom fields to your store.

See WooCommerce custom fields in action on our custom fields demo page.

Custom fields or taxonomies?

To begin, let's look at the difference between two types of extra fields for WooCommerce products: custom fields and taxonomies. Understanding the differences between the two options is crucial in knowing which one best fits specific needs and requirements.

What are custom fields?

Custom fields, also known as post meta, are individual pieces of information that can be added to your products. They are flexible and be used to store a wide range of data, including text, images, and other media.

In short, custom fields add extra fields to the Add/Edit Product screen in WooCommerce. They're ideal for storing standalone data about products. Here are some examples of when you should use WooCommerce custom fields:

• To store a unique product barcode, inventory, or reference number.
• For adding extra ways for people to interact with your products. This might be by adding extra buttons (e.g. 'Enquire about this product), icons, or social sharing links.
• To display multimedia content about the product, such as embedded video or audio tracks.
• For adding shortcodes provided by other plugins, such as a WooCommerce Add to Quote or Wishlist plugins.
• To store additional notes about the prices or alternate price options. For example, if you're using a bulk discount WooCommerce plugin and want to list the quantity-based discounts, then you can add this information to a custom field.

The idea of a custom field is that it stores unique information. Since the data stored in the field is unique, you can display it in the WooCommerce front end - e.g. on the product detail page, shop, or category pages. However, you wouldn't expect to use this data to group or filter products. If you want to filter by that type of data, then you need a custom taxonomy instead.

You can create WooCommerce custom fields using any custom fields plugin for WordPress. Once you've created the custom fields, it's easy to show them on your website using the WooCommerce Product Table plugin. Keep reading for full step-by-step instructions on how to do all this. First, I'll quickly tell you about WooCommerce custom taxonomies so that you can be sure you're choosing the most appropriate field type for your data.

What are custom taxonomies?

Like WooCommerce custom fields, taxonomies are a way to store and show extra product data. They are a way of grouping and organizing products into categories or tags. However, the difference is that they are designed to store reusable information which can be used to group and filter products. For example, you can create a dedicated archive page listing all products that share a specific custom taxonomy term. You can also use taxonomies to filter products using the WooCommerce Product Table plugin.

Custom taxonomies are very similar to WooCommerce product categories. In fact, WooCommerce categories are actually set up as a taxonomy under the hood. When you create a custom taxonomy in WooCommerce, it adds tick boxes/checkboxes to the right-hand side of the Add/Edit Product screen - just like categories.

Here are some examples of when you might use WooCommerce custom taxonomies:

• A WooCommerce bookstore needs to store extra product data such as year of publication, author, and publisher. Since more than one book has the same year, author, or publisher, customers need to be able to sort and filter by this data. You can do this using WooCommerce custom taxonomies.
• If your products relate to a specific geographical area, then you can use custom taxonomies to group products by area. For example, you could create a custom taxonomy called 'Area' and add a separate taxonomy term for each state or county. Customers can then filter by area, or view lists of products from a specific area only.
• A WooCommerce clothes store can use custom taxonomies to store extra data such as brand names. Customers can then search and filter to find products with their favourite brands, as this field isn't built into WooCommerce as standard.

In summary

When deciding between custom fields and taxonomies, it's important to consider the type of information you want to store and the way in which you want to organize your products. If you need to add unique or specific information to a product, custom fields may be the better choice. However, if you're looking to categorize and organize your products, taxonomies may be suitable.

Read our tutorial about how to create WooCommerce custom taxonomies.

How to create custom fields in the back end

Ok, now you know when to use custom fields. Next, I'll show you how to create advanced product fields for WooCommerce. It's surprisingly easy!

Which custom field plugin?

In order to add custom fields to your WooCommerce products, you'll need to have a WooCoomerce custom fields plugin installed. There are numerous high-quality and free plugins available for creating custom fields in WooCommerce, including Easy Post Types and Fields, Advanced Custom Fields, and Toolset. Each of these plugins offers unique features and benefits, so you can choose the one that best fits your needs and preferences.

If you prefer, you can also opt for a dedicated WooCommerce custom fields plugin, which is specifically designed for adding custom fields to your products in the WooCommerce platform. These plugins often come with pre-built templates and fields that make it easier to get started, as well as a range of customization options to help you tailor the custom fields to your store's specific needs.

I'm going to show you how to create WooCommerce custom fields using Easy Post Types and Fields, and also Advanced Custom Fields. These are my two favorites.

The tutorial instructions are the same for most other custom field plugins for WordPress. If the custom fields don't show up on your site when you follow the later sections of this tutorial, make sure the plugin isn't adding extra characters to the start of the custom field name. (You might need to contact their plugin support to ask about this.) For example, Toolset Types automatically adds wpcf- to the start of the custom field name, so you need to know this.

Creating custom fields with Easy Custom Post Types & Fields

Easy Post Types and Fields make it easy to add custom data fields to your WooCommerce products. It was designed to make it as quick and easy as possible to add custom fields. It comes with a choice of plain text and visual editor custom field types.

Use this plugin if you want a quick and straightforward way to add WooCommerce custom text fields to the product page.

1. Log into WordPress and find Plugins → Add New. Search for ‘Easy Post Types and Fields’, then install and activate the free plugin.
2. The setup wizard will open. Skip this and go to Post Types → Manage and click on the 'Other Post Types' tab.
3. Find the 'Products' post type (this is added by WooCommerce) and click 'Custom Fields'.
4. Click the button to add as many fields as you like to your WooCommerce products. Make a note of the name of each custom field - you'll need this to display it later in this tutorial.
5. Finally, edit your products. On the 'Edit Product' screen, you'll find the custom fields that you added in step 4. Fill in the data as needed.

How to create custom fields with the Advanced Custom Fields plugin

Advanced Custom Fields (ACF) is a popular WordPress custom field plugin. Use it if you're willing to spend a bit more time on setup and want extra features such as additional field types.

1. Log into WordPress and find Plugins → Add New. Search for ‘Advanced Custom Fields’, then install and activate this free plugin.
2. Click ‘Custom Fields’ on the left-hand side of the WordPress dashboard.
3. Click the ‘Add New’ link by the ‘Field Group’ at the top of the page.
4. Next, you'll see the ‘Add New Field Group’ page:
   1. First, add a name for the group of custom fields you're creating. (No one else will see this.)
   2. Location – Choose Show this field group if Post Type is equal to Product. This tells Advanced Custom Fields to show the custom field on the Add/Edit WooCommerce product screen.
   3. Press the blue ‘Add Field’ button. Now it's time to create the individual custom fields where you'll store the extra product data.
   4. Add a Label for the custom field. This is how the custom field will be labeled on the Add/Edit Product screen.
   5. Choose a Name for the custom field (this should be 1 word in lowercase). You'll need this to display the WooCommerce custom field on the front end of your website, later.
   6. Choose a Field Type from the available types of a custom field. You can choose text, text area, numbers, checkbox, radio button, etc.
   7. Complete any extra fields for the custom field such as adding a default placeholder value. Finally, click the blue ‘Publish’ button.

That's how to create WooCommerce fields. The next step is to add data to the custom field value for some or all of your products. To do this, go to the 'Edit' page for each product and you'll see the extra WooCommerce custom field(s) lower down the page. They'll be shown somewhere below the Product Data section. Edit the placeholder, enter values into the custom fields, and then save the product.

Adding custom fields to product variations

So far, you've learned about Woocommerce adding custom fields to products for storing data about individual WooCommerce products. If you're using variable products then you can also add custom fields to specific variations. You'll need a different custom field plugin for that - one that focuses on variable products. I recommend Iconic's WooCommerce Custom Fields for Variations plugin for this.

---

Displaying custom fields in the front end

How to add custom fields on the shop page

Now that you have a basic understanding of how to store new custom fields for your WooCommerce products in the back end of your WordPress website, you may be wondering how to display these fields on the front end of your website for customers to see. If you're using custom fields simply as a way to store internal notes, there's no need to display them. However, if you want to show your WooCommerce custom fields on your website, it's a simple process.

There are several ways to display custom fields on the front end of your website, including on the single product page, the shop page, and the category pages. To display the custom fields, you can use the code provided by your custom fields plugin or manually add the code to your website. It's important to note that the method for displaying custom fields can vary depending on the plugin you're using, so it's a good idea to consult the documentation, tutorial, and support provided by the plugin developer.

The easiest way to show your extra product data is to install the WooCommerce Product Table plugin. This takes your products and lists them in a quick order form layout anywhere on your site. You can add product tables to any page you like. This might be normal pages, or your WooCommerce shop and category pages.

You can choose which columns to include in the product table. The great thing is that you can include WooCommerce custom fields in the table. This is more flexible than the default store layout, which just lists basic information such as the product name and price. It's a really easy way to display the extra product data that is stored in custom fields.

Get WooCommerce Product Table

How to do it

1. Get WooCommerce Product Table and install and activate the plugin.
2. The plugin setup wizard will open. Activate your license key and choose the other settings for your product tables.
3. In the Columns section of the wizard, make sure you add your custom field columns. To do this, just add cf: followed by the name of the custom field name that you created earlier (e.g. cf:my-custom-field). The knowledge base contains the full list of available columns.
4. Now it's time to add product tables to a page. (You can skip this step if you used the setup wizard to show product tables on your main shop pages.) To add a product table anywhere, use the [product_table] shortcode to list all your products. Alternatively, use the plugin documentation to list specific products only.
5. Next, view the page and see what it looks like! You will see a product table, complete with custom fields. 

Make changes to how your custom fields are displayed

So far, I've shared a simple method to show WooCommerce custom fields in the front end of your website. Now, let's get more advanced and configure how our custom fields are displayed.

WooCommerce Product Table is a very flexible plugin. Choosing your columns is just one of over 50 options! Look at them all and configure your table to show whatever product data you need.

For example, you can:

• Create product tables listing products from a specific category, tag, or custom field only. (More on this below.)
• Add filter dropdown lists above the table, or filter widgets in the sidebar. (But remember, you can't filter by the custom field because custom fields aren't designed for grouping products. You need to use categories, attributes, tags, or custom taxonomies to store filterable data.)
• Use the lazy load option to speed up the table if you have too many products to load all at once.
• And much more...

Have a play, and get your product tables and WooCommerce custom fields showing exactly as you need them.

How to add WooCommerce custom text fields on product page

So far, I've shown you several ways of displaying custom fields on WordPress pages, shop, or product category pages. It's also possible to show a WooCommerce text field on the product page (also known as the product detail page).

You can do this using the WooCommerce Product Table plugin that we looked at in the previous section. When used on the single product page, it looks like this:

For instructions, check out our separate tutorial about How to Display Custom Fields on the WooCommerce Product Page.

How to list WooCommerce products with a specific custom field value

Finally, I'll show you one more option for showing WooCommerce custom fields in the Product Table plugin.

As well as displaying custom field labels in the table layout, you can create tables containing products with a specific custom field value.

For example, if you wanted to display products with a custom field value of '2023' (saved in a custom field called 'Year') then you could do it with this shortcode:

[product_table cf="year:2023"]

Another example: Perhaps you have a custom field called ‘condition’ and want to display products with a custom field value of ‘new’. You can do this using the following shortcode:

[product_table cf="condition:new"]

---

How to create custom fields without a plugin

If you're a developer, then you might be wondering how to add custom fields to a WooCommerce product programmatically. Can you even add custom fields to a WooCommerce product without plugins?

The answer is yes! WooCommerce allows you to programmatically add custom fields to products without installing any additional plugins. However, as you can imagine, the programmatic approach to creating custom fields for WooCommerce products involves programming!

With a programmatic approach, you can add custom information directly to your product metadata. You can also include your custom field(s) as part of the existing WooCommerce product data meta box.

Code sample 1

Your code will depend on the kind of custom fields you're looking to add to your products. Many product types only need a simple custom text field to let users enter some value. For such use cases, this custom text input field snippet by WooCommerce developer Rodolfo Melogli suffices:

As you can see, you’ll be using a bunch of core WooCommerce functions and hooks in the code. For example, you're using the WooCommerce hook "woocommerce_before_add_to_cart_button" to show your custom field on your product page. You're also using the woocommerce_add_order_item_meta hook to save your product input fields for Woocommerce into the order meta information. These can vary greatly depending on the custom fields you're trying to add.

When you take such input from your users, you should include it in your cart page summary (with your cart item details), your checkout, and also in your order's email. The snippet we just saw doesn't just let you allow your users to enter a text-based value inside your product page but also takes it over to your cart and checkout. Not just that, it adds the custom input to your order confirmation email too.

Code sample 2

Next, we'll share some example codes kindly published by Plugin Republic. You'll be adding these snippets to your WordPress child theme's functions.php file. You could use the code snippet below to register a custom field, display the input field in the General tab of the WooCommerce product data box, and save it as product metadata:

/**
* Displays the custom text field input field in the WooCommerce product data meta box
*/
function cfwc_create_custom_field() {
$args = array(
'id' => 'custom_text_field_title',
'label' => __( 'Custom Text Field Title', 'cfwc' ),
'class' => 'cfwc-custom-field',
'desc_tip' => true,
'description' => __( 'Enter the title of your custom text field.', 'ctwc' ),
);
woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );
/**
* Saves the custom field data to product meta data
*/
function cfwc_save_custom_field( $post_id ) {
$product = wc_get_product( $post_id );
$title = isset( $_POST['custom_text_field_title'] ) ? $_POST['custom_text_field_title'] : '';
$product->update_meta_data( 'custom_text_field_title', sanitize_text_field( $title ) );
$product->save();
}
add_action( 'woocommerce_process_product_meta', 'cfwc_save_custom_field' );

Then, you could use WooCommerce's many hooks to display that field data on the front end of your e-commerce store at the spot where you want it to appear.

For example, this snippet displays the custom field data after the add to cart button on your single product page:

/**
* Displays custom field data after the add to cart button
*/
function cfwc_display_custom_field() {
global $post;
// Check for the custom field value
$product = wc_get_product( $post->ID );
$title = $product->get_meta( 'custom_text_field_title' );
if( $title ) {
echo get_post_meta($post->ID, 'custom_text_field_title', true);
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'cfwc_display_custom_field' );

There are also other hooks that let you display information on the WooCommerce checkout page or the cart page.

Is It worth adding WooCommerce custom text fields programmatically?

While you don't need any plugins to programmatically add custom fields to WooCommerce using this method, you can end up with errors. Your custom code could have compatibility issues with the other WooCommerce extensions or WordPress site plugins that you might be running. You can also experience code validation errors.

As you can tell, using plugins is a much simpler way to add custom fields to product pages. While it is possible to display custom fields without the use of a plugin, it's really only accessible to developers. That's why the methods described above are a better option for most store owners.

---

2 easy ways to create and display custom fields

And that's it! I've shown you two easy ways to show custom fields on your website:

1. We've learned how to add custom product input fields for WooCommerce to collect extra information from customers. This uses the WooCommerce Product Options plugin.
2. We also learned how to use a free plugin to store extra data about our products and display them using the WooCommerce Product Table plugin.

Neither method for adding custom fields to WooCommerce products requires any special technical knowledge.

Follow whichever method in this tutorial interests you the most, and put it into practice on your own website. It's a fantastic non-technical way to store and display extra product data in WooCommerce.