This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

How to Add Custom Product Fields in WooCommerce

Updated on May 24, 2023

6 Min Read
woocommerce custom product type

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.

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.

Introduction of Custom Fields

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' );

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>';
}

From launching to customizing your WooCommerce stores, Cloudways is at your service.

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.

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'
        )
    )
);

The following code should be used for creating the text area:

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

Here is the code of the custom input fields you must paste in the 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>';

}

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));

}

Save Vlaue in DB

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. ?>

Display Fields

Add Custom Fields on 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.

Save Custom Fields in WooCommerce

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');

Display Custom Fields on Product Page

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.

Summary

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.

Frequently Asked Questions

Q. What is the purpose of adding custom product fields in WooCommerce?

A. Custom product fields in WooCommerce provide additional product details, allow product customization, offer extra options, enhance SEO, and aid in data organization.

Q. Are there any plugins or extensions available to simplify adding custom fields to WooCommerce products?

A. Yes, plugins such as Advanced Custom Fields (ACF), WooCommerce Custom Fields, Product Add-Ons for WooCommerce, Extra Product Options for WooCommerce, and WooCommerce Product Add-ons simplify the process of adding custom fields to WooCommerce products.

Q. Can I make certain custom product fields mandatory or required during the checkout process?

A. Yes, you can make custom product fields mandatory during checkout. You can achieve this by adding a specific code to the functions.php file.

Q. What are some examples of practical uses for custom product fields in WooCommerce?

A. Practical applications of custom product fields in WooCommerce include product customization, adding extra information or technical specifications, creating a custom product rating or review system, and displaying specific stock status messages.

Q. Are there any considerations or limitations when adding a large number of custom product fields in WooCommerce?

A. Yes, adding numerous custom product fields in WooCommerce requires considerations for performance, complexity, theme compatibility, data integrity, searchability, and potential issues during migration and integration.
Share your opinion in the comment section. COMMENT NOW

Share This Article

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 Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now