---
description: https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/
---

# How To Add WooCommerce Custom Product Fields (ok)

[https://rudrastyh.com/woocommerce/product-data-metabox.html](https://rudrastyh.com/woocommerce/product-data-metabox.html)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-M53oBTxMfDOkrcH6JwI%2F-M53oHLIJA_hDHWEM3B3%2FScreenshot_2.png?alt=media\&token=cb8397e9-27c1-4ebe-ada5-56f5eeec85a5)

Ví dụ đã hoàn thành:

```
add_action( 'woocommerce_product_options_inventory_product_data', 'misha_adv_product_options');
function misha_adv_product_options(){
  $args = array(
    'label'   => 'Xuất xứ',
    'placeholder' => ' Ví dụ: Hà Nội',
    'class' => '',
    'style' => '',
    'wrapper_class' => '',
    'value' => get_post_meta( get_the_ID(), 'super_product', true ), // if empty, retrieved from post meta where id is the meta_key
    'id' => 'super_product', // required
    'name' => 'super_product', //name will set from id if empty
    'type' => '',
    'desc_tip' => true,
    'data_type' => '',
    'custom_attributes' => '', // array of attributes 
    'description' => 'Sản phẩm xuất xứ từ đâu'
  );
  echo "<style>.woocommerce-help-tip {display:none;}#super_product { padding-left: 10px; }</style>";
  echo '<div class="options_group">';
    woocommerce_wp_text_input( $args );
  echo '</div>';
} 
add_action( 'woocommerce_process_product_meta', 'misha_save_fields', 10, 1 );
function misha_save_fields( $post_id ){
  $custom_field_value = isset( $_POST['super_product'] ) ? $_POST['super_product'] : '';
  $product = wc_get_product( $post_id );
  $product->update_meta_data( 'super_product', $custom_field_value );
  $product->save();
}
```

meta.php

```
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

global $product;
?>
<div class="product_meta">
	<?php do_action( 'woocommerce_product_meta_start' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Hãng sản xuất:', 'Hãng sản xuất:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
		<span class="sku_wrapper"><?php esc_html_e( 'Mã sản phẩm:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
	<?php endif; ?>
	<?php if(get_post_meta( $product->get_id(), 'super_product', true )){
		echo '<span class="sku_wrapper">Xuất xứ: <span class="area">'.get_post_meta( $product->get_id(), "super_product", true ).'</span></span>';
	} ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

```

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-M53oBTxMfDOkrcH6JwI%2F-M53p5WldSmIRmySK3xJ%2FScreenshot_4.png?alt=media\&token=27b368d1-00a1-4769-95a2-2da4943ff1f2)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-M53oBTxMfDOkrcH6JwI%2F-M53oq-IRVj5-Dm3kYQ2%2FScreenshot_3.png?alt=media\&token=c78bdd8b-65a4-4d93-814e-b157bafe59ab)



When working on a WooCommerce add-on or a custom solution, you will sometimes have to add some WooCommerce custom product fields so that you can save additional data for each product. In this tutorial we will go through adding fields to existing product tabs and also create a new product tab.

### Adding WooCommerce Custom Product Fields

When you want to add a custom product field inside a WooCommerce metabox, you can add it creating a custom input. That is alright and you can work with that. But, creating custom product fields can be a cumbersome task if you want to add multiple fields.

Creating your own custom markup for the product fields is only fine when you are creating a custom layout in the metabox. But, if you are just going to use regular inputs, then use the WooCommerce product fields functions. It will be much easier for you to create many product fields and you will also the WooCommerce API for that.

Let’s learn about those functions.

#### Text Field

The text input is the basic input field that can receive a different type such as _text, number, date_ etc. Everything that HTML5 does support, you can add there. But, don’t use it if you are going to add a **radio** input or a **checkbox**. There are two other functions for that. The function name for adding the text input as a WooCommerce product field is `woocommerce_wp_text_input`.

|   | \<?php                                                                          |
| - | ------------------------------------------------------------------------------- |
|   |                                                                                 |
|   | $args = array(                                                                  |
|   |  'label' => '', // Text in Label                                                |
|   |  'placeholder' => '',                                                           |
|   |  'class' => '',                                                                 |
|   |  'style' => '',                                                                 |
|   |  'wrapper\_class' => '',                                                        |
|   |  'value' => '', // if empty, retrieved from post meta where id is the meta\_key |
|   |  'id' => '', // required                                                        |
|   |  'name' => '', //name will set from id if empty                                 |
|   |  'type' => '',                                                                  |
|   |  'desc\_tip' => '',                                                             |
|   |  'data\_type' => '',                                                            |
|   |  'custom\_attributes' => '', // array of attributes                             |
|   |  'description' => ''                                                            |
|   | );                                                                              |
|   |                                                                                 |
|   | woocommerce\_wp\_text\_input( $args );                                          |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/text_input.php)[text\_input.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-text_input-php) hosted with ❤ by [GitHub](https://github.com/)

#### Checkbox Field

The checkbox input receives some other parameters and it’s created with the function `woocommerce_wp_checkbox`. The parameter `cbvalue` is the value which will make the checkbox _checked_. This value will be matched againts the parameter `value`. If they have the same value, the checkbox field will be checked.

|   | \<?php                                                                          |
| - | ------------------------------------------------------------------------------- |
|   |                                                                                 |
|   | $args = array(                                                                  |
|   |  'label' => '', // Text in Label                                                |
|   |  'class' => '',                                                                 |
|   |  'style' => '',                                                                 |
|   |  'wrapper\_class' => '',                                                        |
|   |  'value' => '', // if empty, retrieved from post meta where id is the meta\_key |
|   |  'id' => '', // required                                                        |
|   |  'name' => '', //name will set from id if empty                                 |
|   |  'cbvalue' => '',                                                               |
|   |  'desc\_tip' => '',                                                             |
|   |  'custom\_attributes' => '', // array of attributes                             |
|   |  'description' => ''                                                            |
|   | );                                                                              |
|   |                                                                                 |
|   | woocommerce\_wp\_checkbox( $args );                                             |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/checkbox_input.php)[checkbox\_input.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-checkbox_input-php) hosted with ❤ by [GitHub](https://github.com/)

#### Radio Field

To create the radio input, we will need to use the function `woocommerce_wp_radio`. To create various radio options, you will need to use the parameter `options`. This will be an associative array where the `key` will be the value of the input and the `value` will be text of that input.

|   | \<?php                                                                          |
| - | ------------------------------------------------------------------------------- |
|   |                                                                                 |
|   | $args = array(                                                                  |
|   |  'label' => '', // Text in Label                                                |
|   |  'class' => '',                                                                 |
|   |  'style' => '',                                                                 |
|   |  'wrapper\_class' => '',                                                        |
|   |  'value' => '', // if empty, retrieved from post meta where id is the meta\_key |
|   |  'id' => '', // required                                                        |
|   |  'name' => '', //name will set from id if empty                                 |
|   |  'options' => '', // Options for radio inputs, array                            |
|   |  'desc\_tip' => '',                                                             |
|   |  'description' => ''                                                            |
|   | );                                                                              |
|   |                                                                                 |
|   | woocommerce\_wp\_radio( $args );                                                |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/radio_input.php)[radio\_input.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-radio_input-php) hosted with ❤ by [GitHub](https://github.com/)

#### Textarea Field

The textarea input is done with the function `woocommerce_wp_textarea_input`. The parameters are almost the same as for the text input but we can also set the rows and columns in parameters `rows` and `cols`.

|   | \<?php                                                                          |
| - | ------------------------------------------------------------------------------- |
|   |                                                                                 |
|   | $args = array(                                                                  |
|   |  'label' => '', // Text in Label                                                |
|   |  'placeholder' => '',                                                           |
|   |  'class' => '',                                                                 |
|   |  'style' => '',                                                                 |
|   |  'wrapper\_class' => '',                                                        |
|   |  'value' => '', // if empty, retrieved from post meta where id is the meta\_key |
|   |  'id' => '', // required                                                        |
|   |  'name' => '', //name will set from id if empty                                 |
|   |  'rows' => '',                                                                  |
|   |  'cols' => '',                                                                  |
|   |  'desc\_tip' => '',                                                             |
|   |  'custom\_attributes' => '', // array of attributes                             |
|   |  'description' => ''                                                            |
|   | );                                                                              |
|   |                                                                                 |
|   | woocommerce\_wp\_textarea\_input( $args );                                      |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/textarea_input.php)[textarea\_input.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-textarea_input-php) hosted with ❤ by [GitHub](https://github.com/)

#### Select Field

The select input has something similar with the radio input. The parameter `options` will be used to create all the options. The function that will create the select field is `woocommerce_wp_select`.

|   | \<?php                                                                          |
| - | ------------------------------------------------------------------------------- |
|   |                                                                                 |
|   |                                                                                 |
|   | $args = array(                                                                  |
|   |  'label' => '', // Text in Label                                                |
|   |  'class' => '',                                                                 |
|   |  'style' => '',                                                                 |
|   |  'wrapper\_class' => '',                                                        |
|   |  'value' => '', // if empty, retrieved from post meta where id is the meta\_key |
|   |  'id' => '', // required                                                        |
|   |  'name' => '', //name will set from id if empty                                 |
|   |  'options' => '', // Options for select, array                                  |
|   |  'desc\_tip' => '',                                                             |
|   |  'custom\_attributes' => '', // array of attributes                             |
|   |  'description' => ''                                                            |
|   | );                                                                              |
|   |                                                                                 |
|   | woocommerce\_wp\_select( $args );                                               |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/select_input.php)[select\_input.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-select_input-php) hosted with ❤ by [GitHub](https://github.com/)

#### Hidden field

The hidden field can be used for some data that will be used internally and will not be needed to change by the user.

|   | \<?php                                   |
| - | ---------------------------------------- |
|   | $args = array(                           |
|   |  'value' => '',                          |
|   |  'class' => '',                          |
|   |  'id' => ''                              |
|   | );                                       |
|   |                                          |
|   | woocommerce\_wp\_hidden\_input( $args ); |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/hidden_input.php)[hidden\_input.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-hidden_input-php) hosted with ❤ by [GitHub](https://github.com/)

### Default Product Tabs

Now that we know all the functions that we can use to add our own WooCommerce custom product fields, let’s learn about the default product tabs. There are 7 default tabs:

* General
* Inventory
* Shipping
* Linked Products
* Attributes
* Variations
* Advanced

Some of those tabs will be only shown for a specific type of the product. In each of those tabs we can hook our own function to add our custom product fields. Here are the hooks we can use:

**General Tab**

* `woocommerce_product_options_pricing`
* `woocommerce_product_options_downloads`
* `woocommerce_product_options_tax`
* `woocommerce_product_options_general_product_data`

**Inventory Tab**

* `woocommerce_product_options_sku`
* `woocommerce_product_options_stock`
* `woocommerce_product_options_stock_fields`
* `woocommerce_product_options_stock_status`
* `woocommerce_product_options_sold_individually`
* `woocommerce_product_options_inventory_product_data`

**Shipping Tab**

* `woocommerce_product_options_dimensions`
* `woocommerce_product_options_shipping`

**Linked Products Tab**

* `woocommerce_product_options_related`

**Attributes**

* `woocommerce_product_options_attributes`

**Variations**

* `woocommerce_variable_product_bulk_edit_actions`

**Advanced**

* `woocommerce_product_options_reviews`
* `woocommerce_product_options_advanced`

#### Example

Here is an example of the general tab and some WooCommerce custom product fields.

|   | \<?php                                                                                             |
| - | -------------------------------------------------------------------------------------------------- |
|   |                                                                                                    |
|   | add\_action( 'woocommerce\_product\_options\_pricing', 'my\_woo\_custom\_price\_field' );          |
|   | /\*\*                                                                                              |
|   | \* Add a Christmas Price field                                                                     |
|   | \*\*/                                                                                              |
|   | function my\_woo\_custom\_price\_field() {                                                         |
|   |                                                                                                    |
|   |  $field = array(                                                                                   |
|   |  'id' => 'christmas\_price',                                                                       |
|   |  'label' => \_\_( 'Christmas Price', 'textdomain' ),                                               |
|   |  'data\_type' => 'price' //Let WooCommerce formats our field as price field                        |
|   |  );                                                                                                |
|   |                                                                                                    |
|   |  woocommerce\_wp\_text\_input( $field );                                                           |
|   | }                                                                                                  |
|   |                                                                                                    |
|   | add\_action( 'woocommerce\_product\_options\_general\_product\_data', 'my\_woo\_custom\_fields' ); |
|   | /\*\*                                                                                              |
|   | \* Add a select Field at the bottom                                                                |
|   | \*/                                                                                                |
|   | function my\_woo\_custom\_fields() {                                                               |
|   |  $select\_field = array(                                                                           |
|   |  'id' => 'my\_select',                                                                             |
|   |  'label' => \_\_( 'Custom Select', 'textdomain' ),                                                 |
|   |  'options' => array(                                                                               |
|   |  'value1' => \_\_( 'Text 1', 'textdomain' ),                                                       |
|   |  'value2' => \_\_( 'Text 2', 'textdomain' )                                                        |
|   |  )                                                                                                 |
|   |  );                                                                                                |
|   |  woocommerce\_wp\_select( $select\_field );                                                        |
|   | }                                                                                                  |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/general_tab.php)[general\_tab.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-general_tab-php) hosted with ❤ by [GitHub](https://github.com/)

### Custom Product Tab

Some add-ons or solutions will also require additional product tabs. We can add custom product tabs using a filter or an action:

* Filter: `woocommerce_product_data_tabs`
* Action: `woocommerce_product_write_panel_tabs`

If we are going to use the action, then we will need to write the whole markup ourselves. If we are going to use the filter, we just need to extend the existing tab array with our new one. We also need to add the panel that we will show when our tab is clicked.

I will now show you both ways how to add the tabs.

#### Custom Tab with Filter

When adding a tab using the filter, you need to define the `label`, `target` and `class`. The target will be the attribute `id` of our panel.

|   | \<?php                                                                |
| - | --------------------------------------------------------------------- |
|   |                                                                       |
|   | add\_filter( 'woocommerce\_product\_data\_tabs', 'my\_custom\_tab' ); |
|   | /\*\*                                                                 |
|   | \* Adding a custom tab                                                |
|   | \*/                                                                   |
|   | function my\_custom\_tab( $tabs ) {                                   |
|   |                                                                       |
|   |  $tabs\['custom\_tab'] = array(                                       |
|   |  'label' => \_\_( 'My Custom Tab', 'textdomain' ),                    |
|   |  'target' => 'the\_custom\_panel',                                    |
|   |  'class' => array(),                                                  |
|   |  );                                                                   |
|   |                                                                       |
|   |  return $tabs;                                                        |
|   | }                                                                     |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/tab_filter.php)[tab\_filter.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-tab_filter-php) hosted with ❤ by [GitHub](https://github.com/)

#### Custom Tab with Action

When defining our custom tab with the action, then we need to create the whole markup. This means adding a `li` item and also the `a` with the target as the value in `href`.\


|   | \<?php                                                                                |
| - | ------------------------------------------------------------------------------------- |
|   |                                                                                       |
|   | add\_action( 'woocommerce\_product\_write\_panel\_tabs', 'my\_custom\_tab\_action' ); |
|   |                                                                                       |
|   | /\*\*                                                                                 |
|   | \* Adding a custom tab                                                                |
|   | \*/                                                                                   |
|   | function my\_custom\_tab\_action() {                                                  |
|   |  ?>                                                                                   |
|   |  \<li class="custom\_tab">                                                            |
|   |  \<a href="#the\_custom\_panel">                                                      |
|   |  \<span>\<?php \_e( 'My Custom Tab', 'textdomain' ); ?>\</span>                       |
|   |  \</a>                                                                                |
|   |  \</li>                                                                               |
|   |  \<?php                                                                               |
|   | }                                                                                     |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/tab_action.php)[tab\_action.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-tab_action-php) hosted with ❤ by [GitHub](https://github.com/)

#### Custom Panel

Since we have our custom tab defined, we also need to add a panel that will show up when clicking our tab. We are adding a custom panel by hooking into `woocommerce_product_data_panels`.

|   | \<?php                                                                     |
| - | -------------------------------------------------------------------------- |
|   |                                                                            |
|   | add\_action( 'woocommerce\_product\_data\_panels', 'custom\_tab\_panel' ); |
|   |                                                                            |
|   | function custom\_tab\_panel() {                                            |
|   |  ?>                                                                        |
|   |  \<div id="the\_custom\_panel" class="panel woocommerce\_options\_panel">  |
|   |  \<div class="options\_group">                                             |
|   |  \<?php                                                                    |
|   |  $field = array(                                                           |
|   |  'id' => 'my\_custom\_input',                                              |
|   |  'label' => \_\_( 'Custom Input', 'textdomain' ),                          |
|   |  );                                                                        |
|   |                                                                            |
|   |  woocommerce\_wp\_text\_input( $field );                                   |
|   |  ?>                                                                        |
|   |  \</div>                                                                   |
|   |  \</div>                                                                   |
|   | \<?php                                                                     |
|   | }                                                                          |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/tab_panel.php)[tab\_panel.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-tab_panel-php) hosted with ❤ by [GitHub](https://github.com/)

Be sure to add the same value in the attribute `id` that you have defined as the `target`.

### Saving WooCommerce Custom Product Fields

The last part that we also need to define is how to save our product field. To save the product fields, you need to use the action `woocommerce_process_product_meta`.

|   | \<?php                                                                                                |
| - | ----------------------------------------------------------------------------------------------------- |
|   |                                                                                                       |
|   | add\_action( 'woocommerce\_process\_product\_meta', 'save\_custom\_field' );                          |
|   |                                                                                                       |
|   | function save\_custom\_field( $post\_id ) {                                                           |
|   |                                                                                                       |
|   |  $custom\_field\_value = isset( $\_POST\['my\_custom\_input'] ) ? $\_POST\['my\_custom\_input'] : ''; |
|   |                                                                                                       |
|   |  $product = wc\_get\_product( $post\_id );                                                            |
|   |  $product->update\_meta\_data( 'my\_custom\_input', $custom\_field\_value );                          |
|   |  $product->save();                                                                                    |
|   |                                                                                                       |
|   | }                                                                                                     |

[view raw](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d/raw/cdfc4eab904a2f6934a202ff67a99633829b9b75/save_product.php)[save\_product.php](https://gist.github.com/igorbenic/1106ccf44c1061d80c2738bcbe09181d#file-save_product-php) hosted with ❤ by [GitHub](https://github.com/)

We are just getting the `WC_Product` object and then update/add a new metadata. After that, we are calling the method `save()` to save every new change.

### Conclusion

Since WooCommerce uses the WordPress Plugin API, you can customize every possible detail. To add WooCommerce custom product fields, you can use various actions and filters to achieve it. In this tutorial, you have learned a lot about custom product fields and actions/filter that you can use to do that.

**If you have ever created your own custom product fields, please do share your experience in the comments below.**

If you would like to learn more about WooCommerce, you can check out my eBook:

[![Book WooCommerce for Developer to buy](https://www.ibenic.com/wp-content/uploads/2016/08/woodev-banner.png)](https://leanpub.com/woodev)[Become a Sponsor](https://www.ibenic.com/sponsor/?ss_content_id=1559)![](https://www.ibenic.com/wp-content/plugins/thrive-leads/editor-templates/_form_css/images/set_22_icon.png)

###

### Want to Learn more?

Get my articles to your inbox and read them with your email app, phone or just get notified on my new products. Join other 500+ subscribers.I agree to subscribe to your Newsletter and Product Emails as described in your [Privacy Policy](https://www.ibenic.com/privacy-policy/).SUBSCRIBE

[Or you can support my work by subscribing to my premium content here.](https://www.ibenic.com/register/)[Get Access to Premium Content](https://www.ibenic.com/register)

#### LIKE THIS:

Loading...

* Posted in: [Plugins](https://www.ibenic.com/category/plugins/), [WordPress](https://www.ibenic.com/category/wordpress/)&#x20;
* Tagged in: [product fields](https://www.ibenic.com/tag/product-fields/), [woocommerce](https://www.ibenic.com/tag/woocommerce/), [woocommerce custom](https://www.ibenic.com/tag/woocommerce-custom/)

[![](https://secure.gravatar.com/avatar/87402f8959b096337486adbd78d78c93?s=65\&d=mm\&r=g)](https://www.ibenic.com/author/ibenic/)

#### Posted by Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.[ All Posts](https://www.ibenic.com/author/ibenic/) [ Website](https://www.ibenic.com/)

#### SHARE THIS:

* [ManageWP.org](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/?share=mwp\&nb=1)
* [Pinterest3](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/?share=pinterest\&nb=1)
* [Facebook](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/?share=facebook\&nb=1)
* [Twitter](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/?share=twitter\&nb=1)
* [LinkedIn](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/?share=linkedin\&nb=1)
* [Email](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/?share=email\&nb=1)
*

#### 24 Comments

1.  ![](https://secure.gravatar.com/avatar/26b974f683bd00d19bc37d2a4c6decad?s=75\&d=mm\&r=g)ts [AUGUST 1, 2017 AT 2:26 PM](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-7162)

    Thanks a lot! This was very helpful for a project I’m working on!

    [Reply](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-7162)

    1.  ![](https://secure.gravatar.com/avatar/87402f8959b096337486adbd78d78c93?s=75\&d=mm\&r=g)[Igor Benic](https://www.ibenic.com/) [AUGUST 2, 2017 AT 11:31 AM](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-7208)

        I am really glad it helps! 🙂

        [Reply](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-7208)
2.  ![](https://secure.gravatar.com/avatar/6ff13173bba69bff0070209c2d8c5563?s=75\&d=mm\&r=g)Matt [AUGUST 31, 2017 AT 5:10 PM](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-8243)

    This is the best guide, and I’ve looked through tens of those. Thank you!

    How come there’s no mention of this in woocommerce docs? Or at least I couldn’t find it 😛

    [Reply](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-8243)

    1.  ![](https://secure.gravatar.com/avatar/87402f8959b096337486adbd78d78c93?s=75\&d=mm\&r=g)[Igor Benic](https://www.ibenic.com/) [AUGUST 31, 2017 AT 9:39 PM](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-8252)

        Hi Matt, I am really glad it’s helpful to you. I am not sure if that’s somewhere in the WooCommerce docs.

        It is such a big plugin so it might be hard to cover everything. I usually browse the core code of the plugin as I find it really good to learn how something works:)

        [Reply](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-8252)
3.  ![](https://secure.gravatar.com/avatar/6c2c7c27e98ddeb70cf868f4711a87b1?s=75\&d=mm\&r=g)shalini [DECEMBER 15, 2017 AT 11:55 PM](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-12406)

    how to add a file upload field in product new setting panel

    [Reply](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-12406)

    1.  ![](https://secure.gravatar.com/avatar/87402f8959b096337486adbd78d78c93?s=75\&d=mm\&r=g)[Igor Benic](https://www.ibenic.com/) [DECEMBER 16, 2017 AT 2:53 PM](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-12435)

        To add an upload field you would need to add a file input `<input type="file" name="custom_file" />`. After that, you would need to check on the backend part with the global `$_FILES` if that input was filled. After that you will have to process the upload. I have an article on uploading files through AJAX. You may find the upload code helpful there: [https://www.ibenic.com/wordpress-file-upload-with-ajax/](https://www.ibenic.com/wordpress-file-upload-with-ajax/)

        [Reply](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-12435)
4.  ![](https://secure.gravatar.com/avatar/958bb815e0f9f712fdef5fd3aa521c1d?s=75\&d=mm\&r=g)[Rita César](http://desarrollo.xacta.com.ve/) [JANUARY 21, 2018 AT 10:12 PM](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-13276)

    Hi, I wrote this code in my theme functions, and dnot work

    add\_action( ‘woocommerce\_product\_options\_general\_product\_data’, ‘my\_custom\_capacidad\_field’ );\
    function my\_custom\_capacidad\_field() {

    $field = array(\
    ‘id’ => ‘capacidad’,\
    ‘placeholder’ => ‘capacidad’,\
    ‘label’ => \_\_(‘Capacidad’, ‘woocommerce’)\
    );

    woocommerce\_wp\_text\_input( $field );\
    }

    add\_action( ‘woocommerce\_process\_product\_meta’, ‘save\_custom\_field’ );\
    function save\_custom\_field( $post\_id ) {

    $custom\_field\_value = isset( $\_POST\[‘capacidad’] ) ? $\_POST\[‘capacidad’] : ”;

    $product = wc\_get\_product( $post\_id );\
    $product->update\_meta\_data( ‘capacidad’, $custom\_field\_value );\
    $product->save();\
    }

    [Reply](https://www.ibenic.com/how-to-add-woocommerce-custom-product-fields/#comment-13276)

## Handle WooCommerce Product Settings

Let me show the beautiful way of adding options to WooCommerce products.Jul 3rd, 2019/[13 comments](https://rudrastyh.com/woocommerce/product-data-metabox.html#comments)

* [Action hooks](https://rudrastyh.com/woocommerce/product-data-metabox.html#product_metabox_hooks)
* [Example 1](https://rudrastyh.com/woocommerce/product-data-metabox.html#product_metabox_example)
* [Example 2 with creating a custom tab](https://rudrastyh.com/woocommerce/product-data-metabox.html#product_metabox_custom_tab)

I understand that if you already read [my metabox tutorial](https://rudrastyh.com/wordpress/meta-boxes.html) and use [my metabox plugin](https://rudrastyh.com/plugins/meta-boxes-options-pages) (or maybe another plugin – doesn’t matter), you’re a master of meta boxes 💪 and you can easily create your custom one for CPT WooCommerce product. But I would like to talk about more seamless integration – hooking the default WooCommerce Product Data metabox with tabs.![WooCommerce default Product Data meta box](https://rudrastyh.com/wp-content/uploads/2018/04/product-data-metabox.png)Do you agree with me, that it is much better to add options into this metabox than creating another one?

By the way, if you want to remove Virtual and/or Downloadable checkboxes here, take a look at [this tutorial](https://rudrastyh.com/woocommerce/remove-virtual-and-downloadable.html).

### How to add some fields to any of the default tabs of Product data metabox

“There is a hook for that!”

Actually there are _hooks for each tab,_ which allows you to add any custom content after the default option fields.

#### Action hooks[#](https://rudrastyh.com/woocommerce/product-data-metabox.html#product_metabox_hooks) <a href="#product_metabox_hooks" id="product_metabox_hooks"></a>

**General tab**

Here are 3 action hooks for each option group!

* First option group with pricing options – `woocommerce_product_options_pricing`,
* Second option group, downloadable product settings – `woocommerce_product_options_downloads`,
* Third option group, tax settings – `woocommerce_product_options_tax`.

If you want to create you own option group below, use `woocommerce_product_options_general_product_data`, simple example:

```
add_action( 'woocommerce_product_options_general_product_data', 'misha_option_group' );
 
function misha_option_group() {
	echo '<div class="option_group">test</div>';
}
```

Note, that if you use one of the other 3 hooks, your fields shouldn’t be wrapped into `<div class="option_group">` element.

**Inventory tab**

* First group, under stock status settings – `woocommerce_product_options_stock_status`,
* Second one, `woocommerce_product_options_sold_individually`.

Or add your custom groups with `woocommerce_product_options_inventory_product_data`.

**Shipping tab**

* First group with product dimension – `woocommerce_product_options_dimensions`,
* Second group – `woocommerce_product_options_shipping`.

Here is no hook for your custom options group 😱 but if you absolutely need it, you can do some tricks with the second hook and closing `</div>` element.

**Linked products tab**

Just one hook is here – `woocommerce_product_options_related`.

**Advanced tab**

Two hooks are here – `woocommerce_product_options_reviews` for the reviews option group and `woocommerce_product_options_advanced` for those who want to create an own option group.

#### Let’s add some options now\![#](https://rudrastyh.com/woocommerce/product-data-metabox.html#product_metabox_example) <a href="#product_metabox_example" id="product_metabox_example"></a>

The code is below but here are some notes about it:

* Remember that by default a checked checkbox value is `on`,
* It is not necessary to deal with raw HTML, because there are WooCommerce functions for that – `woocommerce_wp_checkbox()`, `woocommerce_wp_text_input()`, `woocommerce_wp_textarea_input()`, `woocommerce_wp_select()` etc, maybe you already remember some of them from [this tutorial](https://rudrastyh.com/woocommerce/customize-order-details.html).
* `desc_tip` (line 10) is a very interesting parameter – if set to true, the value of `description` will be displayed like a tip, in another case it will printed near the field.
* It is so awesome that WooCommerce allows to process product metadata with `woocommerce_process_product_meta` action hook (not with the standard `save_post`) because in this case we do not have to do any conditional checks (nonces etc).

```
```

```
add_action( 'woocommerce_product_options_advanced', 'misha_adv_product_options');
function misha_adv_product_options(){
 
	echo '<div class="options_group">';
 
	woocommerce_wp_checkbox( array(
		'id'      => 'super_product',
		'value'   => get_post_meta( get_the_ID(), 'super_product', true ),
		'label'   => 'This is a super product',
		'desc_tip' => true,
		'description' => 'If it is not a regular WooCommerce product',
	) );
 
	echo '</div>';
 
}
 
 
add_action( 'woocommerce_process_product_meta', 'misha_save_fields', 10, 2 );
function misha_save_fields( $id, $post ){
 
	//if( !empty( $_POST['super_product'] ) ) {
		update_post_meta( $id, 'super_product', $_POST['super_product'] );
	//} else {
	//	delete_post_meta( $id, 'super_product' );
	//}
 
}
```

Result of inserting the above code somewhere in `functions.php`, custom plugin etc.![WooCommerce custom product option under the advanced tab.](https://rudrastyh.com/wp-content/uploads/2018/04/woocommerce-product-data-custom-options.png)As you can see on the screenshot, description is displayed as a tip, but it could be displayed nearby with `desc_tip` parameter set to false (or not set at all).

### How to add your custom tab with options[#](https://rudrastyh.com/woocommerce/product-data-metabox.html#product_metabox_custom_tab) <a href="#product_metabox_custom_tab" id="product_metabox_custom_tab"></a>

Before just copying the code below, please read this:

* You can unset any of the default tabs (line 7), using the ids `general`, `shipping`, `linked_product`, `attribute`, `variations`, `advanced`, but I’m not sure it is a good idea to do.
* Awesome feature that allows you to show or hide tabs or sections or single option fields for specific product types! (line 10 or 43). Just use some of these classes `show_if_simple`, `show_if_grouped`, `show_if_external`, `show_if_variable`, `show_if_virtual`, `show_if_downloadable`.
* Use the priority parameter (line 13) if you would like your tab to be displayed at the specific position.
* In the below example there is just one option group but you can use more groups.
* Do not forget to save the settings with `woocommerce_process_product_meta` action hook, I believe you can do it yourself 😁

```
```

```
/*
 * Tab
 */
add_filter('woocommerce_product_data_tabs', 'misha_product_settings_tabs' );
function misha_product_settings_tabs( $tabs ){
 
	//unset( $tabs['inventory'] );
 
	$tabs['misha'] = array(
		'label'    => 'Misha',
		'target'   => 'misha_product_data',
		'class'    => array('show_if_virtual'),
		'priority' => 21,
	);
	return $tabs;
 
}
 
/*
 * Tab content
 */
add_action( 'woocommerce_product_data_panels', 'misha_product_panels' );
function misha_product_panels(){
 
	echo '<div id="misha_product_data" class="panel woocommerce_options_panel hidden">';
 
	woocommerce_wp_text_input( array(
		'id'                => 'misha_plugin_version',
		'value'             => get_post_meta( get_the_ID(), 'misha_plugin_version', true ),
		'label'             => 'Plugin version',
		'description'       => 'Description when desc_tip param is not true'
	) );
 
	woocommerce_wp_textarea_input( array(
		'id'          => 'misha_changelog',
		'value'       => get_post_meta( get_the_ID(), 'misha_changelog', true ),
		'label'       => 'Changelog',
		'desc_tip'    => true,
		'description' => 'Prove the plugin changelog here',
	) );
 
	woocommerce_wp_select( array(
		'id'          => 'misha_ext',
		'value'       => get_post_meta( get_the_ID(), 'misha_ext', true ),
		'wrapper_class' => 'show_if_downloadable',
		'label'       => 'File extension',
		'options'     => array( '' => 'Please select', 'zip' => 'Zip', 'gzip' => 'Gzip'),
	) );
 
	echo '</div>';
 
}
 
/*
 * Save
 */
add_action('woocommerce_process_product_meta', 'bla_bla_bla' ...
```

The result on the screenshot.![Example of a custom tab with options in the WooCommerce product data metabox.](https://rudrastyh.com/wp-content/uploads/2018/04/woocommerce-product-data-add-tab.gif)

Do you see a custom icon and do not know how I did it? 😁 Some custom CSS and that’s all. I even used the default WordPress icon set, already connected to the admin area – [Dashicons](https://developer.wordpress.org/resource/dashicons/).

So, just go to their website → Select an icon → Click the Copy CSS button, paste it in admin area any way you like.

```
```

```
add_action('admin_head', 'misha_css_icon');
function misha_css_icon(){
	echo '<style>
	#woocommerce-product-data ul.wc-tabs li.misha_options.misha_tab a:before{
		content: "\f487";
	}
	</style>';
}
```

#### The most&#x20;
