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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

19 Comments

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

    Reply

    1. I am really glad it helps! 🙂

      Reply

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

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

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

    Reply

    1. 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/

      Reply

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

    1. Are there any errors? What doesn’t work? More explanation of what you’ve tried to debug and what is the actual error would help a lot.

      Reply

      1. I want that the field show in the general product data, and this not display anything.

        I put the code in the my theme functions.php. Is it correct?

        Dont show visible errors

        Reply

        1. Hi Rita, putting the code in the functions.php should be correct, although I would recommend separating such functionality into a plugin if you plan to use it even after you change the theme.

          I also don’t see why this would not work. Do you have the WP_DEBUG constant in wp-config.php set to TRUE? define( 'WP_DEBUG', true); Maybe it will show you some hidden errors.

          Reply

  5. Which file do you make the edits in?

    Reply

    1. You can add that as a new separate plugin or in your own plugin’s files. If you want to add that in a theme (which I don’t recommend) then you can add that inside the functions.php or in a separate file (recommended) and then include it functions.php.

      Reply

  6. Hi Igor, any idea on how to make the tab content editable from the Products admin in the dashboard? I want to have a textfield input like “Product Short Description” where it is using native WordPress post text box. How to do that?

    My case is I create a new tab for which I name it “Table of Content”, and I want this tab has similar function like “Description” tab. That means, I could write something/content for this tab using HTML text box for WordPress.

    Reply

    1. Hi Ahmad,

      if you want the textarea field, you can check WooCommerce function for it:
      https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_text_input.html#14-79

      If you would like to use WP Editor, then you would need to create your own field and using https://developer.wordpress.org/reference/functions/wp_editor/ to add the WP Editor.

      Reply

  7. Thanks for this, it’s helped me figure out a couple things I’ve had on my todo list for a while now 🙂

    Question about the “my_custom_input” ID in tab_panel.php on line 11:

    I have some pre-existing metaboxes with ID’s that start with an underline, so I’m trying to remove the metaboxes and use a product data tab instead.

    But it seems this code doesn’t save the input if I change the ID to _custom_input, for instance. It works fine with a letter starting the id name.

    Any idea why that would be happening?

    Reply

    1. Happy to help, Robert 🙂

      Reply

  8. Amazing post! Just what I needed.. the Woo Codex just doesn’t clearly lay things out like this.. or a least I couldn’t find it. For those looking for a great companion to this post for Variable Product custom fields I recommend this one. http://www.remicorson.com/woocommerce-custom-fields-for-variations/

    Reply

  9. Hi..
    I developed my website to sell video files. In the single product page I list all files of product that buyers can download them. I want to add some options same as duration and size of each file in backend. and then show them in single product page. How can I do that?

    Reply

    1. Hi Farzin, you would have to check the code where WooCommerce adds the files option. Then check if there are any hooks which you could use to add new fields.

      Reply

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.