How to Add Custom Product Fields in WooCommerce – A Comprehensive Guide

Custom product fields are additional data points that can be added to products in an online store. These fields allow store owners to collect and display more information about their products beyond the basic details typically included (such as name, price, color, and description).

By adding WooCommerce custom product fields, store owners can provide their customers with more detailed and accurate information about their products, which can help to improve the customer experience and increase sales.

In this tutorial, I’ll show how you can add custom product fields to your WooCommerce store.

What Are Custom Product Fields in WooCommerce?

WooCommerce Custom product fields are tool for backstitching product information to meet specific business needs. These fields provide the ability to add extra details or attributes to products beyond the standard WooCommerce product data.

WooCommerce Custom fields enable you to gather and display bespoke details about your products, catering to unique requirements or specifications.

Why Should You Add Custom Product Fields in WooCommerce?

Custom product fields offer flexibility in presenting product information. Merchants can create fields for various purposes, such as displaying product dimensions, materials used, care instructions, or any other pertinent details that can influence a customer’s purchasing decision.

WooCommerce Custom fields can significantly enhance the user experience by offering personalized options or configurations. By using custom fields into your WooCommerce setup, you empower both yourself and your customers with a more comprehensive understanding of the products on offer, facilitating smoother transactions.

How to Add Custom Product Fields in WooCommerce (Step-by-Step Tutorial)

Adding custom product fields in WooCommerce involves several steps, but it’s relatively straightforward. Here’s a step-by-step tutorial to guide you through the process:

Step 1 – Customize Product Data Page

• As in the screenshot below, I will show you how to edit the functions.php file (found in the theme folder) to add custom fields to the Product Data page.

Step 2 – Add Hooks in WooCommerce

• The first step is to hook to woocommerce_product_options_general_product_data. The function linked to this hook is responsible for displaying the new fields.
• A second hook, woocommerce_process_product_meta, will save the custom field values.
• Both these actions are carried out in the following code:

// The code for displaying WooCommerce Product Custom Fields
add_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' ); 

// Following code Saves  WooCommerce Product Custom Fields
add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );

Step 3 – Add Custom Product Fields

• To add the custom fields, I will use the default WooCommerce functions, including:

woocommerce_wp_text_input

• Package: WooCommerce\Admin\Functions
• Located at: includes/admin/wc-meta-box-functions.php

woocommerce_wp_textarea_input

• Package: WooCommerce\Admin\Functions
• Located at includes/admin/wc-meta-box-functions.php

function woocommerce_product_custom_fields () {
global $woocommerce, $post;
echo '<div class=" product_custom_field ">';
// This function has the logic of creating custom field
//  This function includes input text field, Text area and number field
echo '</div>';
}

Step 3.1: Include Field Structure

Note: the use of desc_tip to display those nice little bubbles to the right of the field instead of displaying the default field description. This attribute works for every field type.

// Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id'          => '_custom_product_text_field',
            'label'       => __( 'My Text Field', 'woocommerce' ),
            'placeholder' => 'Custom Product Text Field',
            'desc_tip'    => 'true'
        )

    );

• The default value of the step is 1, with the min set to zero. Basically, this means that I expect a positive value here (at least greater than zero).

// Custom Product Number Field
woocommerce_wp_text_input(
    array(
        'id' => '_custom_product_number_field',
        'placeholder' => 'Custom Product Number Field',
        'label' => __('Custom Product Number Field', 'woocommerce'),
        'type' => 'number',
        'custom_attributes' => array(
            'step' => 'any',
            'min' => '0'
        )
    )
);

• Use the following to create a textarea.

// Custom Product Textarea Field
woocommerce_wp_textarea_input(
    array(
        'id' => '_custom_product_textarea',
        'placeholder' => 'Custom Product Textarea',
        'label' => __('Custom Product Textarea', 'woocommerce')
    )
);

• Use the following code for custom input fields, you must paste this code in functions.php file located in the theme folder.

// Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');


function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => 'Custom Product Text Field',
            'label' => __('Custom Product Text Field', 'woocommerce'),
            'desc_tip' => 'true'
        )
    );
    //Custom Product Number Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_number_field',
            'placeholder' => 'Custom Product Number Field',
            'label' => __('Custom Product Number Field', 'woocommerce'),
            'type' => 'number',
            'custom_attributes' => array(
                'step' => 'any',
                'min' => '0'
            )
        )
    );
    //Custom Product  Textarea
    woocommerce_wp_textarea_input(
        array(
            'id' => '_custom_product_textarea',
            'placeholder' => 'Custom Product Textarea',
            'label' => __('Custom Product Textarea', 'woocommerce')
        )
    );
    echo '</div>';

}

Step 3.2: Save Data in the Database

Once you have created the custom product fields, another function is required to save the values for the update or publish button.

I will create a function woocommerce_product_custom_fields_save. This function is hooked to woocommerce_process_product_meta. It first checks whether the field is empty or filled. If not, a post meta is created using update_post_meta(). I used esc_attr() and esc_html() to secure the data.

Here is the code for saving the value of all the fields:

function woocommerce_product_custom_fields_save($post_id)
{
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
        update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
// Custom Product Number Field
    $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
    if (!empty($woocommerce_custom_product_number_field))
        update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));
// Custom Product Textarea Field
    $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
    if (!empty($woocommerce_custom_procut_textarea))
        update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));

}

Step 3.3: Get the Values From the Database

Now that the fields have been created and their values saved, I will display them on the frontend. In this case, I recommend you work with the WooCommerce custom templates.

I will use the popular get_post_meta() function to get those values.

<?php while (have_posts()) : the_post(); ?>
<?php wc_get_template_part('content', 'single-product'); ?>
<?php
// Display the value of custom product text field
    echo get_post_meta($post->ID, '_custom_product_text_field', true);
// Display the value of custom product number field
    echo get_post_meta(get_the_ID(), '_custom_product_number_field', true);
// Display the value of custom product text area
    echo get_post_meta(get_the_ID(), '_custom_product_textarea', true);
    ?>
<?php endwhile; // end of the loop. ?>

Step 4: Add Custom Fields on the Product Page

The good thing is that these custom fields can be easily added via the backend. These changes are then reflected in the frontend as custom fields on product pages, cart pages, and similar areas. In fact, these custom fields can also appear on order status pages.

For this, I will show you how to add a new custom field in the Product Data section of a WooCommerce product page:

 function woocommerce_product_custom_fields()
{
  $args = array(
        'id' => 'woocommerce_custom_fields',
        'label' => __('Add WooCommerce Custom Fields', 'cwoa'),
  );
  woocommerce_wp_text_input($args);
}
 
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

Here’s how the snippet would appear on the frontend. As you can see, the custom field has the same label as mentioned in the $args array.

Step 5: Saving Custom Field Data

• Use the following code snippet to add custom fields to product pages.
• The important thing to note about the snippet is that it uses standard WooCommerce functions and actions.

function save_woocommerce_product_custom_fields($post_id)
{
    $product = wc_get_product($post_id);
    $custom_fields_woocommerce_title = isset($_POST['woocommerce_custom_fields']) ? $_POST['woocommerce_custom_fields'] : '';
    $product->update_meta_data('woocommerce_custom_fields', sanitize_text_field($custom_fields_woocommerce_title));
    $product->save();
}


add_action('woocommerce_process_product_meta', 'save_woocommerce_product_custom_fields');

How to Display Custom Fields on Product Page in WooCommerce

The following snippet displays the custom fields. The process is simple; it first checks the custom field value and confirms it has a value. If the case is true, it displays the value as the title of the field.

function woocommerce_custom_fields_display()
{
  global $post;
  $product = wc_get_product($post->ID);
    $custom_fields_woocommerce_title = $product->get_meta('woocommerce_custom_fields');
  if ($custom_fields_woocommerce_title) {
        printf(
            '<div><label>%s</label><input type="text" id="woocommerce_product_custom_fields_title" name="woocommerce_product_custom_fields_title" value=""></div>',
            esc_html($custom_fields_woocommerce_title)
        );
  }
}
 
add_action('woocommerce_before_add_to_cart_button', 'woocommerce_custom_fields_display');

As you can see from the following image, the custom field is visible on the product page. Note that the field title is “WooCommerce product custom fields”, the same as the id value in the snippet.

Using Plugins for Custom Product Fields

As a backup for those who dislike coding or require an easy solution, there are numerous plugins that you can utilize to help you in the use of custom product fields in WooCommerce without coding. Some of them include:

1. Advanced Custom Fields (ACF)

ACF is a very powerful plugin that allows you to create custom fields for every WordPress object, including WooCommerce products. It has a simple-to-use field interface and gets along well with WooCommerce.

• Features: Offers an amazing collection of field types (text, image, date, etc.), conditional logic, and native WooCommerce integration.
• Pros: Very flexible, supports complex field structures, and has great documentation.
• Cons: Too much for simple use cases, there is a learning curve.

2. WooCommerce Product Add-ons

This plugin allows you to add custom fields to your products, which you can use to get more information from customers or offer product variations.

• Features: Offers support for text, checkbox, radio, and select fields, and supports WooCommerce checkout.
• Pros: Easy to use, supports WooCommerce, and offers conditional logic.
• Cons: Less focused on product variations than on information fields.

3. YITH WooCommerce Product Add-ons & Extra Options

This plugin offers a vast range of options to add custom fields and options to WooCommerce products with conditional logic support.

• Features: Supports many field types, including text, checkbox, and select fields, and is WooCommerce compatible.
• Pros: Extremely flexible, compatible with conditional logic, and is WooCommerce compatible.
• Cons: Priced out of range for small stores, and the interface could be disorganized.

How to use these Plugins

• Install the Plugin, by going to your WordPress dashboard, Plugins > Add New, and looking for the plugin you’d like to implement.
• Click on Install Now and then Activate.
• Now set up Custom Fields how you like. Most plugins are straightforward and allow fields to go straight onto your WooCommerce products.

Then there are Fields on Product Pages that can be displayed. There are some of the plugins which will show fields on product pages without you needing to request it. With other plugins, you might need to use shortcodes or widgets in order to show the fields where you want to. Using a plugin is a fast way of adding custom fields on WooCommerce products without coding at all. Each plugin has advantages and disadvantages, hence choose one that addresses your specific needs. Always check if the plugin is compatible with your WordPress and WooCommerce version.

Conclusion

It is important for store owners to carefully consider the types of WooCommerce custom product fields they want to add and how they will be used and displayed on the product page. This can help improve the customer experience and increase sales, as customers are more likely to purchase if they have all the necessary information about a product.

add_action('woocommerce_product_options_general_product_data', 'your_custom_function');

add_action('woocommerce_single_product_summary', 'display_custom_field');

get_post_meta($product_id, 'custom_field_name', true);

Salwa Mujtaba

Salwa Mujtaba is a Technical Content Writer at Cloudways. With a strong background in Computer Science and prior experience as a team lead in Cloudways Operations, she brings a deep understanding of the Cloudways Platform to her writing. Salwa creates content that simplifies complex concepts, making them accessible and engaging for readers. When she's not writing, you can find her enjoying good music, reading a book, or spending quality time with her family.

Get Connected on: Twitter Community Forum