Chat with us, powered by LiveChat

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.

WordPress 5.0 is out. Test all the great new features before upgrading your Live website. Read How!

How to Add Custom Product Fields In WooCommerce

Updated on January 17, 2017

4 Min Read
Reading Time: 4 minutes

WooCommerce is the most popular ecommerce solution for WordPress. According to BuiltWith, as of January 2017, WooCommerce powers over 42% of all online stores!

Add Custom Product Fields In WooCommerce

If you are looking for an online store that is easy to setup and manage, WooCommerce is an excellent option that is both free and open source. In addition, WooCommerce has evolved into a very competent ecommerce solution for WordPress based websites.

In my previous article I discussed how to add custom product fields in WooCommerce Checkout Page and in this tutorial, I will discuss how you could add custom product fields in WooCommerce.

Introduction of Custom Fields

As you could see from the above screenshot, I will demonstrate how you could add custom fields to the Edit Product page. In order to add these fields, I will show you how to edit the functions.php file, found in the theme folder.

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

Adding Product Custom Fields

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

To create the fields, I will generally use the built-in 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

Field Structure to be Included

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

    );

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

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

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 complete code of custom input fields which you must paste in the functions.php,  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>';

}

Saving Data in the Database

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

I will now create a function woocommerce_product_custom_fields_save.This function is hooked to woocommerce_process_product_meta. This function is pretty simple; It first checks whether the field is empty. 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 now display the values on the frontend. In this case, the best method would be to work with the WooCommerce custom templates.

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

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

Conclusion

In this article I discussed how to add custom fields to WooCommerce product page. I also demonstrated how you could display the values on the frontend. If you have any trouble using the code or would like to contribute to the discussion, do leave a comment below!

Share your opinion in the comment section. COMMENT NOW

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 owais.alam@cloudways.com

Be the first to check out WordPress 5.0

Use our Staging feature before upgrading your website to WordPress 5.0.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.