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.

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.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

Get Connected on: Twitter Community Forum