---
description: https://www.cloudways.com/blog/add-custom-product-fields-woocommerce/
---

# How To Add Custom Product Fields in WooCommerce (ok)

C:\xampp\htdocs\hanam\wp-content\themes\car-child\functions.php

```
// The code for displaying WooCommerce Product Custom Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');
function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    //Custom Product Number Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_number_field',
            'placeholder' => 'Number of seats',
            'label' => __('Number of seats', 'woocommerce'),
            'type' => 'number',
            'custom_attributes' => array(
                'step' => 'any',
                'min' => '0'
            )
        )
    );
    echo '</div>';
}
// Following code Saves  WooCommerce Product Custom Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
function woocommerce_product_custom_fields_save($post_id) {
// 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));
  }
}
```

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LWPtKFbhw0XehxVuoiZ%2Fuploads%2FJFMmPuAPa6yZXmJb1fpQ%2FScreenshot_5.png?alt=media\&token=9e429e6a-01f8-4465-aca1-42fb69b128af)

## How To Add Custom Product Fields in WooCommerce

![](https://secure.gravatar.com/avatar/55fb92ae9ea7eca129678ce04ff52ac7?s=128\&d=mm\&r=g) [Owais Alam](https://www.cloudways.com/blog/author/owaisalam/) &#x20;

Updated on November 22, 2021&#x20;

&#x20;5 Min Read![woocommerce custom fields](https://www.cloudways.com/blog/wp-content/uploads/Banner-22.jpg)

WooCommerce is the most popular ecommerce solution for WordPress. According to BuiltWith, as of January 2017, [WooCommerce](https://www.cloudways.com/en/woocommerce-hosting.php) powers over 42% of all online stores!

If you are looking for an online store that is easy to set up 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.

#### Having problems adding custom product fields?

Hire a Cloudways Expert to add custom product fields in your WooCommerce store.

[FIND AN EXPERT](https://bit.ly/3eycFGD)

In my previous article, I discussed [_**how to add custom product fields in WooCommerce Checkout Page**_](https://www.cloudways.com/blog/custom-field-woocommerce-checkout-page/) and in this tutorial, I will discuss how you could add custom product fields in WooCommerce.

![Introduction of Custom Fields](https://www.cloudways.com/blog/wp-content/uploads/intro.png)

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:

1. // The code for displaying WooCommerce Product Custom Fields
2. add\_action( 'woocommerce\_product\_options\_general\_product\_data', 'woocommerce\_product\_custom\_fields' );
3.
4. // Following code Saves WooCommerce Product Custom Fields
5. add\_action( 'woocommerce\_process\_product\_meta', 'woocommerce\_product\_custom\_fields\_save' );

#### Adding Product Custom Fields

1. function woocommerce\_product\_custom\_fields () {
2. global $woocommerce, $post;
3. echo '\<div class=" product\_custom\_field ">';
4. // This function has the logic of creating custom field
5. // This function includes input text field, Text area and number field
6. echo '\</div>';
7. }

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

1. // Custom Product Text Field
2. woocommerce\_wp\_text\_input(
3. array(
4. 'id' => '\_custom\_product\_text\_field',
5. 'label' => \_\_( 'My Text Field', 'woocommerce' ),
6. 'placeholder' => 'Custom Product Text Field',
7. 'desc\_tip' => 'true'
8. )
9.
10. );

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.

1. // Custom Product Number Field
2. woocommerce\_wp\_text\_input(
3. array(
4. 'id' => '\_custom\_product\_number\_field',
5. 'placeholder' => 'Custom Product Number Field',
6. 'label' => \_\_('Custom Product Number Field', 'woocommerce'),
7. 'type' => 'number',
8. 'custom\_attributes' => array(
9. 'step' => 'any',
10. 'min' => '0'
11. )
12. )
13. );

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:

1. // Custom Product Textarea Field
2. woocommerce\_wp\_textarea\_input(
3. array(
4. 'id' => '\_custom\_product\_textarea',
5. 'placeholder' => 'Custom Product Textarea',
6. 'label' => \_\_('Custom Product Textarea', 'woocommerce')
7. )
8. );

Here is the complete code of custom input fields that you must paste in the **functions.php,** located in the theme folder.

1. // Display Fields
2. add\_action('woocommerce\_product\_options\_general\_product\_data', 'woocommerce\_product\_custom\_fields');
3.
4. // Save Fields
5. add\_action('woocommerce\_process\_product\_meta', 'woocommerce\_product\_custom\_fields\_save');
6.
7.
8. function woocommerce\_product\_custom\_fields()
9. {
10. global $woocommerce, $post;
11. echo '\<div class="product\_custom\_field">';
12. // Custom Product Text Field
13. woocommerce\_wp\_text\_input(
14. array(
15. 'id' => '\_custom\_product\_text\_field',
16. 'placeholder' => 'Custom Product Text Field',
17. 'label' => \_\_('Custom Product Text Field', 'woocommerce'),
18. 'desc\_tip' => 'true'
19. )
20. );
21. //Custom Product Number Field
22. woocommerce\_wp\_text\_input(
23. array(
24. 'id' => '\_custom\_product\_number\_field',
25. 'placeholder' => 'Custom Product Number Field',
26. 'label' => \_\_('Custom Product Number Field', 'woocommerce'),
27. 'type' => 'number',
28. 'custom\_attributes' => array(
29. 'step' => 'any',
30. 'min' => '0'
31. )
32. )
33. );
34. //Custom Product Textarea
35. woocommerce\_wp\_textarea\_input(
36. array(
37. 'id' => '\_custom\_product\_textarea',
38. 'placeholder' => 'Custom Product Textarea',
39. 'label' => \_\_('Custom Product Textarea', 'woocommerce')
40. )
41. );
42. echo '\</div>';
43.
44. }

#### Saving Data in the Database

Once you have created the custom product fields, another function is required to save the values, once the user hits 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:

1. function woocommerce\_product\_custom\_fields\_save($post\_id)
2. {
3. // Custom Product Text Field
4. $woocommerce\_custom\_product\_text\_field = $\_POST\['\_custom\_product\_text\_field'];
5. if (!empty($woocommerce\_custom\_product\_text\_field))
6. update\_post\_meta($post\_id, '\_custom\_product\_text\_field', esc\_attr($woocommerce\_custom\_product\_text\_field));
7. // Custom Product Number Field
8. $woocommerce\_custom\_product\_number\_field = $\_POST\['\_custom\_product\_number\_field'];
9. if (!empty($woocommerce\_custom\_product\_number\_field))
10. update\_post\_meta($post\_id, '\_custom\_product\_number\_field', esc\_attr($woocommerce\_custom\_product\_number\_field));
11. // Custom Product Textarea Field
12. $woocommerce\_custom\_procut\_textarea = $\_POST\['\_custom\_product\_textarea'];
13. if (!empty($woocommerce\_custom\_procut\_textarea))
14. update\_post\_meta($post\_id, '\_custom\_product\_textarea', esc\_html($woocommerce\_custom\_procut\_textarea));
15.
16. }

![Save Vlaue in DB](https://www.cloudways.com/blog/wp-content/uploads/save-DB.png)

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

1. \<?php while (have\_posts()) : the\_post(); ?>
2. \<?php wc\_get\_template\_part('content', 'single-product'); ?>
3. \<?php
4. // Display the value of custom product text field
5. echo get\_post\_meta($post->ID, '\_custom\_product\_text\_field', true);
6. // Display the value of custom product number field
7. echo get\_post\_meta(get\_the\_ID(), '\_custom\_product\_number\_field', true);
8. // Display the value of custom product text area
9. echo get\_post\_meta(get\_the\_ID(), '\_custom\_product\_textarea', true);
10. ?>
11. \<?php endwhile; // end of the loop. ?>

![Display Fields](https://www.cloudways.com/blog/wp-content/uploads/Display.png)

### Add WooCommerce Custom Fields on Product Page

Many store owners don’t realize that they can add custom fields to the product data area. This presents a unique opportunity to display additional information that doesn’t fit into the official WooCommerce UX.

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 as well.

#### Cloudways Woocommerce Hosting Has No Restrictions!

Test your code, plugins and themes with ease.

[GET STARTED FREE](https://platform.cloudways.com/signup?utm_source=WooBlogs\&utm_medium=InlineCTA\&utm_campaign=WooConvImprovement)

To demonstrate this idea of WooCommerce product custom fields, I will demonstrate how to add a new custom field in the Product Data section of a WooCommerce product page:

1. function woocommerce\_product\_custom\_fields()
2. {
3. $args = array(
4. 'id' => 'woocommerce\_custom\_fields',
5. 'label' => \_\_('Add WooCommerce Custom Fields', 'cwoa'),
6. );
7. woocommerce\_wp\_text\_input($args);
8. }
9.
10. 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.

![](https://www.cloudways.com/blog/wp-content/uploads/WooCommerce-custom-fields.jpg)

### Save Custom Fields 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.

1. function save\_woocommerce\_product\_custom\_fields($post\_id)
2. {
3. $product = wc\_get\_product($post\_id);
4. $custom\_fields\_woocommerce\_title = isset($\_POST\['woocommerce\_custom\_fields']) ? $\_POST\['woocommerce\_custom\_fields'] : '';
5. $product->update\_meta\_data('woocommerce\_custom\_fields', sanitize\_text\_field($custom\_fields\_woocommerce\_title));
6. $product->save();
7. }
8.
9.
10. add\_action('woocommerce\_process\_product\_meta', 'save\_woocommerce\_product\_custom\_fields');

### WooCommerce Display Custom Fields On Product Page

The following snippet displays the custom fields. The process I simple – it checks the custom field value and confirms that it has a value. if the case is true, it displays the value as the title of the field.

1. function woocommerce\_custom\_fields\_display()
2. {
3. global $post;
4. $product = wc\_get\_product($post->ID);
5. $custom\_fields\_woocommerce\_title = $product->get\_meta('woocommerce\_custom\_fields');
6. if ($custom\_fields\_woocommerce\_title) {
7. printf(
8. '\<div>\<label>%s\</label>\<input type="text" id="woocommerce\_product\_custom\_fields\_title" name="woocommerce\_product\_custom\_fields\_title" value="">\</div>',
9. esc\_html($custom\_fields\_woocommerce\_title)
10. );
11. }
12. }
13.
14. 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 title of the field is “WooCommerce product custom fields title”, same as the id value in the snippet.

![](https://www.cloudways.com/blog/wp-content/uploads/WooCommerce-product-custom-fields.jpg)

&#x20;

#### Conclusion

In this article, I discussed how to add custom fields to the [WooCommerce product page](https://www.cloudways.com/blog/display-product-description-in-product-pages-on-woocommerce/). 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 This Article

*
* &#x20;
*
* &#x20;
*
* &#x20;
*

Customer Review at ![](https://www.cloudways.com/blog/wp-content/uploads/g2-crowd-logo.png)

**“Great performance for the price, and plenty of control”**

Sean P \[SMB Owner]

[FREE 3-DAY TRIAL](https://www.cloudways.com/en/woocommerce-hosting.php?utm_source=wordpressBlog\&utm_medium=bottomCTA\&utm_campaign=newctas)![](https://secure.gravatar.com/avatar/55fb92ae9ea7eca129678ce04ff52ac7?s=128\&d=mm\&r=g)

[**Owais Alam**](https://www.cloudways.com/blog/author/owaisalam/)

is the WordPress Community Manager at Cloudways - A Managed [WooCommerce Hosting](https://www.cloudways.com/en/woocommerce-hosting.php) 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
