Mastering WooCommerce Products Custom Fields

WooCommerce is without any doubt the more powerful e-commerce plugin for WordPress. And what i love with WooCommerce is that there’s an API for nearly everything. Today, i decided to show you how you can customize WooCommerce dynamically, and in particular how to add custom fields to any WooCommerce products. Here is the final result of what you’ll learn to do in this post:

[box type=”yellow”]If you want to add custom fields to product variations, click here![/box]

mastering-woocommerce-product-fields

As you can on the screenshot above we will see how to add custom fields to the product edition page. To do that we will be working on the functions.php file of your theme’s folder only.

To begin we will add custom fields to the product general tab, we will see later how to add custom fields to the other tabs, and how to create your own tabs.

The right hooks

The first step is to hook an action to woocommerce_product_options_general_product_data. The function linked to this hook will be responsible of the new fields display. A second hook will be taken into account to save fields values: woocommerce_process_product_meta. Basically these two actions will be done using that code:

Adding New Fields

The snippet above link two custom functions to the right hooks. Now we need to create those functions. Let’s start bye the first one, woo_add_custom_general_fields(), that will create the fields. Here is how the function will look like

To create our fields we will mainly use WooCommerce builtin function like (All these functions are located in WooCommerce/Admin/WritePanels/writepanels-init.php.):

Text Field Type

To create a text field type, you will need to use that code:

Please note the use of desc_tip to display those little nice bubble to the right of the field instead of displaying the default field description. This attribute works for every field type.

Number Field Type

To create a number field type, you will have to use that code:

The main difference here is the type attribute set to number. You can also define custom attributes like step, and min, or even max. In the code above, step is the default one (1), and min is set to zero. Basically that means that we expect a positive value here (at least greater than zero).

Textarea Field Type

To create a textarea, here is the code to use:

Nothing really complex here…

Dropdown Select Field Type

To create a dropdown select, use the following code:

The options attributes defines available options within an array.

Checkbox Field Type

To create a checkbox, use this code below:

Hidden Field Type

You can also create hidden fields with the following code:

Products Select Field Type

There’s a really nice way to create a customized dropdown select for WooCommerce products with that code:

Custom Field Type

You can also create custom fields. In the example below, i created a “double field”. You can customize that code and use as many fields as you want that will be merged into one single array:

Custom fields can be pretty much everything, just make sure that you use the form-field class to make them pretty!

Saving Fields Values

Now that you created your WooCommerce product fields, you need to create a function to save their values once you edit the update or publish button. As we saw earlier, we will use a function called woo_add_custom_general_fields_save() hooked to woocommerce_process_product_meta. Basically the idea behind this function is pretty simple: we check if the field is empty and if not we create a post meta using update_post_meta(). Please note that we use esc_attr() and esc_html() to secure data just a bit. Here is the code to save each field type values:

Here is the result:

mastering-woocommerce-custom-fields-2

Retrieve Fields Values

Now that we successfully created our fields and saved their values, i guess you’d like to display those values on the frontend. In this case the best method would be to work with WooCommerce custom templates. Basically a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/

To get those values we just need to use the popular get_post_meta() function. That’s pretty much all you need.

Example:

Create Custom Tabs

Finally here is a quick snippet to create a custom product tab:

I recommend you to style your tab using a bit of CSS (simply add a nice icon and you’re done!).

One More Thing

One more thing: if you want to add your fields to any other tab than the general one you simply need to modify the hook name you linked your woo_add_custom_general_fields() function to. Fo example use that hook woocommerce_product_options_shipping to add your fields to the shipping tab. You can find all the available hooks in  woocommerce/admin/post-types/writepanels/writepanel-product_data.php.

340 responses to “Mastering WooCommerce Products Custom Fields”

  1. Keith Pickett

    Thanks so much for this. I have been looking to put a small text area at the bottom of the edit order page with some data I captured into MySQL. I think I found it!

  2. Keith Pickett

    Actually, I just re-read the article.. Is there a way to do something similar to this on the Order Edit page? I just realized you are showing a demo for a Products page.
    Thanks,
    Keith

    1. Hey, yes that’s doable but that will be for another post! ;-)

      1. brnatermedia

        Hi Remi. I’m very interested in how to add custom meta to the orders page if you have time.

        1. brnatermedia

          The orders edit page, that is =)

      2. wobbles

        This post has been great for getting the custom fields in the Product page and displaying them to shoppers.

        I have data that I want to place in custom product fields that relates to distributor’s SKUs and admin info. Is there anyway that I can get these custom fields to display in the Order Edit page for each product? Likewise, can these be displayed in the admin email notification?

        It would be great if you could point me in the right direction.

      3. CyberStylingsLLC

        Aloha Remi
        Any chance you have worked a post showing how to add custom fields to a “new order” screen? I have a scenerio where I need to have up to 12 custom fields added to the existing “Shipping information” area in a new order admin screen. Other then the “standard method of adding custom fields”. I had been talking to someone at woocomm that said that function was being looked at, but nothing to todate.

  3. Sirene

    Thanks for this great post, I know it’s not related to this post but do you know how we can count product attached to a specific attribute ?

    1. Yes, you need create a custom query retrieving products having a specific attribute and then use $query->post_count

  4. Bryan

    I’m trying this out and you say that we are only working in functions.php but when I put the text area code snippet in my functions.php file it broke. I guess I’m not understanding where to put the code?
    this is what I put in my functions.php file.
    // Textarea
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_textarea’,
    ‘label’ => __( ‘My Textarea’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );

    Do you have a finished working example that we can see?
    Thanks for your help.

    1. That is a finished and working sample, you have to add the add_action() otherwise it doesn’t work. And yes place the code in functions.php

      1. Bryan

        okay. got it. I had to add that bit of code within…
        function woo_add_custom_general_fields() {

        global $woocommerce, $post;

        echo ”;
        //added that code here
        echo ”;
        }


        follow up question. I want to add these to Tabs instead of General or shipping but I cannot find the right hook like you mentioned. We do have “Woocommerce tab manager” plugin installed and I looked in the “writepanel-product_data-tabs.php”.

        Our ultimate goal is to be able to export.import our product data but we need the data to include the custom tabs we created.
        Thanks!

        1. In that case, the best thing is to create a ticket on http://woothemes.com/support ! ;-)

        2. Britney

          –Having the same problem, but am not sure what to put within the echo”; ??

          I’ve Tried: //add_action()
          and: //function woo_add_custom_general_fields()

          ?? My function.php file continues to break.

          Thanks!

  5. Ofer

    Hi there,
    I tried adding the code to the functions.php in the theme folder but it alters the products general tab in the admin of WooCommerce.
    I would send you screenshots but it’s not possible here.

    The code I entered is as follow (without the comments /**/):
    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );
    /*
    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    echo ”;

    // Text Field
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_textarea’,
    ‘label’ => __( ‘My Textarea’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    }
    function woo_add_custom_general_fields_save( $post_id ){

    // Textarea
    $woocommerce_textarea = $_POST[‘_textarea’];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, ‘_textarea’, esc_html( $woocommerce_textarea ) );

    }

    */

    1. Please post a screenshot on droplr or a similar service

      1. Ofer

        Hi Remi,
        Thanks for your response.
        Please find the screenshot in the following uri: http://grab.by/rtfE

          1. Ofer

            Hi,
            Thanks for getting back to me, I tried again and I was successful.
            I do have a question however, I thought the custom field would enable me to add a custom text area on the product page so customers could add their comments for the check out.
            I’m selling meat and poultry and I want the customer to be able to add his/hers own comments – for example: Filet Mignon – comment ‘ cut into medallions’.
            And for that comment to be added to the comment area of the order.

            Is that possible at all and similar to your guide here?

  6. fstab

    Hey, how to do that for VARIATIONS, not only for General Tab? I need some custom fields there :)

    1. i’ll post a new tutorial soon regarding custom fields for variations, patience! ;-)

      1. penettrant

        what’s the work state?

          1. penettrant

            I mean what’s the status of the tutorial. How much time do you need until its finished?

  7. Mahfuzur Rahman

    Hi,

    This is a great Tutorial. Could you please give an example of ‘my-field-slug’ for the get_post_meta() function?

    Thanks,

    Mahfuz

    1. the field slug can be whatever you want, simply do not use special characters, spaces and you’re fine!

      1. Mahfuzur Rahman

        Thanks Remi for your reply. May be my question was not clear. As you have added some custom fields by the above code, what would be the code to retrieve the value of the first text field for example that you have added.

        I understand the slug part is required to locate the field and its syntax but where did you set it for the custom fields that you have added?

        Thanks,

        Mahfuz

        1. hrehman739

          Mahfuzur Rahman in this example slug is represented by id, for example slug for checkbox is “_checkbox” in the given array ‘id’ => ‘_checkbox’.

  8. Pete

    Can a Date Picker function be added to the above custom fields?

    And how would these added functions get added to the Customer Emails and Order Edit pages?

    1. No, you would need to add some jQuery UI code

    2. holja

      For datapicker just use:
      ‘type’ => ‘text’,
      ‘class’ => ‘short date-picker’,

  9. […] Mastering WooCommerce Products Custom Fields – Remi Corson […]

  10. […] Mastering WooCommerce Products Custom Fields – Remi Corson […]

  11. Andrew

    Remi,

    Thanks very much for this – I’ve been trying to get this done all day!

    Two questions:

    1) Is it possible to sort a product list using a numerical field like this?

    2) I’d like to display the contents of a custom number field like this, along with some explanatory text (not in the field – which is what makes it complicated), only on certain product categories. Is there a way to use get_post_meta in combination with an if statement (if post is in category x) to do this? Example:

    PRODUCT NUMBER ONE
    Alpha Acid: 5%

    (I want the “5” to be the field which I can also sort by, but I only want the text “alpha acid … %” to display on products in the “hops” category”

    Hope that makes sense!

    Andrew

  12. ginj

    Hi,

    I’ve implemented this. Is it possible to get the info to display on the admin emails?

    I’ve tried adding the post meta data code. But nothing is showing.

    I need this to display an internal product code to ease product packing.

    Cheers for the great tutorial!

    1. To add a custom field value to an email use that code:

      /**
      * Add the field to order emails
      **/
      add_filter(‘woocommerce_email_order_meta_keys’, ‘my_custom_checkout_field_order_meta_keys’);

      function my_custom_checkout_field_order_meta_keys( $keys ) {
      $keys[] = ‘My Field’;
      return $keys;
      }

      1. ginj

        Thanks for the response.

        I’m still getting a blank area when I try to display the info in the email.

        Here is the code in functions and the email template.

        https://gist.github.com/Ginjj/61d1174f08fef323591e

  13. javadh

    Hi,

    I managed to implement the new field in backend. I want to add the new text field under SKU of my product page here: [removed]

  14. arijar

    Hi,
    i use plugin WP User Frontend Pro to add products to Woocommerce from frontend.
    How i can add these fields to Wp User Frontend Pro form?
    Regards, Ari

  15. It took me a few tries, but now it works like a charm! I posted a tailgating blog about this at: http://ingoodcompanywebdesign.net/blog/project/custom-fields-for-woocommerce-tailgating-remi-corson/ , I hope thats okay – if not just let me know.

    1. arijar

      Hi,
      I have two custom fields and there is a descriptions both.
      When i leave field blank, field descriptions appears still on product page.
      How can i hide empty field descriptions?

      Thanks for great tutorials! :)

      -Ari

    2. Mattbi

      I followed your post, Ingoodcompany, and it made the description, sku and add to cart function disappear. So I removed the span wrapper tags and just the label shows up. It’s not displaying the info from the _select ID that I’m using. Any ideas why?

      Code from short-description.php file:

      CODE from functions.php:

      // Select
      woocommerce_wp_select(
      array(
      ‘id’ => ‘_conditionselect’,
      ‘label’ => __( ‘Condition’, ‘woocommerce’ ),
      ‘options’ => array(
      ‘one’ => __( ‘New’, ‘woocommerce’ ),
      ‘two’ => __( ‘Used’, ‘woocommerce’ ),
      )
      )
      );

      }
      function woo_add_custom_general_fields_save( $post_id ){
      // Select
      $woocommerce_select = $_POST[‘_conditionselect’];
      if( !empty( $woocommerce_select ) )
      update_post_meta( $post_id, ‘_conditionselect’, esc_attr( $woocommerce_select ) );
      }

      Thanks!

  16. rafael.franchin

    Hi, great tutorial!

    I have just one question: I created a Textarea Field Type and when I put some text and hit Publish it’s displaying on my front-end. However when I remove the text to clean the front-end and click on Publish again it stays on the Textarea Field and on the front-end.

    Could you help me to solve that?

    Thanks!

    1. I would say this is not link to that code, but i’ll give it a try

      1. thesmu

        Hi there,
        I am having the same problem.

        In the functions.php I have:

        // Display Fields
        add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

        // Save Fields
        add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

        function woo_add_custom_general_fields() {

        global $woocommerce, $post;

        echo ”;

        // Custom fields will be created here…

        // Text Field
        woocommerce_wp_text_input(
        array(
        ‘id’ => ‘_text_field_gold’,
        ‘label’ => __( ‘Gold Offer Text’, ‘woocommerce’ ),
        ‘placeholder’ => ‘Offer Text’,
        ‘desc_tip’ => ‘true’,
        ‘description’ => __( ‘If you would like to show a gold offer flash enter the text here.’, ‘woocommerce’ )
        )
        );

        // Text Field
        woocommerce_wp_text_input(
        array(
        ‘id’ => ‘_text_field_red’,
        ‘label’ => __( ‘Red Offer Text’, ‘woocommerce’ ),
        ‘placeholder’ => ‘Offer Text’,
        ‘desc_tip’ => ‘true’,
        ‘description’ => __( ‘If you would like to show a red offer flash enter the text here.’, ‘woocommerce’ )
        )
        );

        // Text Field
        woocommerce_wp_text_input(
        array(
        ‘id’ => ‘_text_field_blue’,
        ‘label’ => __( ‘Blue Offer Text’, ‘woocommerce’ ),
        ‘placeholder’ => ‘Offer Text’,
        ‘desc_tip’ => ‘true’,
        ‘description’ => __( ‘If you would like to show a blue offer flash eg for a 3for2 enter the text here.’, ‘woocommerce’ )
        )
        );

        echo ”;

        }

        function woo_add_custom_general_fields_save( $post_id ){

        // Text Field
        $woocommerce_text_field = $_POST[‘_text_field_gold’];
        if( !empty( $woocommerce_text_field ) )
        update_post_meta( $post_id, ‘_text_field_gold’, esc_attr( $woocommerce_text_field ) );

        $woocommerce_text_field = $_POST[‘_text_field_red’];
        if( !empty( $woocommerce_text_field ) )
        update_post_meta( $post_id, ‘_text_field_red’, esc_attr( $woocommerce_text_field ) );

        $woocommerce_text_field = $_POST[‘_text_field_blue’];
        if( !empty( $woocommerce_text_field ) )
        update_post_meta( $post_id, ‘_text_field_blue’, esc_attr( $woocommerce_text_field ) );

        }

        Many thanks in advance,
        Susan

        1. What issue do you experience?

  17. whitsend79

    Hi man. I did everything as described in a couple different ways, but for the life of me I cannot get the custom fields to display on my product description page. This is my functions.php…

    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    echo ”;

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_manufacturertext_field’,
    ‘label’ => __( ‘Manufacturer’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘manufacturer’, ‘woocommerce’ )
    )
    );
    echo ”;

    }

    function woo_add_custom_general_fields_save( $post_id ){

    // Text Field
    $woocommerce_text_field = $_POST[‘_manufacturertext_field’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_manufacturertext_field’, esc_attr( $woocommerce_text_field ) );
    }

    and then this is my short-description…
    post_excerpt ) return;
    ?>

    post_excerpt ) ?>

      

    I have more fields but its pretty long. I got the fields to appear on the product edit page and can enter and save but no display. Please help. Been trying for two days now.

    1. To display the fields simply use get_post_meta()

  18. whitsend79

    Man i have. I thought i copied it to last message. It still isn’t showing. Maybe im doing it wrong. Could you please just use the above example and write it out for me? I made the custom template for single description and put it in my themes woocommerce folder. Nothing i do works, I’ve tried everyones suggestion to no avail. Please help!

  19. Insignis Les

    Hi Remi –

    Thanks so much for this awesome tutorial, much appreciated.

    I’m using this inside a conditional statement in a project where if the meta text-field created by your process above is empty, then neither it or the wrapping copy are displayed. Straight forward and works great.

    Challenge though, if there is a value given to the text field in WC, but then the user wants to clear it, it will not except a null value. If I delete the value in the backend and then update the page, it repopulates from the database. Obviously if I put a space to cheat, then the wrapper text I want to hide with my conditional is echoed with that space.

    How can I get the DB to “forget” the value I’ve entered? Is there something along the lines of the save code above for expunging values or another function I can research?

    Thanks in advance for any guidance! Looking forward to your next tutorial.

    1. Are you saying that the placeholder’s value is stored in the database or the default value you defined for the field?

      1. Insignis Les

        The value would be coming from the database. I am not using a default value or even placeholder info.

        It is a text field representing a suggested price value. If I go to a product and never touch the field it’s perfect (no data), or if I always want a value represented its perfect.

        However if I add a value today and then tomorrow I want it gone (data reverting to no data) then tough luck it seems. I clear the field so nothing is there (like it would have been prior to ever typing in it), update the product and the field repopulates with what I just removed.

        Hope that makes sense lol, it’s very early in the morning here.

    2. kevin.pqa

      Hey, I’m trying to do the same thing with, that if the text field is empty, is not shown on the description, can you pass me the code you used for that please?

  20. silentfxx

    Hello,

    Just wanted to say thank you for this been looking for something like this. Also it’s weird that it’s not apart of woocommerce as it is essential to ecommerce web sites.

    I’m having some trouble to get this working properly I tried using your code and everything you said but for some reason it wasn’t working so then I read on the comments and I saw someone else having trouble and he did his own version of this as well which is http://ingoodcompanywebdesign.net/blog/project/custom-fields-for-woocommerce-tailgating-remi-corson/

    I followed what he said and I got everything working just fine with one glitch. It’s working fine for the products that were originally on the store. If I try to add a new product and I add the details for the custom fields it won’t show up on the Product Detail page. I also have the Woocommerce CSV Importer from woothemes and when I export I see the data and I tried importing new data and It wasn’t showing up on the Product detail page.

    Any help would be appreciated thanks!

    1. What’s the issue you’re experiencing exactly?

  21. whitsend79

    This is what I have in short-description.php to display…

      

     

  22. silentfxx

    Hmm after recording a video to show you what my problem was I noticed why my code wasn’t working it was because I was putting the (get_post_meta) code in a if condition inside
    woocommerce > short-description.php

    ‘if ( ! $post->post_excerpt ) return; ‘

    I then realized what my problem was and simply put it on top of that if condition!

    I had another question regarding this but in the Product Variation Version
    Seen here: http://www.wpexplorer.com/best-woocommerce-snippets/

    I’m trying to get this information displayed in the front-end I’ve tried this but with no luck.
    echo get_post_meta( $variation->ID, ‘_my_custom_field’, true );

    Any suggestions?

  23. ronenrer

    Hi Remi
    first, thanks for this great tutorial!
    I am working on a project based on a template called ‘Bazar’ that already have override woocommerce template.
    I have created a child theme and have put this code in my function.php but the new field is not add to the product admin:
    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    echo ”;

    // Custom fields will be created here…

    echo ”;

    }
    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field’,
    ‘label’ => __( ‘My Text Field’, ‘woocommerce’ ),
    ‘placeholder’ => ‘http://’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );

    function woo_add_custom_general_fields_save( $post_id ){

    // Text Field
    $woocommerce_text_field = $_POST[‘_text_field’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_text_field’, esc_attr( $woocommerce_text_field ) );
    }
    am I doing something wrong? r maybe it’s a problem with overriding woocomerce twice?
    thanks

  24. ronenrer

    Hi
    Please ignore my previous comment
    I mannaged too sort it out.
    I have another question: can the new custom fields I’ve created be sent to the shooping cart? so the customer can see what material for example he has chossen for the product without the need to go back to product page..
    I mean where is this new meta data being saved and for whom?
    Thanks

  25. smallG

    Hello!

    I’m a starter in WordPress and looking help for custom fields for woocommerce products. For the project, I’m using a Child theme with Responsive Free (by cyberchimps) theme as parent.

    My Problem: To follow your steps, I created a functions.php file in child theme folder with php opening and closing tags and no whitespaces between them. The site is broken and displaying white dead screen… How can I fix the issue?

    Any help is appreciated.
    Thanks.

    1. Try “removing” closing php tag in your functions.php file in child theme.

      Hope it works! :)

  26. smallG

    Hello,

    Although solved the problem I was facing, got another query.

    How can I display all the custom fields created in the single product summary?

    Thanks

  27. silentfxx

    Hello Again,

    I’m having some trouble again but this time its if I want to delete the custom field text. It won’t delete. If I update the custom text field it will update fine but If I delete the text it won’t delete.

    Here’s a video of what I’m talking about
    Video: http://maccam.tv/store/wp-content/video/custom-filed.mp4

    Is there something that I’m missing?

    Thanks!

    1. silentfxx

      Seems like I’ve figured this little bug out.

      You were updating the field when the value was not empty but not when it was empty.

      Here’s the code:

      function woo_add_custom_general_fields_save( $post_id ){
      // Text Field
      $woocommerce_text_field = $_POST[‘_text_field’];
      if( !empty( $woocommerce_text_field ) ) {
      update_post_meta( $post_id, ‘_text_field’, esc_attr( $woocommerce_text_field ) );
      }
      else {
      update_post_meta( $post_id, ‘_text_field’, esc_attr( $woocommerce_text_field ) );
      }

      }

  28. Amy

    What if I want to add a custom field for the user to fill out. For example, I want the user to be able to order a customized product: a dog bowl with their pet’s name on it. He needs to type the name he wants on the bowl in a field that submits with his order. What kind of plugin can I use for this???

    1. With the method explained in that post you don’t need any plugin. You just need to add little script to display the field value on the edit order page.

  29. manojwadhwa.mw

    Thanx buddy.. its was really helpful for me,….

  30. olivierd

    hello!
    This is a very thorough and instructive post.
    I’ve managed to do everything you proposed, … which is already very good :D

    But of course, if i post it’s because i need to go further, and maybe the answer are self explainatory or maybe not. :
    1) In the last part you give the code to add a custom tab, => works ok, but how would you add those extra fields in the right part fot that tab ?

    add_action( ‘woocommerce_product_write_panel_tabs’, ‘woo_add_custom_admin_product_tab’ );
    function woo_add_custom_admin_product_tab() {
    ?>

    <?php
    }

    do i have to "only" add an action like
    add_action( 'woocommerce_product_options_custom_tab_data', 'woo_add_custom_general_fields' );
    (this doesn't work)
    or should i add something in the core plugin in woocommerce/admin/post-types/writepanels/writepanel-product_data.php. ?

    2) You give example for textfields, textareas, select…, which are useful, but can i add image/file fields ?

    Thank you anyway for the quality of your tutorials
    Regards

    1. Intervik

      Use

      function custom_tab_options() {
      ?>

      <?php
      }
      add_action('woocommerce_product_write_panels', 'custom_tab_options');

      or take a look at this post:
      http://www.benblanco.com/how-to-add-custom-product-tab-to-woocommerce-single-product-page/

      1. mrandre

        benblanco did not tell me anything,. you have an minimal working example based on the example used in this page ? , please

  31. Great post, but wait – there’s no plugin for this? (hint hint ^^)

  32. janestone08

    Hi Remi, Happy New Year!
    I want to add some text input fields to the cart page and display the user’s inputs in the “order items” area in admin dashboard. Which hooks shall i link to?

    Thank you.

    1. Hi, happy new year too! I guess that you should work with custom templates instead: http://docs.woothemes.com/document/template-structure/

      1. janestone08

        I did edit the cart template, but it only changed the frontend. But how can I save the user’s input and display it in the “order items” area in admin dashboard? Thanks

  33. mcapraro

    I have a project that needs custom fields for variable products, any chance you will be diving into it soon? or could i hire you to?

    1. I will post a blog post soon regarding custom fields for variables products.

      1. Cobo

        Hi!

        Any possibility of writing that post on custom fields for variations? I’m just trying to achieve that. Is it so different to this one?

        Also, I haven’t been able to find the ‘woocommerce_product_options_general_product_data’ hook anywhere in Woocommerce’s documentation, except looking through the files on the plugin, under the post type write panels. I’ve been trying to do the same for variations without luck so far. It would be great if you could enlighten us a bit here ;).

        Am also looking at some of you plugins on codecanyon. Pretty interesting stuff!

        Thanks!

        1. I’ll write a post regarding variation custom fields very soon! ;-)

          1. lekiend

            Great Post Remi,
            I’m also interested into your tutorial to add custom fields for Variation products :-).
            Dimitri

  34. arijar

    Custom fields disappeared after adding product.

    I have a two custom fields, when i add information, the fields are gone for general_product_tab.

  35. richcc

    Hi Remi,

    Thanks for the awesome tutorial, really helped me out. Just have one quick question with regards to the custom tab snippet you have provided. Have got this all working fine, but can’t seem to get the right function to add fields into the custom tab?

    Any help would be appreiated

    Thanks

    Rich

  36. RM

    Hi Remi,

    I’m looking forward to your next blog post about custom fields. I’m trying to finish up my site and this is one thing holding up the launch. Do your instructions above basically accomplish the same thing that the Personalized Product Plugin does? Thanks a million!

    1. the answer is probably yes! ;-)

  37. tyggis

    Hi.

    Thanks for the great tutorial.
    I have a question on how to display the fields.
    Where do you set ‘my-field-slug’? Is my-field-slug the same as the name of the field?

    Thanks.

  38. tyggis

    Ok, the id is the same as the my-field-slug I found out :-)

    On the page http://www.mineoppskrifter.no/lyse-muffins/ I want to list ingredients in text fields. How do I make so that the text empty text fields are not displayed?

    Thanks again :-)

  39. tyggis

    And one more question please. How do I display ‘label’ in front end before the id name?

  40. tyggis

    Ok, I solved it, displaying like this:
    ID, ‘beskrivelse’, true))==”)) {
    //Not empty
    echo ‘Beskrivelse: ‘,get_post_meta( $post->ID, ‘beskrivelse’ , true);
    }
    ?>

    Now I have another question. When I delete the value in the custom field, the value will not be deleted when I save the product. The only way I can delete the value is to remove the value both in the product custom field and in the wordpress custom field at the same time. How can I avoid this and just delete it in the product custom field ?

    Thanks.

  41. tyggis

    Code broken in previous post, here it is:

    //Check if custom field is empty
    if (!((get_post_meta($post->ID, ‘beskrivelse’, true))==”)) {
    //Not empty
    echo ‘Beskrivelse: ‘,get_post_meta( $post->ID, ‘beskrivelse’ , true);
    }

  42. Roby80

    Hi Remy, can I use the checkbox field to give the product a CSS class?
    I have to replicate the OnSale badge to mark some product, but i have no idea how to do it. I have a little budget to develop this, can you contact me?

  43. james

    hello remi,
    i am new on wordpress please help me i want to add drop down list of quantity on each page of product that quantty choose by customer like
    1-50 product price is 3 $
    51-100 product price is 4$
    101-500 product price is 5$
    501-so on product price is 6$
    how can i do it please help me.
    I will really thank full to you

  44. janestone08

    Hi Remi,

    Thanks for your great tutorial. I was also trying to add some custom fields to the “Cart Page” according to this, but failed. Can you pls advise how? I’ll be very appreciated for that.

  45. abhinesh

    Hello Remi,
    First of all a hearty thanks for such a useful topic. A lot things are resolved in an individual page. So i wanted to know that i got stuck in Products Select Field Type.
    I worked exactly the way you instructed but i am getting an output like-
    array
    do i have to use some [index] fields or how it can be sorted.
    i am using- get_post_meta( $post->ID, ‘_product_field_type_ids’, true ); code
    Thanks Again.

  46. jallen

    Remi, thank you for all the info, been searching for some time.

    Is there a way to call the (sale-price-schedule) to have HH:MM (hours and minutes)
    woocommerce/product/product-data/general/sale-price/schedule

    It reads YY-MM-DD, and I’d like to be able to set HH:MM in addition to the schedule as well.
    YY-MM-DD HH:MM
    Any ideas would be great!
    Thank you again

  47. bartekluczka

    Hello Remi. I like your work. I have a question for you about “Mastering WooCommerce Products Custom Fields”. Everything works great, but I would do so, select the field showed me the pictures. For example, if I select “Option 1” is on the side to show me a picture 1.jpg, or if I choose “option 2” it will show 2.jpg. Is this possible and if you can help me with this? I’ll be very grateful.
    ps. sorry for my english

  48. erikmyhre

    Awesome post Remi! One quick question though. Let’s say I wanted to build a plugin that allowed the user to link up Woocommerce products. how would I include the product select field type in the plugin meta box? I’ve tried and while the basic field shows up, the magic of making the ajax call etc. doesn’t seem to be working. I’m so close!

    1. hey, i’m not sure i understand, you don’t need ajax here

  49. msaeedi

    hi
    This is Really Awsome Post!
    i need to add user search field for custom field value
    i am trying to use woocomerce ajax chosen for my case but it’s not help!!
    can you give me some hint about my problem?

    i need a search box for custom field that admin can search for users
    but i want to return results by ajax!
    thanks again

  50. oblax

    Hi. Awesome feature. It made my life easier. I added a custom field called _qty_number_field. I need to show it in the Quick Edit dropdown on products list page in admin panel. Any idea on how to code it? TIA

    1. chancero

      I am in the same boat as oblax, if you could also show how to add the custom field to the Quick Edit that would be great.

  51. mungo5w

    Hello I’m a new user and i need help.
    I recently imported 2K .csv product records to Woocommerce. The products show fine. I also imported custom fields for each record which when i go into the database i can see in the wp_postmeta table no problem. On the template i want to display those fields and I use the:
    “echo get_post_meta();”
    code but only one of the custom fields displays. Is there something you could suggest? I was wondering if the underscore had to preced the field name.

    The 2 fields that work are:
    “echo get_post_meta( $post->ID, ‘_sku’, true );”
    “echo get_post_meta( $post->ID, ‘title’, true );”

    Everything else won’t display.
    Please can you help?
    Manish

  52. peterkelly

    Ok, so I am having a weird problem. I have gotten everything to work for the idea I am trying. I created the drop down selector, for the admin area for a heat level for the products. And that all works fine. I also added an if/else statement to so the the custom field when its populated. But the issue that is happening, is when the product has the custom field shown, the description tab below the product meta info is closed. Here are some examples:

    Showing the custom field with the product description closed:
    http://lavalipsindy.com/product/crazy-good-fruits-fire-ghost-pepper-sauce/

    No custom field info:
    http://lavalipsindy.com/product/blairs-heat-habanero-mango-exotic-hot-sauce/
    (ignore the heat level info on this. Its the sku meta info changed to create this)

  53. stoan

    Hi Remi

    Thanks for this awesome post. It has helped me a lot :-)

    is it also possible to create a custom text field for a ‘Grouped product’ ? I really need this or an alternative.

    Thanks
    Stoan

  54. Nebojsa

    Hi Remi,

    this is a great tutorial, but for some reason I’m not doing it right I guess. I did manage to add all to functions.php file, and I can see my custom text field in product settings. I can save new label as well, but I need that label to show adjacent to product price on frontend page.

    I see you stated to use custom template files, to place in following peace of code:
    ID, ‘my-field-slug’, true );

    // You can also use
    echo get_post_meta( get_the_ID(), ‘my-field-slug’, true );
    ?>

    But that’s jus beyond my wordpress knowledge. I just need to know where to place that peace of code in order to see saved values on frontend page?

    Thanks in advance.

    1. In this case the best method would be to work with WooCommerce custom templates. Basically a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/

  55. Nebojsa

    Ok, I managed this. Thanks’ a bunch great guide.

  56. Nebojsa

    Hi Remi,

    I have one more issue. I’m using three checkboxes on my product edit page, and the problem is, when I check those boxes, values are saved, but on refreshed page boxes are not checked? So how do I ensure that one or all boxes stay checked after save?

    1. do the checkboxes have the same ID?

  57. Nebojsa

    Nope:

    // Checkbox
    woocommerce_wp_checkbox(
    array(
    ‘id’ => ‘_akcija’,
    ‘wrapper_class’ => ”,
    ‘label’ => __(‘Proizvod na akciji’, ‘woocommerce’ ),
    ‘description’ => __( ‘Check me!’, ‘woocommerce’ )
    )
    );

    // Checkbox
    woocommerce_wp_checkbox(
    array(
    ‘id’ => ‘_novo’,
    ‘wrapper_class’ => ”,
    ‘label’ => __(‘Novi proizvod’, ‘woocommerce’ ),
    ‘description’ => __( ‘Check me!’, ‘woocommerce’ )
    )
    );

    // Checkbox
    woocommerce_wp_checkbox(
    array(
    ‘id’ => ‘_srpskiProizvod’,
    ‘wrapper_class’ => ”,
    ‘label’ => __(‘Proizvedeno u SR’, ‘woocommerce’ ),
    ‘description’ => __( ‘Check me!’, ‘woocommerce’ )
    )
    );

    and function as follows:

    function woo_add_custom_general_fields_save( $post_id ){

    // Checkbox
    $woocommerce_checkbox = isset( $_POST[‘_akcija’] ) ? ‘‘ : ”;
    update_post_meta( $post_id, ‘_akcija’, $woocommerce_checkbox );

    // Checkbox
    $woocommerce_checkbox = isset( $_POST[‘_novo’] ) ? ‘‘ : ”;
    update_post_meta( $post_id, ‘_novo’, $woocommerce_checkbox );

    // Checkbox
    $woocommerce_checkbox = isset( $_POST[‘_srpskiProizvod’] ) ? ‘
    ‘ : ”;
    update_post_meta( $post_id, ‘_srpskiProizvod’, $woocommerce_checkbox );

    }

    1. it’s because you use 3 times the same variable name $woocommerce_checkbox, use instead $woocommerce_checkbox_1, $woocommerce_checkbox_2 and $woocommerce_checkbox_3 at the end of your script

    1. use that, your code is still incorrect: http://cld.wthms.co/hvZU

  58. Nebojsa

    No luck when I use code you provided on that link I have same result, no checkbox is selected after save, even thou value is saved? So I can save, I do have as a result what I want for all three checkboxes, but non of three checkboxes aren’t checked after save.

    I’m sending whole code so someone could help. Sorry but I’m not good with php.

    http://d.pr/f/mCas

  59. Alyaa

    Hi,
    Thank you so much for great tutorial!
    Could help me, please?
    I’m newbie and have some problems :(
    Could you tell me, please, how to add ‘My Textarea’ field (Bijango is my custom subtitle for one of these products) under product title on main shop page?
    I have it in , but not in ; here’s how it looks in firebug:

    Bijango


    My code in functions.php:

    // Display Fields
    add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

    // Save Fields
    add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    // Text Field
    woocommerce_wp_textarea_input(
    array(
    'id' => '_subtitle',
    'label' => __( 'Subtitle', 'woocommerce' ),
    'placeholder' => '',
    'desc_tip' => 'true',
    'description' => __( 'Enter the custom value here.', 'woocommerce' )
    )
    );
    }
    function woo_add_custom_general_fields_save( $post_id ){

    // Textarea
    $woocommerce_textarea = $_POST['_subtitle'];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, '_subtitle', esc_html( $woocommerce_textarea ) );

    }

    Thank you kindly for any help with that issue!

  60. wjmendez

    I modify my simple.php of my woo with this code:
    ID, ‘_product_field_type_ids’, true );

    // You can also use
    echo get_post_meta( get_the_ID(), ‘_product_field_type_ids’, true );
    ?>
    And the result in the front page is only the word “Array”.
    Nothing more… pls tell me what is going wrong with my code?

  61. wjmendez

    When i write an URL in the text field in the front end it does not appear like a link. What should i do?

    1. you need to use the “a” tag

      1. wjmendez

        Thanks, but when it is shown in the frond end still appear the a tag as simple text.
        I found a solution, so i want to share it, maybe all of you already done it, but i write it anyway:

  62. giovanni

    First of all sorry for my english…
    Can I create more sales dates and “activate” them automatically based on the day of purchase?
    For example:
    the regular price is € 500 for purchases made at least 7 days prior to May 10;
    if customer purchases 30 days in advance the sales price is 450
    if customer purchases 60 days in advance the sales price is 400

    Therefore, if the customer purchases the April 31, the price displayed will be € 450 and not € 500 (which is the regular price).
    Is that clear? :)

  63. Avaron_Koto

    I seem to can’t find WooCommerce/Admin/WritePanels/writepanels-init.php

  64. mateusz.win

    Hey,

    Im trying to make two text fields, this is how my functions.php looks like

    /* woocommerce */
    // Display Fields
    add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

    // Save Fields
    add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;
    echo '';
    // Text Field
    woocommerce_wp_text_input(
    array(
    'id' => 'marka_field',
    'label' => __( 'Marka', 'woocommerce' ),
    'placeholder' => 'Marka',
    'desc_tip' => 'true',
    'description' => __( 'Enter the custom value here.', 'woocommerce' )
    )
    );
    // Text Field
    woocommerce_wp_text_input(
    array(
    'id' => 'dostepnosc_label',
    'label' => __( 'Dostępność', 'woocommerce' ),
    'placeholder' => 'Dostępny',
    'desc_tip' => 'true',
    'description' => __( 'Enter the custom value here.', 'woocommerce' )
    )
    );
    function woo_add_custom_general_fields_save( $post_id ){
    // Text Field
    $woocommerce_marka_field = $_POST['marka_field'];
    if( !empty( $woocommerce_marka_field ) )
    update_post_meta( $post_id, 'marka_field', esc_attr( $woocommerce_marka_field) );
    $woocommerce_marka_field = $_POST['marka_field'];
    if( !empty( $woocommerce_marka_field ) )
    update_post_meta( $post_id, 'marka_field', esc_attr( $woocommerce_marka_field) );
    }
    echo '';
    }

    /* end woocoommerce */

    I think is good, but after publishing product im receiving something error like that


    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'woo_add_custom_general_fields_save' not found or invalid function name in /sklepogrodniczy/wp-includes/plugin.php on line 429

    Warning: Cannot modify header information - headers already sent by (output started at /sklepogrodniczy/wp-includes/plugin.php:429) in /sklepogrodniczy/wp-admin/post.php on line 233

    Warning: Cannot modify header information - headers already sent by (output started at /sklepogrodniczy/wp-includes/plugin.php:429) in /sklepogrodniczy/wp-includes/pluggable.php on line 896

    Did i do something wrong, or whats the problem :) ?

    1. mateusz.win

      nvm me, man i hadnt slept whole night, i did function into another function, And so many stupid mistakes ;) it works , thx for this tutorial ;)

  65. Nebojsa

    Hi Remi,

    I still have no luck with those checkboxes. Even when I use your code from tutorial and even when I use different (clean) wordpress website, it’s not working properly. So yet again, values are saved when checkbox is selected and product is saved, but checkbox is not selected after that. So if I choose to update anything on that product and I don’t check that checkbox again it’s going to overwrite previous save.

    What is the problem here?

    again my function.php with your chunk of code:

    http://pastebin.com/mSbiCQMY

  66. amyr4ik

    Hi Remi,

    I followed your guide and was able to get a field to show up in dashboard.
    Then added a line to short-description.php and it displayed on front end.

    However, its not possible to clear the field after something was added to it.
    I can change whats there, but not remove. Selecting whats there and clicking delete, then pressing Update and what was there – stays.

    Code:

    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_sampletextarea’,
    ‘label’ => __( ‘Sample Text Area’, ‘woocommerce’ ),
    ‘placeholder’ => ‘something here’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    }
    function woo_add_custom_general_fields_save( $post_id ){

    // Text Field
    $woocommerce_text_field = $_POST[‘_sampletextarea’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_sampletextarea’, esc_attr( $woocommerce_text_field ) );
    }

    And this line added to .php file

    Sample:

  67. Walter

    Hi, great tutorial Gerhard! I was lookin for something like this several time ago, but what if we want to put the values of the new custom fields in [cart.php, mini-cart.php or form-checkout.php and mail notifications]? You now, in order to show the values in the same way that show up variables, in my case i want to print in the order this little reference… do you have any advice? :)

  68. napalm80

    Hi,
    this is great and works fine. But not on cart page. When I try to get and display value on this page, nothing happens.

    In CART.PHP:

    Custom Field “latinsky” exists and its value displays on other pages. I believe the problem might be in getting the right ID?

    Any suggestions?

    Thanks a lot.
    Martin

    1. napalm80

      Sory, i ve forgot to put source code inside code tags:

      1. napalm80

        Here it is:

        global $post,$product;
        $id=get_the_ID();
        echo get_post_meta($id, 'sfw_pwd', true);

    2. Walter

      Yes, i found a solution, jus use this code:

      id,'_YOUR_ID',true); ?>

      1. Walter

        OOOPSS! i mean: id,’_text_field’,true); ?>

  69. amyr4ik

    Hi Remi,

    Can you please provide a fix for data not being cleared on save, when fields data was removed? Thats the most common problem in this discussion..
    Your reply will be highly appreciated and rewarded with coffee :)

  70. JKSteele

    Hi – love the code – got it to work on the site – only problem I have is then importing a large product database and mapping to the new fields.

    I can manually enter values into the new fields I created, but when I import (25K+ products) the import tool I use (dgrundel woo product import) it simply creates new custom fields and places them on the additional information tab. I really need the info to display on the main product pages as people who shop this product add multiple items at a time and use those fields to find the right product.

    Any ideas on how to bulk upload to the new fields?

  71. whoaloic

    Hi!
    I’ve set a custom field and put a value to test your code.
    Now I would like to put none value for a product.
    It seems that I can’t do that. The field requires a value.
    How to get the possibility to set none value for a field?
    Regards.

  72. […] simple solution to adding custom fields to the WooCommerce Product page. You can checkout his blog here for adding not only text fields but drop downs, checkboxes, select buttons, and more. You would […]

  73. JLS

    Thank you for the helpful article! This worked out perfectly as I was trying to use the wordpress custom fields but I kinda wanted to keep that area hidden in the screen options. This way seems a little more UI friendly if that makes sense…

    Hey, I got this working great and I know how to insert this into a template itself but I’d rather place it in a hook via the functions file. I’d like to have this as a conditional so that IF the text field has anything input then display it. Otherwise if the field is blank I’d like it ignored by the template. I’m trying to hook the “woocommerce_product_meta_start” to have the field display there if applicable.

    Could you possibly provide an example of such a filter/conditional for the functions file? I’m new to the idea of filters and have managed to figure out quite a few… but can’t seem to wrap my head around this one. I was thinking others might benefit from the example as well.

    If you can’t I totally understand and really appreciate the tutorial you put so much effort into. I’ll just keep trial/error’ing it but if you can help out that would be awesome!

    Thanks!

  74. JLS

    Here is an example of what I have in the template itself for example until I figure out how to translate it into a hook for the “woocommerce_product_meta_start”:

    ID, '_text_field_age_restriction', true) ) { ?>

    CHOKING HAZARD - Small parts. Not for children under ID, "_text_field_age_restriction", $single = true); ?> yrs.

  75. JLS

    Sorry, I think I forgot to put the closing code tag or something and it won’t let me edit my comment. Trying this again…

    ID, '_text_field_age_restriction', true) ) { ?>

    CHOKING HAZARD - Small parts. Not for children under ID, "_text_field_age_restriction", $single = true); ?> yrs.

  76. JLS

    Ok, sorry… not sure why it won’t let my code display but hopefully you can view it all still. Feel free to edit or delete any of my posts here. My apologies for whatever I’m doing wrong…

    1. you can use GitHub gist to paste your code

  77. amrl.arte

    Hi! Thank you very much for your article. It’s very useful.
    I have followed your tutorial setp by step, but I’m facing the following error:

    Fatal error: Call to undefined function woocommerce_wp_text_input() in [path to my functions.php] on line 30

    Could you help me?

    Thank you very much!

    1. that’s weird, this function wasn’t deprecated.

      1. Ramiro

        Same error here!

        Fatal error: Call to undefined function woocommerce_wp_text_input() in /home/blikcomb/public_html/dev.blik/wp-content/themes/neighborhood-child/functions.php on line 42

        1. julian_kingman

          I’m having the same error, any leads? I’ll post back here if I find anything.

        2. julian_kingman

          Fixed the problem for myself… I had the declaration hanging on its own, but as soon as I put it inside a function that outputs HTML it was fine. I think I misunderstood the way it works.

          1. Jay Dawebnerd

            help me plz i’m still lost on the entire thing???

  78. pavnish

    hi Remi can i print custom field content on my woocommerce single-product.php file — how it is possible …

    1. you can use get_post_meta() function.

      1. pavnish

        actually i have use your function in my woocommerce page …
        What should I do to print it on my php script file ..
        please help me bro………

        i have to use this function …….
        // Display Fields
        add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

        // Save Fields
        add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

        function woo_add_custom_general_fields() {

        global $woocommerce, $post;

        // Text Field
        woocommerce_wp_textarea_input(
        array(
        ‘id’ => ‘_textarea’,
        ‘label’ => __( ‘My Textarea’, ‘woocommerce’ ),
        ‘placeholder’ => ”,
        ‘desc_tip’ => ‘true’,
        ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
        )
        );
        }
        function woo_add_custom_general_fields_save( $post_id ){

        // Textarea
        $woocommerce_textarea = $_POST[‘_textarea’];
        if( !empty( $woocommerce_textarea ) )
        update_post_meta( $post_id, ‘_textarea’, esc_html( $woocommerce_textarea ) );

        }

      2. pavnish

        I would love to see an Extension for WooCommerce to add “custom form fields” functionality to the products pages. In some cases extra information needs to be captured along with the product or service you are selling.

        i want print custom field information…

  79. Albert

    Hi dear Remi………….
    I want uplode image section in Simple product area….
    How do I upload… Please give me function structure ….
    help me…..

  80. angiemcherry

    Hi Remi – Thank you for this. It is very insightful and I really appreciate it. I do have one question. We used this to create fields that need populated for many products. They are only visible on the back end so they didn’t have to be written to the user interface. I added some code to allow these fields to be exported, however, I would like to populate my spreadsheet and import those products because there are a LOT. I am unable to figure out how to get the product features to write to the new fields I created. So, I hope I am making sense but I can add the fields, get them to export, but I can’t import and write to the fields…can you help?

  81. ENBertussi

    Hi Remi,

    Thank you so much for this lesson, I am actually surprised this is not part of the core of WordPress already.

    I have been able to display the 5 fields and one text area using this code

    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    // Function to add fields
    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    echo ”;

    // Custom fields will be created here…// Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field’,
    ‘label’ => __( ‘Fabric Colour’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Enter Colour’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field02’,
    ‘label’ => __( ‘Fabric Contents’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Enter Contents’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field03’,
    ‘label’ => __( ‘Country of origin’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Enter Country’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field04’,
    ‘label’ => __( ‘Fabric Width or Roll height’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Enter Width’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field05’,
    ‘label’ => __( ‘Fabric Pattern.’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Enter Measurement’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    // Textarea
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_textarea’,
    ‘label’ => __( ‘Notes about Fabric.’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Enter Notes’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    function woo_add_custom_general_fields_save( $post_id ){

    // Text Field
    $woocommerce_text_field = $_POST[‘_text_field’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_text_field’, esc_attr( $woocommerce_text_field ) );
    // Textarea
    $woocommerce_textarea = $_POST[‘_textarea’];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, ‘_textarea’, esc_html( $woocommerce_textarea ) );
    }
    echo ”;

    }

    But when I Update a product I get the follow errors

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘woo_add_custom_general_fields_save’ not found or invalid function name in /home/queentex/public_html/wp-includes/plugin.php on line 429

    Warning: Cannot modify header information – headers already sent by (output started at /home/queentex/public_html/wp-includes/plugin.php:429) in /home/queentex/public_html/wp-admin/post.php on line 233

    Warning: Cannot modify header information – headers already sent by (output started at /home/queentex/public_html/wp-includes/plugin.php:429) in /home/queentex/public_html/wp-includes/pluggable.php on line 896

    I hope if you have some time and if you have any thoughts or suggestions about what I am doing wrong, you could let me know.

    Thank you kindly sir.

    ENB..//

    1. ENBertussi

      Ok so I found a little bit of awesome help and found a missing bracket with one of the good chaps over at stake exchange…

      here is the new code that is saving to the database in the product, but is still not showing on the front end and has given me a new error..

      o first a link to the web page on stake exchange..

      http://wordpress.stackexchange.com/questions/140858/custom-fields-for-woocommerce/140902?iemail=1&noredirect=1#140902

      then the code that saves to the dbase..

      // Display Fields
      add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

      // Save Fields
      add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

      // Function to add fields
      function woo_add_custom_general_fields() {

      global $woocommerce, $post;

      echo ”;

      // Custom fields will be created here…// Text Field
      woocommerce_wp_text_input(
      array(
      ‘id’ => ‘_text_field_fabric_colour’,
      ‘label’ => __( ‘Fabric Colour’, ‘woocommerce’ ),
      ‘placeholder’ => ‘Enter Colour’,
      ‘desc_tip’ => ‘true’,
      ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
      )
      );
      // Text Field
      woocommerce_wp_text_input(
      array(
      ‘id’ => ‘_text_field_fabric_contents’,
      ‘label’ => __( ‘Fabric Contents’, ‘woocommerce’ ),
      ‘placeholder’ => ‘Enter Contents’,
      ‘desc_tip’ => ‘true’,
      ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
      )
      );
      woocommerce_wp_text_input(
      array(
      ‘id’ => ‘_text_field_country_origin’,
      ‘label’ => __( ‘Country of origin’, ‘woocommerce’ ),
      ‘placeholder’ => ‘Enter Country’,
      ‘desc_tip’ => ‘true’,
      ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
      )
      );
      woocommerce_wp_text_input(
      array(
      ‘id’ => ‘_text_field_fabric_width’,
      ‘label’ => __( ‘Fabric Width or Roll height’, ‘woocommerce’ ),
      ‘placeholder’ => ‘Enter Width’,
      ‘desc_tip’ => ‘true’,
      ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
      )
      );
      woocommerce_wp_text_input(
      array(
      ‘id’ => ‘_text_field_fabric_pattern’,
      ‘label’ => __( ‘Fabric Pattern.’, ‘woocommerce’ ),
      ‘placeholder’ => ‘Enter Measurement’,
      ‘desc_tip’ => ‘true’,
      ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
      )
      );
      // Textarea
      woocommerce_wp_textarea_input(
      array(
      ‘id’ => ‘_textarea_fabric_notes’,
      ‘label’ => __( ‘Notes about Fabric.’, ‘woocommerce’ ),
      ‘placeholder’ => ‘Enter Notes’,
      ‘desc_tip’ => ‘true’,
      ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
      )
      );
      }
      function woo_add_custom_general_fields_save( $post_id ){

      // Text Field
      $woocommerce_text_field = $_POST[‘_text_field_fabric_colour’];
      if( !empty( $woocommerce_text_field ) )
      update_post_meta( $post_id, ‘_text_field_fabric_colour’, esc_attr( $woocommerce_text_field ) );
      $woocommerce_text_field = $_POST[‘_text_field_fabric_contents’];
      if( !empty( $woocommerce_text_field ) )
      update_post_meta( $post_id, ‘_text_field_fabric_contents’, esc_attr( $woocommerce_text_field ) );
      $woocommerce_text_field = $_POST[‘_text_field_country_origin’];
      if( !empty( $woocommerce_text_field ) )
      update_post_meta( $post_id, ‘_text_field_country_origin’, esc_attr( $woocommerce_text_field ) );
      $woocommerce_text_field = $_POST[‘_text_field_fabric_width’];
      if( !empty( $woocommerce_text_field ) )
      update_post_meta( $post_id, ‘_text_field_fabric_width’, esc_attr( $woocommerce_text_field ) );
      $woocommerce_text_field = $_POST[‘_text_field_fabric_pattern’];
      if( !empty( $woocommerce_text_field ) )
      update_post_meta( $post_id, ‘_text_field_fabric_pattern’, esc_attr( $woocommerce_text_field ) );
      // Textarea
      $woocommerce_textarea = $_POST[‘_textarea_fabric_notes’];
      if( !empty( $woocommerce_textarea ) )
      update_post_meta( $post_id, ‘_textarea_fabric_notes’, esc_html( $woocommerce_textarea ) );

      echo get_post_meta( get_the_ID(), ‘_text_field_fabric_colour’, true );
      echo get_post_meta( get_the_ID(), ‘_text_field_fabric_contents’, true );
      echo get_post_meta( get_the_ID(), ‘_text_field_country_origin’, true );
      echo get_post_meta( get_the_ID(), ‘_text_field_fabric_width’, true );
      echo get_post_meta( get_the_ID(), ‘_text_field_fabric_pattern’, true );
      echo get_post_meta( get_the_ID(), ‘_textarea_fabric_notes’, true );
      ”;
      }

      and now my new error when I hit save..

      red80% poly 20% cottonCanada90″8″ 900″ o ya lots of inchesthis is an awesome that rocks.
      Warning: Cannot modify header information – headers already sent by (output started at /home/queentex/public_html/wp-content/themes/enfold/functions.php:566) in /home/queentex/public_html/wp-admin/post.php on line 233

      Warning: Cannot modify header information – headers already sent by (output started at /home/queentex/public_html/wp-content/themes/enfold/functions.php:566) in /home/queentex/public_html/wp-includes/pluggable.php on line 896

      I am using the enfold theme from Kriesi.. they rock, it rocks, from theme forest.. it is here http://themeforest.net/collections/4283887-best-themes-in-the-world

      I also checked into the guy who tailgated this post.. http://ingoodcompanywebdesign.net/blog/2014/03/17/custom-fields-for-woocommerce-tailgating-remi-corson/ and checked out this too.. http://gerhardpotgieter.com/2013/09/17/woocommerce-custom-product-fields/ and I think my brain is melting now..

      I’ve taken to using attributes, but I think this product would work better if I could master custom fields on the general tab… http://queentextiles.ca/shop/uncategorized/scottish-tartan-plaid/

      Any thoughts you may have would be awesome Remi..

      cheers

      ENB..//

      1. ihtsham

        any solution boss? please share with me too.

  82. TheSanchize

    Hey Remi,

    Great code snippet, very helpful. I got it to work great.

    The text field saves and displays when the product is updated.

    But if i go in and delete what i have input in the text field and update the product, the text remains saved.

    Any ideas on how to save the field when the input text has been deleted

    1. TheSanchize

      Nevermind, I figured it out :)

      Great tutorial though.

      A thousand thanks

  83. HenkvandenBerg

    Hi Remi,
    I just bought the product-add-ons from Woothemes.
    I would like to have the custom tekst field together with product field to be saved as a unique product. e.g. customtext.productname or myname.domainname.xx
    Do you think that is possible?

    Thanks in advance for your help.

  84. derek.foster94

    Hey,

    I followed your instructions, step by step, and I was able to get the custom fields added into the product page editor in my dashboard, and the fields are saving after I ‘update’ the page, but I’m not seeing any results on the live site. I made sure to include the code that ‘gets’ the new meta data to display it, but I’m still seeing nothing. Any thoughts?

    1. Make sure you override properly WooCommerce custom templates. Basically a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/

  85. ereguan23

    Hi Remi:
    Thank you so much for your post has been very helpful to me. I am a rookie in wordpress and all this things. I followed all the steps to create the custom fields and all looks good but know I wanna show it in the page, I attached an screenshot where you can see where I want the fields, please help me with that because I really don’t know how to do that, sorry for my dumb question and my poor English I am not a English native speaker.
    Thank you…

    http://d.pr/i/VPsf

    1. Hey, I’ve included a a link to WooThemes documentation, it will help you understand how custom templates work, that’s how you will retrieve custom fields values: http://docs.woothemes.com/document/template-structure/

  86. ereguan23

    Hi again Remi:
    I figured out how to display the value of the field that I want but its show it w/o the label. how can I display the label of the field?

    Thanks

  87. Albert

    i want add my custom text box in my post and page section …
    hi dear please tell me.. how is it;

  88. mentolnet

    Hello Remi and thank you for your WooCommerce articles and snippets. However, i am trying to find a way to do the exact opposite of this – hide a few of the settings fields to simplify the user experience. What i wish to achieve is a way to define a few of the settings myself and leave only a chosen few to be defined by the user. Is this possible, and how?
    Thank you.

  89. Nebojsa

    Hello Remi,

    is there any way i could assign custom class or id to checkbox, so i could have that class/id on single product page? I did used “echo get_post_meta( get_the_ID(), ‘my-field-slug’, true );” and i do get “yes” as value in between span tags, but i would like to stylize that span somehow. So i tried to wrap this span inside of a div but div is not displayed on page at all. So any help from anybody here would be much appreciated. Just simple solution how to add custom class or id to this checkbox span “yes” value?

    1. hey use a code similar to this:

      echo ‘‘;

      1. Nebojsa

        I did place ‘class’ and assigned class name to that field. But I’m not able to have that class “displayed” on single product page. See image here http://i.imgur.com/4tkK6PK.png

        It’s still just a span tag. I do have class under edit product page, but no luck with single product page.

        1. I update my st answer as it wasn’t correct ;-)

  90. ihtsham

    Dear Remi!
    I am absolutely dummy to PHP. I really really deserve your reply please.

    Where I have to post your code in functions.php? anywhere?

    here is the code which i am pasting in file.

    ===================
    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    echo ”;

    // Custom fields will be created here…

    echo ”;

    }

    // Number Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_number_field’,
    ‘label’ => __( ‘My Number Field’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ ),
    ‘type’ => ‘number’,
    ‘custom_attributes’ => array(
    ‘step’ => ‘any’,
    ‘min’ => ‘0’
    )
    )
    );
    =======================

    i am getting this error:

    Fatal error: Call to undefined function woocommerce_wp_text_input() in /home4/iamchand/public_html/xxxx.co.uk/wp-content/themes/undad/functions.php on line 103

    anyone who know where exactly is the error, please please help me.
    Remi! Boss! you be the first & help me.!
    i am using enfold theme.

  91. Gariest

    Hello Remi, thank you for great tutorial. I’ve got one question. I’ve set up my own code:
    inside woo_add_custom_general_fields is
    ———————————————————————————————————-
    echo ”;
    ?>

    My Select Field
    Please select
    ‘product’,
    ‘meta_key’ =>’_featured’
    ); $productPosts = new WP_Query( $args ); ?>

    posts as $product): ?>
    <option value="ID?>”
    >post_title;?>

    <?php
    echo '’;
    ———————————————————————————————————-
    And function for save:
    ———————————————————————————————————-
    function multiple_select_woo_add_backend_save( $post_id ){
    $select_multiple_for_woocommerce = $_POST[‘select_multiple_for_woocommerce’];
    update_post_meta( $post_id, ‘select_multiple_for_woocommerce’, $select_multiple_for_woocommerce );}
    ———————————————————————————————————-
    Products are rendering good. However data is not being saved. Could you please take a look? Thank you :)

    1. Gariest

      Ah I did not realize that HTML tags are not rendering. I’ve created a pastebin. Please take a look. Thank you :)
      Pastebin

      1. Gariest

        Hello again Remi, I’ve figured it out, I’ve created my own function. Solved. Thank you :)

        1. allmyhoney

          @Gariest do you mind sharing how you got the html tags to render? I to would like the html inside a Textarea field to render. thanks for your time

  92. AntoineM

    Hi, Im Antoine from France, sorry foy my bad english.
    In first, thank’s for your code Remi!
    however i’ve a litle problem:
    I add a field “textarea” it’s ok, i can see it as your screeshot at the head of this arcicle.
    My code in functions.php file :
    *********************************************************
    //Champs personnalisé fiche produit woo-commerce
    // Display Fields

    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;
    // Text Field
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_textarea’,
    ‘label’ => __( ‘N° des Photos’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    }
    function woo_add_custom_general_fields_save( $post_id ){

    // Textarea
    $woocommerce_textarea = $_POST[‘_textarea’];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, ‘_textarea’, esc_html( $woocommerce_textarea ) );

    // Display Custom Field Value

    echo ‘;
    ****************************************************
    I have also create (in my child-theme) a folder “woocmmerce” with inside a folder “single-product” and inside a “short-description.php” file.
    My code in this :
    ****************************************************
    post_excerpt ) return;
    ?>

    post_excerpt ) ?>

      

     
    **********************************************
    I think a have an (or most) error(s), can you help me? Thanks!
    Antoine

    1. AntoineM

      It’ok , sorry for the precedent post!

  93. AntoineM

    Remi is it possible to add a “custom field” in a page for give to user a posibility
    to add “instructions”?

    1. AntoineM

      I think, my solution, isn’t here!!!!
      I think, better for me, try to include a form field in the Cart or
      Checkout page. Do you think, it’s possible?

  94. Mattbi

    I must have ad a type-oh, I re-pasted the “saving field values” code into the functions.php, and now the word “two” shows up on the front-end.

    Thinking it was coming from the ‘options’ on the
    woocommerce_wp_select(
    array(
    I changed the options to ‘new’ and ‘used’ instead of ‘one’ and ‘two’.
    But it still says two on the front end, and it doesn’t matter if the product is set to new or used in the back end.

    It also only shows up on one product. any ideas here?

  95. MarkusJansson

    Hi,
    Can I add a text editor in this field instead of textarea?

    Thanks for a great tutorial!

    1. there’s no builtin function to call the rich editor

  96. Hello Remi, thank you for this article, it’s helped me greatly on a project.

    I had a need to include a pdf brochures on many product pages, I used your tutorial to add a custom text field for the pdf’s url.

    Now that I have that working, is there a way to add custom fields to product categories also? My client is wanting me to include a product family/overview pdf to the category pages.

    Ideally I’d like to put in a custom field/txt input on a categories edit page, in the same fashion as my product edit pages.

    Any info is greatly appreciated.

    Thank you.

  97. luc

    I want to add a country dropdown select. I see that Woocommerce already loads all possible countries in ‘woocommerce/includes/class-wc-countries.php’. Is there some way I could get those in a php which is located in my theme folder?

    1. Yes that’s possible, but that beyond the scope of that post! ;-)

  98. Hi,

    Thanks for awesome awesome post.

    I created ‘Two’ custom fields — text field for Date input and checkbox to work like a on-off switch.

    Bro, I have couple of queries::

    1. How can I use date picker (that displays calender for date input) instead of text field ?

    2. How can I display “custom message” depending on the checkbox status

    For example – When checkbox is checked “on” – value is 1, then I want to display a custom message “Ready for Shipping” tag (which can be stylized using css) on top product image on single product page and when it is checked “off” nothing should be displayed.

    Awaiting your reply at the earliest.

    Thanks in advance.

    Tejas

    1. For the date picker i recommend you to install jQuery UI, that’s the easiest way to do it.

      For the custom message, the best method would be to work with WooCommerce custom templates. Basically a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/

    2. holja

      For datapicker just use:
      ‘type’ => ‘text’,
      ‘class’ => ‘short date-picker’,

  99. […] I can manage to show one checkbox using woocommerce products custom fields […]

  100. ddavico

    Hi Remi and thanks for this tutorial,

    How can i make a custom field with multiple checkboxes?

    i hope you help me.

    1. yes but you need to use a custom field, you check the checkout field edition tuto on WooThemes doc to see how to do it

  101. Fettabachi

    Thanks so much for sharing such an incredibly useful tutorial.

    I’d like for my users to be able to enter HTML code into the text field similar to this –

    8,000 ft2 / 750 m2 per hour-double pass

    without printing the HTML.

    How can this be accomplished?

    Thanks again.

    1. This would require the use of the rich editor, i’ll try to update the post to include it as a custom field! ;-)

  102. dariodev

    Great tutorial, thank you!
    Is it possible to add custom fields for Attributes tab? To be specific, I want to add another checkbox beside “Visible on the product page”. By default when we add attributes to simple product we have option to display these attributes on the product page, most often in “Additional Info” tab. I want to add another checkbox, something as “Display under product title on product archive”, or similar. Idea is to display only one or two Attributes on specific location while all other will be displayed in default location (“Additional Info” tab). I checked meta-box files but I don’t see place to hook. I hope I missed something :)

    Thanks in advance!

    Dario

    1. No this is not possible. There’s no hook to add content to the attributes tab. I submitted a patch to WC core to make this possible, let’s see if it gets accepted. In that case that would be doable in the next WC version.

      1. dariodev

        Thanks for that! That would be really great. I will follow closely :) Thanks again.

  103. Vin

    Hi Remi,

    Thanks for this tutorial … You’ve helped me a lot!

    Maybe I can help, I get this code to hide the custom field if the field is empty .. works great!


    ID, '_ISBN_field', true);
    if( !empty( $ISBN_field ) ){
    echo 'ISBN10: '.$ISBN_field;
    } ?>

    Anyway, I have two problems and no idea how to fix it.

    1) I can not edit the custom field and always shows the same data whatever you do.

    2) When the custom field is empty, this field does not appear on the product page …. great! But this hidden field causes a line break between custom fields and that is not nice …

    I hope you can help me to solve these problems!

    Regards

    1. Vin

      The code appears incomplete in my previous comment..

      ID, ‘_ISBN_field’, true);
      if( !empty( $ISBN_field ) ){
      echo ‘ISBN10: ‘.$ISBN_field;
      }
      ?>

  104. createcomm

    Is there a way to make these customfields searchable in the productsoverview page?

    1. Yes, i wrote a tutorial on this a few months ago

      1. createcomm

        Can’t seem to find it. Mind giving me a link ;-)

        1. createcomm

          Sorry to be inpatient… Do you have a link? I’ve searched your site extensively, but can’t find that turorial

          1. My bad it was on user fields not products meta fields, but the method is pretty much the same: https://www.remicorson.com/add-woocommerce-users-fields-to-user-search/

          2. createcomm

            Thnx! I’m gonna try that plugin

  105. nicksarr1

    What Am I doing wrong? I can’t figure it out..

    My code is here http://stackoverflow.com/questions/24782884/woocommerce-custom-fields-output-for-variations

    I Really Appreciate any help!

  106. JoostSchreurs

    Great article!

    I’m struggling with the following topic and I think I’m pretty close…
    For my woocommerce page I need to add some extra product field. I sell contact lenses so the customers do not only need to fill in the quantity of boxes they want to buy, but, of course, also their refractive error. Because most people have two eyes, I need two drop-down menus: for the left eye and the right, with powers going from -0.50 until -6.50. I don’t know exactly how to solve this issue. Hope you could help me out :)

  107. nicksarr1

    I think I’ve read this 100 times and still can’t get it to work.. What am I missing?
    http://stackoverflow.com/questions/24782884/woocommerce-custom-fields-output-for-variations

  108. kharisulistiyo

    Hi Remi,

    Awesome post!

    I think the default WooCommerce product custom fields are hard to be extended into another framework which allow people to create custom fields easier. So, I clone the codes into my class. Her is the result, very simple framework “WooCommerce Custom Product Data Fields plugin” https://github.com/kharissulistiyo/WooCommerce-Custom-Product-Data-Fields

    Thanks for your post. It inspires me to create that plugin.

    Cheers!

    1. Awesome class dude!

  109. RussInVB

    Hi remi,

    Like a few others, I’m getting the following error…

    Fatal error: Call to undefined function woocommerce_wp_text_input() in /home/goldblog/public_html/appetizers/wp-content/themes/enterprise-pro/functions.php on line 191

    This is built on the Genesis framework.

  110. toddlyda

    This is great, but I would like it to be conditional. I would like to create a dollar value field for shipping that gets added only if International. I would also like an add-on charge for Alaska and Hawaii. Is this achievable using this tutorial as a starting point? How would I make these fields conditional at checkout?

  111. raymon

    Hello this works great but could you please update your areas to display HTML on the front end properly. For example if I paste:

    Then image will show-up on frontend not html code. Please post I really need it.

  112. raymon

    img class=”alignnone size-full wp-image-307″ src=”http://localhost:8888/amada_apparel/wp-content/uploads/2014/08/size-chart.png” alt=”size-chart” width=”600″ height=”248″

    Previous comment is this code. How to properly display the image not html code with tags.

  113. mantis

    I like the code, but unable integrate. Although I don’t need all. Appreciate to know the to integrate the following under single-product page:

    Product Title
    A date drop down list in this format:
    15-22 Sept, 2014
    15-22 Oct, 2014 etc.

    I tried to integrate this using the above codes and nothing happened.

    Regards

  114. len

    Basically what mantis said, I want to show my field on the product or maybe the single product page.

  115. len

    Hey I figured Out where to put content on the single product page, but i have 2 roadblocks.

    1) I’m only echoing the key, not the value. Ho do I echo the value?
    2) The result is showing on the product page but it doesn’t on the checkout page (cart-shipping.php)? How can I show it on the checkout page?

    Thanks in advance!!

  116. len

    Hey I figured Out where to put content on the single product page (content-single-product.php) , but i have 2 roadblocks.

    1) I’m only echoing the key from the dropdown list (two), it’s not echoing the value. How do I echo the value?
    2) The result is showing on the product page but it doesn’t on the checkout page (cart-shipping.php)? How can I show it on the checkout page?

    Thanks in advance!!

  117. milner66

    Hi Remi.
    Is there any way I can get the completed code, im not a coder and finding it difficult to add the custom field option on the single product page. Im building a site to sell sheet music and would like to be able to put the composer name and arranger name and difficulty level under the product name.

    Many thanks for this

    Cheers

    Ali

  118. AJ

    Hi Remi, i would like to spent you a coffee for this great snippet of code. ;-)

    But i can´t figure out how to display the Products Select Field Type in Frontend.
    I use “get_post_meta( $post->ID, ‘_product_field_type_ids’, true );” but i only get the word “Array” displayed.

    What i’ am doing wrong?
    Thank you for your answer.

    1. you need to use a foreach if playing with arrays

  119. Enric

    Hi Remi,
    Great post!.
    I don’t have a tecnich level so I need some advice.
    I need to add a simple field in product variations. How can I do it? Could you help me?
    Thanks in advance

    1. normally following the tuto step by step should enough ;-)

      1. Enric

        This tuto is for a simple product but I want to add a field in a product variation?
        Regards

  120. bennyhudson

    Hi Remi,

    I was wondering if you could help me.

    I’m building a site that uses WooCommerce Subscriptions, and I want users to be able to become members of the site, and also associate themselves with a specific real world club.

    Essentially, I have made a store finder, and I want users to be purchase a level of membership, and then have a drop down of all the clubs on the product detail page. I’ve followed this tutorial, and have the drop down appearing on the back end, but can’t work out how to get it to appear on the front end!

    Thanks
    Ben

  121. msaeedi

    Bonjour Remi,
    I have created a plugin with some help from your tutorial
    I can save my custom field data in meta table but i can’t update it,
    What do you think about?

    Thanks.

    1. make sure you use hook the function that saves meta to woocommerce_process_product_meta

      1. msaeedi

        Thanks for your reply
        I don’t know why but i can’t use $post_id in my plugin so i swith to global $post and the n $post->ID and now i can save and update!

        Thanks.

  122. iRobin

    Hi Remi,

    I have just created some custom fields, four drop-downs. Is it possible for customers to select an item in the drop down? I want something like this… The customer can select a subscription (radio button), ‘Sterkte linkeroog’, ‘Cylinder links’, ‘As links’, ‘Sterkte rechteroog’, ‘Cylinder rechts’ and ‘As rechts’. Link: http://studentlens.nu/product/coopervision-proclear-toric

    Example: http://www.eyewish.nl/product/air-optix-for-astigmatisme6?SearchParameter=CLlenstype-M%3DMaandlenzen%26ProductListPrice-M%3D%26wearduration-M%3D%26%40Sort.instoredate%3D1&PageSize=17

    Thanks,
    Robin

  123. tinmanutd@gmail.com

    Hi!

    Great Post! It helped me a lot for my project.
    Thanks so much for your tutorial! I have to sign up and log in just to say thank you lol.

    With much gratitude from Australia :)

  124. stoypenny

    Great article! It took me a while to get the data to show up in a custom tab, still not entirely sure how I made it work. Anyway, is there a proper way to override the default icon for the new custom tab? Is there a pre-built list of icons I can select from, if so, where might I find those at?

  125. pascual963

    Hi Remi, I’m new to woocommmerce. I was wondering if one could override the class-wc-meta-box-product-data in a way that I could eliminate most tabs (inventory, shipping, etc) and have just a simple form with only the fields needed. Is that possible and how would I do that? Thanks

  126. […] would suggest you read up a bit about (WooCommerce) custom fields on this very popular post Mastering WooCommerce Products Custom Fields – Remi Corson. This will bring you up to speed on how to program all the different fields. I will just be looking […]

  127. […] would suggest you read up a bit about (WooCommerce) custom fields on this very popular post Mastering WooCommerce Products Custom Fields – Remi Corson. This will bring you up to speed on how to program all the different fields. I will just be looking […]

  128. 1234Crai

    great article, one slight area i hope you can help me on.
    I’ve created a customer text field using exactly your code above – works great.

    However, wondered if you can help, i’m trying to pull this text field which is saved against a product into the woocommerce orders / customers export plugin here.

    The array is called nominal and i’m trying to get it in after the META value as seen below.

    The text field is save din my database at present with the meta_key as “_text_field”. I’ve started where i think i need to get it in.

    $line_item = apply_filters( 'wc_customer_order_csv_export_order_line_item',
    array(
    'name' => html_entity_decode( $product->get_title(), ENT_NOQUOTES, 'UTF-8' ),
    'sku' => $product->get_sku(),
    'quantity' => $item['qty'],
    'total' => wc_format_decimal( $order->get_line_total( $item ), 2 ),
    'meta' => html_entity_decode( $meta, ENT_NOQUOTES, 'UTF-8' ),
    'nominal' => *****************
    ), $item, $product, $order, $this
    );

  129. Namzar

    Hello everyone.

    I’m not a coder, I don’t really understand php. I’m exhausted, after hours of trying therefore i post here in hope someone would guide me. Can anybody here give me detail example on how to display the field value in frontend. the description in the tutorial are too simple, its not meant for a non-coder like me. Where do I paste the
    echo get_post_meta( $post->ID, ‘my-field-slug’, true ); ? Which file? Which line?

    I tried to paste echo get_post_meta( $post->ID, ‘_textarea’, true ); in content-single-product.php but its not displaying. The values are saved in the backend, but not dis[playing in the product page. Please let me know if I am putting the wrong code. appreciate your help. Thanks in advance.

  130. WbTOne

    Hi Remi!

    I’m Willian from Brazil!
    Congrats on your job! Is Amazing! ;-)

    I’m new in Woocommerce…
    Is there any way to make a letters counter and calculate the price of each letter?
    Like this: http://www.woodlandmanufacturing.com/acrylic-letters.html
    Or this: http://www.alphabetsigns.com/signs/p/IF01-16.html (Options tab)

    Also, I’ll need to add other attributes such as thickness and size, but i think it’s easier.

    Thank You for your help!! ;-)

  131. gotstolearn

    Dearest Remi,

    I am not an expert at Woo Commerce and would respectfully request your guidance and willing to pay you for your assistance.

    1. I have a website project that requires an online catalog to sell used vehicles. The lot owner wants to be able to display 100 used vehicles based upon categories such as make, model, body style. Each vehicle product would require the ability to populate up to 24 custom data fields for mileage, condition, year, color, etc.

    2. When a consumer lands on the used vehicle products details page, the lot owner wants to disable the entire cart and checkout process but use a CONTACT FORM SUBMISSION on EACH PRODUCT DETAILS page instead of ADD TO CART.

    3. When the shopper clicks CONTACT NOW an ADMIN EMAIL is generated with the shoppers contact information and that email will require to include the VEHICLE sku as an indentifier so the sales staff will know what vehicle the shopper was interested in buying.

    4. As soon as the new site goes live the lot owner wants phase two to create an automated cron job so that all current inventory on his site is collected and sent to five third-party website for display on those additional sites.

    5. In review:
    DELETE ALL CHECKOUT AND CART FUNCTIONALITY.
    ADD CONTACT FORM SUBMISSION ON EVERY PRODUCT DETAIL PAGE
    GENERATE A CONTACT NOW LEAD NOT CHECKOUT & NO CART
    AT TOP OF EVERY PRODUCT DETAILS PAGE A SLIDESHOW DISPLAYING UP TO 30 IMAGES OF THAT PARTICULAR VEHICLE FROM VARIOUS ANGLES, UNDER THE HOOD, INTERIOR, TIRES, BODY DAMAGE ETC.

    I need your guidance what to do first. I read your post on deleting the shopping cart and checkout but should I do that first and then add 2 dozen customer product fields? If I delete the entire cart and checkout will I be able to continue to display the 24 custom data fields on the product details page?

    How much would you charge me to follow along for guidance as those changes are implemented?

  132. gotstolearn

    Remi,

    I copied and pasted your coding verbatim into my functions.php file for testing purposes. I get an error when attempting to save functions.php on the array line of the Call to undefined function woocommerce_wp_text_input()

    Here is the code I copied from your post above:

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field’,
    ‘label’ => __( ‘My Text Field’, ‘woocommerce’ ),
    ‘placeholder’ => ‘http://’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );

    See above the third line array( is where the error is appearing when saving in Dreamweaver.

    Crucial to my project — can you provide a DATE field to give the admin a way to keep track of when the product was displayed for sale 10/21/2014 but it has to be a data field if possible.

    1. znefesh

      Remi,

      I have the same exact problem.
      The *input() function(s) exists in woocommerce/includes/admin/wc-meta-box-functions.php

      Please advise.
      Thank you

  133. pawankumar

    I add custom filed wocommere but i need date and time so how can i add this please help me…

  134. mateusz.win

    Hey,

    It’s great tutorial, however I got one problem with getting this custom field on some places like shipping calculator. Shall I use It in other way or add something to make It visible on every page I’d like to ?

    1. mateusz.win

      It’s not about shipping calculator, but about checkout . Even If I var_dump($post or $woocommerce, $product) It looks like It doesn’t have that value at all on this checkout field…

  135. Amber

    Thank you so much for this.
    it was just what I needed.
    but I’ve got some problem with checkbox.

    When I checked the checkbox it updated as ‘yes’,
    but I did not check the checkbox still updated as ‘yes’ again.
    has to be updated as ‘no’…

    help me out please!!!!!
    here is my code…

    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );
    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {
    global $woocommerce, $post;
    echo ”;
    // Custom fields will be created here..

    // Checkbox
    woocommerce_wp_checkbox(
    array(
    ‘id’ => ‘_bubble_new’,
    ‘wrapper_class’ => ”,
    ‘label’ => __( ‘New Product’, ‘woocommerce’ ),
    ‘description’ => __( ‘Check for print new product deco bubble on product list!’, ‘woocommerce’ )
    )
    );

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_short_desc’,
    ‘label’ => __( ‘Short description’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘class’ => ‘short” style=”width:100%;”‘,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the short description here.’, ‘woocommerce’ )
    )
    );

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_short_desc2’,
    ‘label’ => __( ‘Short description 2’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘class’ => ‘short” style=”width:100%;”‘,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the short description here.’, ‘woocommerce’ )
    )
    );

    // Textarea
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_description’,
    ‘label’ => __( ‘Description’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘class’ => ‘short” style=”width:100%;”‘,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the description here.’, ‘woocommerce’ )
    )
    );
    // Textarea
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_applications’,
    ‘label’ => __( ‘Applications’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘class’ => ‘short” style=”width:100%;” rows=”10″‘,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the applications here.’, ‘woocommerce’ )
    )
    );
    // Textarea
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_p_standards’,
    ‘label’ => __( ‘Perfomance Standards’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘class’ => ‘short” style=”width:100%;”‘,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the rerfomance standards here.’, ‘woocommerce’ )
    )
    );
    echo ”;
    }

    /**
    * Save Custom Fields for Variations 24/11/2014
    */
    function woo_add_custom_general_fields_save( $post_id ){

    // Checkbox
    $woocommerce_chk = isset( $_POST[‘_bubble_new’] ) ? ‘yes’ : ‘no’;
    update_post_meta( $post_id, ‘_bubble_new’, $woocommerce_chk );

    // Text Field
    $woocommerce_text_field = $_POST[‘_short_desc’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_short_desc’, esc_attr( $woocommerce_text_field ) );
    $woocommerce_text_field = $_POST[‘_short_desc2’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_short_desc2’, esc_attr( $woocommerce_text_field ) );
    // Textarea
    $woocommerce_textarea = $_POST[‘_description’];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, ‘_description’, esc_html( $woocommerce_textarea ) );
    // Textarea
    $woocommerce_textarea = $_POST[‘_applications’];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, ‘_applications’, esc_html( $woocommerce_textarea ) );
    // Textarea
    $woocommerce_textarea = $_POST[‘_p_standards’];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, ‘_p_standards’, esc_html( $woocommerce_textarea ) );
    }

  136. Thomas Kaarup

    my php skills can be placed in a very small box. Is this, as a plugin, for sale?

  137. Shauny

    I’m trying to do this (and the variations version) with a multiselect, which I’d then like to use the “chosen” jQuery feature which WooCommerce uses to make it easier to use.

    I’ve got the multiselect completed (and can share the code if you’d like) but can’t figure out how to turn it into a “chosen” box?

  138. luc

    Hi Remi,

    I made some custom product types. I would like to add some custom fields, specific for those product types. So each product type would have its own custom fields. Is something like that possible?

    Thanks!

    1. luc

      I see that woocommerce uses classes like “show_if_external” and “show_if_simple”. Can I use the same method?

  139. samsonphan

    Hello Remi,
    Which of the templates did you modify for the example provided? I’m trying not to break my site by guessing wrong:-)

  140. mauroV8F5

    Hello,

    I’ve a question about to trigger the “Update” woocommerce product action by code.
    In my site registered users can upload downloadable products in frontend by WPUF,
    and they can select if the products are free, selecting the value from a dropdown list

    I’ve added this snippet of code in functions.php:

    //function to update product status to ‘publish’
    // and set the price to 0 for ‘free’ products

    add_action(‘wpuf_add_post_after_insert’, ‘change_post_status’);

    function change_post_status($post_id){

    $project_type = get_post_meta($post_id, ‘project_type’, true);

    if ($project_type == ‘Free’)
    {

    update_post_meta( $post_id, ‘_regular_price’, 0);
    $current_post = get_post( $post_id, ‘ARRAY_A’ );
    $current_post[‘post_status’] = ‘publish’;
    wp_update_post($current_post);
    }
    }

    it seems to work, I can see the product as live after submission, ready to download, BUT
    I can’t see it under categories, and in the woocommerce shop page.
    To view it there, I need to enter as admin in Products, and in its page, click “Update” button.

    so I thought that if I could somehow triggers the action of “Update” button by code, I solved the problem. How can I do that? is the correct the procedure? can you give me a hint?

    thank you

  141. amordeo

    hi

    i have add a custom field to my product page and they works finde, but i want add this field entrys to the cart and checkout page and e-mail-Template.

    can everyone help me to do this

  142. danetc

    Hi,

    I have same question as above member. How do I call these custom values at the checkout page? If I use the call method you suggested above nothing shows up. It only works on product pages.

    Thanks!

    1. mrky007

      This would help me also. Did you get an answer to this?

  143. […] have three types of custom fields author, editor and publisher created with this tutorial. All of them contain two inputs for the first and the last […]

  144. skivvy

    Hi Remi

    Many thanks for this tutorial. I am now trying to add custom fields to the order details page but am stuck as to which action hooks to use.

    So where for products we use

    add_action(‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    What would be the hook name for the order details page? I’ve searched everywhere but can’t get anything to work.

    Would be grateful for any help. Thanks

  145. waynewebdesign@gmail.com

    Hi Remi,
    Thank you for this tutorial. I’ve followed along and input the info into functions.php. Everything shows up on the backend. But the fields aren’t visible on the simple product. Can you show me where to place this code:

    ID, ‘_select’, true );
    // You can also use
    echo get_post_meta( get_the_ID(), ‘_select’, true );
    ?>

    I placed it in functions.php with no luck. Thank you

  146. davidandrew

    Hi Remi

    For clarification..

    Custom attribute:
    Attribute created through the WC admin UI

    Custom field:
    Declaring it using functions.php using the action: woocommerce_product_options_general_product_data()

    How do I enable my custom field attribute (CFA) to have product archives in my store so I can use CFA in my custom primary menu?

    TIA

    Dave

    1. davidandrew

      This field has been registered under the ‘General’ tab not the ‘Attribute’ tab.

      Can general custom fields have product archives?

      :s

  147. AudreyC

    Hello,

    I followed your post but when I applied it on my site, I have a white page and in the console I got the following JS error message : “The character encoding of the HTML document was not declared. The document will be print with incorrect characters to some of the configurations of the browser if the document contains characters out of the US-ASCII scope. The encoding of the page of characters must be declared in the document or the transfer protocol. ”

    I am french, but to make a test I just tried to add your textfield example, so there is no accents or anything else, I can’t figure the problem. I tried to encode my functions.php file into many format but it doesn’t fix the problem. I am using notepad++ to modify the functions.php file.

    Here my code :

    // Add custom fields on the products

    function woo_add_custom_general_fields() {
    global $woocommerce, $post;
    echo ”;

    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field’,
    ‘label’ => __( ‘My Text Field’, ‘woocommerce’ ),
    ‘placeholder’ => ‘http://’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );

    echo ”;
    }

    function woo_add_custom_general_fields_save( $post_id ){
    // Text Field
    $woocommerce_text_field = $_POST[‘_text_field’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_text_field’, esc_attr( $woocommerce_text_field ) );

    }

    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );
    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    Many thanks to your help.

  148. humayun

    Hi Remi,
    After adding below code on functions.php, I could not understand what should I do now for display single product page. Please help me –

    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    // Text Field
    woocommerce_wp_textarea_input(
    array(
    ‘id’ => ‘_textarea’,
    ‘label’ => __( ‘My Textarea’, ‘woocommerce’ ),
    ‘placeholder’ => ”,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );
    }
    function woo_add_custom_general_fields_save( $post_id ){

    // Textarea
    $woocommerce_textarea = $_POST[‘_textarea’];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, ‘_textarea’, esc_html( $woocommerce_textarea ) );

    }

    Thanks,
    Humayun

  149. Thanks for this, it’s exactly what I needed!

    Minor suggestion: it seems like this won’t let the user save blank fields. Instead of
    if( !empty( $woocommerce_text_field ) ) on line 5 of the woo_add_custom_general_fields_save function, what about if( (!empty( $woocommerce_text_field )) || ( (empty($woocommerce_text_field)) && (get_post_meta($post_id, '_text_field', true )!='')))
    just in case the user want to clear the field. Apologies if this was mentioned in the comment storm above.

    1. geewhiz

      This 100x!!! @remi, please update your save fields gist to account for saving blank fields to clear data, not allowing users to save empty fields is a bug!

      Otherwise thanks for the clear and concise tutorial, great read!

  150. Iara-chan

    Hello! Thanks for the tutorial!

    I’m not very good programing things like that, so I have two questions and I wonder if someone could help me (please!!!).

    The first: how I do show the information in this form I created in the short description of the product?

    The second: I want to know if it is possible in one of these lines receive a category (link) and/or tag (link), and if doesn’t exist, create a new category/tag automatically.

    Hugs!

  151. kfalter

    Hi! Great tutorial!

    It worked the first time! I am using an advanced ajax filter and I was wondering why these new attributes do not show up in the list of available attributes to filter on?

    Thank you so much!
    Kelly

  152. Kraken

    Hi Remi,

    Any chance you could give me a quote for how much it’d be to get updated versions of this and the Variable code? I’m getting an error using the above, and really need my site to go live very soon. Would love to purchase, if possible.

    Thanks for your time and consideration!

  153. buckneri

    This works great. One problem… how would i adjust the code so that the fields are not put into the system as serialized data? its all fine and nice to have a single meta_key with all the fields from the tab info in it, until you want to import or export the data of 10k products… any tips?

    1. buckneri

      My mistake ive been scowering the internet for a week trying to solve this issue and i forgot there are TWO.. count them.. TWO posts on the entire internet that deal with custom fields.. this one and then there is a plugin for a custom field framework.. the framework one is the serialized data.

      Question… why describe how to make a tab and then tell everyone how to add the fields to a shipping tab as your example? why not show the code on how to add these new fields to the custom tab you just created??? as it seems everyone is having the same issue(me as well) where no matter what we swap the hook out for, they will not go into the custom tab, they either go into general or disappear…

  154. buckneri

    After hours of searching and trial and error i have the solution on how to add your newly created custom fields to your newly created tab:

    First change

    echo ”;

    to:

    echo ”;

    then change:

    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    to:
    add_action( ‘woocommerce_product_write_panels’, ‘woo_add_custom_general_fields’ );

    You are welcome to all the people that read this and get frustrated that the code was not show on how to do this rather than how to add it to the shipping tab of an existing hook.

    1. The aim of this article is not to explain how to create product tabs, but how to create products custom fields ;-)

      1. H2406

        Dear Remi, dear Buckneri,

        I have the same problem – I created a new custom product tab as shown in the article, but I am not able to add my custom fields to that tab.

        What do I have to change so that the custom fields appear in the custom tab?
        I tried to change the ‘woo_add_custom_general_fields()’ link to ‘woocommerce_product_options_custom_tab’, but that did not work.
        I can just add the custom fields to the ‘general’ tab but not to the new custom tab…

        Is there any solution for this issue?

    2. goldy

      Hey buckneri… Thanks For Suggestion …That was Really Helpful.
      what i didn’t understand was why that field still displaying in General Tab and its not showing properly . Except That is working Awesome.

  155. mrky007

    This tutorial works perfectly! THANKS!!!

    I have only one question:

    I added a few custom fields and they work in back-end and front-end (single product page). But I want to add some of these fields on the cart page. So basically I will have Product name and next to it my custom fields.

    Can you help me out on this one?
    Thank you in advance.

  156. d00nn1

    Hi Remi, first I want to apologize for my English is not good, everything works great, I have this php ( ) paste a map marker
    PHP on the file that I need to add look like this

    elseif($infobox_type == ‘cspm_type5’){

    $output .= ”;
    $output .= ”;
    $output .= ”.$post_thumbnail.”;
    $output .= ”.$the_post_link.”;

    //here I have the data insert something like subtitles//

    $output .= ”;
    $output .= ”;
    $post_record = get_post($post_id, ARRAY_A, ‘display’);
    $post_content = trim(preg_replace(‘/\s+/’, ‘ ‘, $post_record[‘post_content’]));
    $output .= apply_filters(‘cspm_large_infobox_content’, $post_content, $post_id);
    $output .= ”;
    $output .= ”;
    $output .= ”;
    $output .= ”;

    Please help me, they are my last chance to get the added

  157. d00nn1

    echo get_post_meta( get_the_ID(), ‘barcode’, true

    here the php is that I need to enter

  158. d00nn1

    when I enter under the title this code

    $output .= ‘<a class="wm-button color-read" href="tel:”>‘;
    it does not work

    and when I insert this code

    $output .= ‘+3334455555‘;

    works well but then I can not control by WordPress

  159. william.alexander

    This is a great tutorial. I have a client who is a music store owner and this will be perfect for allowing me to add a checkbox for whether or not an instrument comes with a case. However, I found this post in a search for a slightly different functionality that I’m hoping you can help me with:

    My client has hundreds of products to enter into their site. The WooCommerce product screen has so many entry fields but the client will only be using a few of these – maybe 5 total.

    I’d like to create a Meta Box on the Add Product screen that only displays the fields that my client will be using, to simplify their experience of posting a new product.

    I have managed to add a meta box that displays the Regular Price field by including this code:
    woocommerce_wp_text_input( array( 'id' => '_regular_price', 'label' => __( 'Regular Price', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')', 'data_type' => 'price' ) );

    but the price is not saved when I update the post, so I’m missing something or I’ve done something wrong. Would you ever consider writing a post on how this can be accomplished? Or pointing in the direction of where some documentation might be that could help with this? Thanks.

  160. naki

    I am unable to see variations tab in product data meta box. I have checked out the used for variations box in the attributes but still i’m unable to see that variations tab & I’m selecting Variable Subscription. Can you help me out??????

  161. schalkjoubert

    Hi Remi,

    Great tutorial, thankx;
    I am battling to display a link.

    I like to display the product certificate number, ie TH-9465623 which then links to the certificate PDF which lives on another website.

    `
    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    echo ”;

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field’,
    ‘label’ => __( ‘My Text Field’, ‘woocommerce’ ),
    ‘placeholder’ => ‘http://’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );

    echo ”;

    }

    function woo_add_custom_general_fields_save( $post_id ){

    // Text Field
    $woocommerce_text_field = $_POST[‘_text_field’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘_text_field’, esc_attr( $woocommerce_text_field ) );
    }
    `

  162. thebastion

    Hi Remi,

    Your code works great and I have managed to set up 3 custom fields for my products.

    However, I don’t want to display them on the product page, I want to display them on the My Account page if the customer has purchased the item.

    I am really struggling to work out how to do this. Any help would be greatly appreciated.

    Stuart

  163. craigs

    Hi there.
    Thanks for this great tutorial. One issue I have is getting my new field to display in most places under the title of the product.

    I have added this to functions.php and I can enter and save the value in the Sub Title field against the product. However, I can’t display it using: ID, ‘sub_title’, true );?>, I’ve added this to the content-product.php template file and it hasn’t appeared.

    Here is my functions.php:

    // Display Fields

    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields

    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    echo ”;

    // Text Field

    woocommerce_wp_text_input(

    array(

    ‘id’ => ‘_sub_title’,

    ‘label’ => __( ‘Sub Title’, ‘woocommerce’ ),

    ‘placeholder’ => ”,

    ‘desc_tip’ => ‘true’,

    ‘description’ => __( ‘To be displayed under the Product Title.’, ‘woocommerce’ )

    )

    );

    echo ”;

    }

    function woo_add_custom_general_fields_save( $post_id ){

    // Text Field

    $woocommerce_text_field = $_POST[‘_sub_title’];

    if( !empty( $woocommerce_text_field ) )

    update_post_meta( $post_id, ‘_sub_title’, esc_attr( $woocommerce_text_field ) );

    }

    Can anyone help please?

  164. Jay Dawebnerd

    ok i don’t want to sound Dumb but does all that go into the (edit themes section “Function.php”)???
    like i really dont understand or does it go in a new file??

    1. Jay Dawebnerd

      so i placed the text in the functions.php and it broke the site?????
      what did i do wrong???

      1. Jay Dawebnerd

        LOL ok i’m still at it i deleted the site all together because it broke to where nothing loaded. was that because i placed code in the middle of functions.php

        im going to reinstall the theme and try again…
        should i place the code at the end of the “function.php” or top or somewhere else.. PLEASE REPLY

  165. c0de

    hello,

    First of all thank you for writing such a great tutorial. I have used this for my store.

    But, what i need is custom drop-down list, let’s say Brand.
    and once i select one Brand, i want to populate another drop-down of Models.

    Is there any way to do such kind of things? It will be great if you suggest me solution for it. I am very thankful of you.

    Thank you

  166. Steven

    @Remi, thanks a million for this excellent post – saved me tons of time to get the backend of my plugin ready :)

  167. jdnamera

    “Products Select Field Type” Custom Fields not working with WooCommerce Version 2.4.7.

    Any solution?

  168. appraily

    Hi Remi, how are you =?
    Is possible that in woocommerce Dropdown Select Field Type method doesn’t works anymore ?
    Do you have any suggestion to make it works ?
    Kind Regards,
    Michele

    1. appraily

      Sorry, i forgot to mention my Woocomerce Version: 2.4.12

      1. appraily

        Hey Mate! Forget this comment, i havn’t read very well you post…I solved my problem, everithin is working fine with this version… Thanks again it’s a really helpfull post!

  169. venky4c6

    Hi Remi… i have created two custom fields with type of text and number type in product page..first i entered some value in both and updated ..then i retrieving those values and displaying in front end… its fine..

    But when i clear those two values and make it as empty. and i updated..this time values are visible and appearing previous entered value..

    how can i delete these values permanently …. pls help me out …..

  170. […] Mastering WooCommerce Products … – WooCommerce is without any doubt the more powerful e-commerce plugin for WordPress. And what i love with WooCommerce is that there’s an API for nearly … […]

  171. […] I can manage to show one checkbox using woocommerce products custom fields […]

  172. Johnnygu

    Hi Remi:
    Thank you for your awesome article! It’s really helpful me, and I have a question, would have any idea how I can include custom field in woocommerce search widget? Thanks!

  173. koenvdvelden

    Hi Remi,

    Thanks for your awesome post. Can you please update the last code (with the product search), because it doesn’t work with the current version of woocommerce.

    Thanks in advance!

  174. buckneri

    I am using this technique for a plugin that I am writing and it works great. I’ve recently run into a problem where I need to add a drop down select box that contains a LOT of options. Does anyone know of an easy way to turn the select box into something using Ajax? Maybe a search box that populates 100 options at a time and paginates them? I don’t even know where to start with Ajax and dynamically created fields.

  175. sjarahul

    Hi Remi
    Very helpful article. I am awfully stuck though.

    Could you please take a moment and help me out please?
    thanks
    This Code
    if(add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_product_lynk_ac_option’ )){echo ‘hi’;}else {echo ‘hello’;}
    //add_action( ‘woocommerce_process_product_meta’, ‘woo_product_lynk_ac_option_save’ );
    function woo_add_product_lynk_ac_option() {
    echo ‘Hello’;
    }
    shows that the action funtion has executed in the hook But I simply can not see my custom code below general product fields

    Please help.
    Thanks

  176. oweux

    Hello and thank you for the how-to. It saved us a lot of time.

    Do you know how to access the fields created this way through the REST API? (WC 2.6.x).

    The attributes created using this method do not become part of the values returned when using: $woocommerce->get(“products/{$product_id}”);

  177. goldy

    hi Thanks For Post , it is really helpful & Awesome.
    here i am doing little extra , it will be really helpful if you can give me answer.
    i am adding new tab in product data ( For Example PRODUCT INFO ) , i want to add custom fields in to this tab .

    /*
    * Custom Tab In Product Data
    */
    add_action(‘woocommerce_product_write_panel_tabs’, ‘woo_add_custom_admin_product_tab’);

    function woo_add_custom_admin_product_tab() {
    ?>

    <?php
    }

    will i am new in woocommerce coding area , but i really need to know how to add custom fields to custom tab.
    Thanks

  178. jav

    Hi,

    how do i add product field value into admin order meta. any idea or suggestions please.

    Thanks

  179. Hanan

    Hi Remi.

    Just what I was searching for! Thank you so much. Now I have question.

    How should I add an extra custom image upload field and than link this anywhere in theme?

    Please help.
    Best,

  180. Hoepsi

    Hi remi,
    thanks for you code. Worked great for me. I noticed that some people are asking how to hook the custom fields into the cart page and email templates. However I cannot see a reply on one of the questions. Was this ever resolved?
    I’de like to find a solution for this problem. Hope you can help…

  181. Giel

    Great tutorial, thank you!
    Just wonder how i can add a checkbox fieldtype with 4 tick boxes with different values?

  182. anu.hipnotyka

    No idea what i am doing wrong but i could never make the // Product Select work.

  183. pczafer

    Hi Remi,

    Great article Thanks for this… Is there any way we can pre-populate a Text Field if there is no entry? Just like adding a default value for the field…

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_text_field’,
    ‘label’ => __( ‘My Text Field’, ‘woocommerce’ ),
    ‘placeholder’ => ‘http://’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
    )
    );

  184. nygms

    Remi,

    I would like to export a CSV file with my product add-ons in separate columns. They currently all go into line_items or item_meta.

    Thanks,
    Vincent

  185. yanoom

    Hi Remi,
    Thanks a lot for all the wonderful and helpful posts (I’ve used quite a few! =)

    I saw other comments having trouble with the Product Select like me, and something feels weird:
    I’m getting a “Select box” (which feels right when I read the code):
    http://imgur.com/PV39tNN

    But in your screenshot there is a different controller (like the one we know from Woocommerce’s “related product”)… Is there maybe a JavaScript we’re missing or something?

    I’m using this in a widget (not product_meta like you suggest), please tell me if there is any explanation why it wouldn’t work

    1. my screenshots are probably outdated to be honest! ;-)

      1. yanoom

        Hi Remmi,
        Thanks for your reply.
        It is not a matter of screenshot, I’ve looked into it (as far as I can).

        It seems that since I’m using this code in a widget (/external plugin) and not in the woocommerce context I don’t get the Javascript functionality from Woocommerce (events on “input.wc-product-search” written in woocommerce/assets/js/admin/wc-enhanced-select.js)…

        Do you have a suggestion on how to include a “woocommerce product select” controller in a plugin/widget?

        :)

  186. sitesuccess

    Hiya Remi

    I’m using your code and works great.
    I do have one question: is there any way to show the custom fields in add/edit product and on the single product page (frontend), only for specific product type?

    Thanks

  187. akanksha

    how can i edit fields value. ?

    Can you tell me please.

    1. akanksha

      i got it thank you so much ….

  188. bejenaru

    Hello Remi, and thank you for this tutorial! This is great!

    I would have one quick question. I would like to know if I can use a hidden field to generate a value which is the result of the calculation between one number field (generated like in your tutorial) and the price of the product.

    My concrete example is the need to display the price per liter/kilogram/meter. I have the price per item, but the item weights a fraction of the measurement unit. Let’s say the item costs 10$ and weights 0,5 kg. I would like to be able to generate the price per kg for this item, in my case 10$/0,5kg=20$/kg.

    Would this be possible?
    Thank you!

    1. Hey, in that specific case I would suggest using something like this: http://www.woothemes.com/products/measurement-price-calculator/

  189. bejenaru

    Hello Remi and thanks for the suggestion but in this case this will not help me. I do not want to sell by liter or by kilogram, I only need to display which would be the price per liter or kilogram. This is a requirement in Europe so the customer can make comparison between prices easier (for example they can compare the prices between a package with 200grams and one with 300grams and see which one has the overall better price per kg…). So in my case this is not a field that I will need for selling, I only need to display it informatively…

    Thanks once again,
    V

  190. siecool

    Hello, I want to add a Checkbox Field Type with many options so that the visitor can select them before finishing his / her order. How do you make the value of the amount of this option appear and add up to the amount of the invoice?

  191. Lithix

    Do you have any idea how to make the custom product select field work with WC 3.0.8?

    I made this modification to get it working in WC 2.5, but now that doesn’t seem to work anymore:

    <input type="hidden" class="wc-product-search" style="width: 50%;" id="product_field_type_ids" name="product_field_type_ids" data-placeholder="” data-action=”json_search_products” data-multiple=”true” data-exclude=”ID ); ?>” data-selected=”ID, ‘_product_field_type_ids’, true ) ) );
    $json_ids = array();

    foreach ( $product_ids as $product_id ) {
    $product = wc_get_product( $product_id );
    if ( is_object( $product ) ) {
    $json_ids[ $product_id ] = wp_kses_post( html_entity_decode( $product->get_formatted_name(), ENT_QUOTES, get_bloginfo( ‘charset’ ) ) );
    }
    }

    echo esc_attr( json_encode( $json_ids ) );
    ?>” value=”” />

  192. bejenaru

    Hello Remi, can you approve my comment? maybe someone else can contribute… Thanks!

  193. Hello Remi, this is a great tutorial, can i ask a question regarding about this method?

    is this code is still working with WooCommerce 3.1 (Latest Version?)

    Best Regards,

  194. ssmith162

    Hello Remi,

    Thanks so much for this tutorial it is a great help. I have used it to be able to insert the fields just perfectly and that all seems to work fine. I am trying to use the field to populate the URL for a button I am placing on the woocommerce single product page. I cannot seem to get the code right to pull in the meta data from the new custom field into the url.

    Here is the code I have:

    // Display Fields
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    // Save Fields
    add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

    function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    // Text Field
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘product_sample’,
    ‘label’ => __( ‘Sample Product Link’, ‘woocommerce’ ),
    ‘placeholder’ => ‘http://’,
    ‘desc_tip’ => ‘true’,
    ‘description’ => __( ‘Enter the sample product link here.’, ‘woocommerce’ )
    )
    );
    }
    function woo_add_custom_general_fields_save( $post_id ){

    // Textfield
    $woocommerce_text_field = $_POST[‘product_sample’];
    if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, ‘product_sample’, esc_html( $woocommerce_text_field ) );

    }

    add_action(‘woocommerce_after_add_to_cart_button’,’cmk_additional_button’);
    function cmk_additional_button() {

    echo ‘View Product Sample‘;

    }

    Can you give me any guidance on what to put in the <a href ="CONTENT OF PRODUCT SAMPLE FIELD" area?

    Thanks for any help you can give.

    Sean Smith

    1. ssmith162

      Here is a screen shot of the code since it does not post correctly…

      http://imgur.com/Qnhz0IW

  195. misho

    Hello, im doing exactly what you did and it doesnt save in my database and even show nothing if i hook up that variable when i do echo .. :(
    // 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 ”;
    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘_custom_product_number_field’,
    ‘placeholder’ => ”,
    ‘label’ => __(‘Precio tarjeta ($)’, ‘woocommerce’),
    ‘type’ => ‘number’,
    ‘custom_attributes’ => array(
    ‘step’ => ‘any’,
    ‘min’ => ‘0’
    )
    )
    );
    echo ”;
    }

    function woocommerce_product_custom_fields_save($post_id) {
    $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));
    }

    function action() {
    echo get_post_meta($post->ID, ‘_custom_product_number_field’, true);
    };
    add_action( ‘woocommerce_single_product_summary’, ‘action’, 15 );

  196. petervp

    hello
    i’m struggling with adding new custom product fields to my WC site.
    basically what I need is to add a new custom sale price block under the general tab (for simple product and variation product), which will contain a text field for the price (this is simple and i’ve managed to do it), but instead of the description, I’d like to add a Schedule button to show another 2 fields for the 2 datepickers (start and end of the offer), just like the default sale price of WC.

    how can I achieve that?
    thanks
    kind regards

  197. aidanjporter

    Hey Remi,

    Thank you for this post it is honestly the best-written one I have found explaining WooCommerce product custom fields!

    For some reason, though the ‘Products Select Field Type’ is only like 10px wide and can’t be used, do you know if this is a bug from a newer version of Woo?

    Thanks!

  198. ndp

    Hello Remi,

    I have a problem I need help with: I need to able to display a dropdown selection of user meta data on the product/Add to cart page.

    For example, if a customer has user meta data: account_1, acccount_2 and account_3 in their user profile, I need them to be able to select one of their accounts on the product page. This value also needs to be attached to the order.

    Any ideas of how I could do this?

    Thank you!

  199. MOH3N

    Hi Remi
    thanks for your tutorial
    i have a question
    how can i display multiselect field values in front-end single product page?
    i am added a multiselect field in product admin page and i can save values of the field successfully. but i want to display values (English, Arabic ,…) in front-end
    thanks for your help

    $map_languages = (array) get_post_meta( $post->ID, ‘map_languages’, true );
    ?>

    <option value=’EN’>English
    <option value=’DU’>Deutche
    <option value=’AR’>Arabic

  200. Subrat4wp

    Hi Remi,

    Can you please suggest me is it possible to have suggested layout with variable products i.e. https://i.imgur.com/gwuAPeW.png

    Please advice.

  201. taurustechkz

    Is it possible to somehow add related (upsell) products for variations on the item card with the transition? I want it to look like on this image nursace.kz/wp-content/uploads/2018/10/sdfsdf.png

  202. loupaok

    Hi!
    Thery helpful guide!
    How can show in elementor and hello theme these fieldes?
    Also how can calculate them easy?
    Thanks :)

Leave a Reply