Support » Plugin: WooCommerce » add custom fields to order confirmation screen?

  • Resolved mgason

    (@mgason)


    Hi I have custom fields working on my checkout page. They appear in the orders screen. They also appear in customers confirmation email.
    I can not find any documentation about how to show custom field values on the confirmation page the user sees on the site after placing their order. Can anyone point me to some information?

    https://wordpress.org/plugins/woocommerce/

Viewing 8 replies - 16 through 23 (of 23 total)
  • I assume the label appears when there is no message?
    If you look at my first longer code I actually display ‘gift wrap:no thanks’ when the checkbox is not checked. That also allows me to say IF the checkbox is checked display the gift wrap input field.

    Would you consider having the checkbox?

    Try the new code here to do it without using the checkbox. Take a look at what I added in comparison to your current version. Helps to learn 😉 http://pasted.co/e319fc7c
    I have just changed the last function a bit. I put the value of the input field into a variable ‘$my_gift_wrap_entered’
    Then I say ‘if ( $my_gift_wrap_entered )’ display the input field. Basically says if it the variable has something in it display the input field. I think if the variable has no value in it, then it should not display. Let me know if it works. It may need some more code.

    OK, I found some time to test. It does not work. Figured I should save you some pain and warn you!
    I am testing and looking for a solution. By the way having the yes or no gift wrap checkbox as well would solve this

    not sure why storing the value in the variable didn’t work. I just changed it to check directly in the function and it works.
    so not storing the input in the ‘$my_gift_wrap_entered’ anymore, that line is gone.
    just checking in the if statement directly…
    if ( get_post_meta( $order->id, “my_gift_wrap_field”, true ) ) {

    complete code here
    http://pasted.co/114ee5f6

    Again, thank you so much! As you know, the code works beautifully! Actually, I was able to figure out what I did wrong with my initial code by examining the last code you sent me. In the Update the order meta with field value, I had:

    function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ($_POST['my_gift_message']) update_post_meta( $order_id, 'Gift Message', esc_attr($_POST['my_gift_message']));
    }

    instead of

    function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ($_POST['my_gift_message']) update_post_meta( $order_id, 'my_gift_message', esc_attr($_POST['my_gift_message']));
    }

    That’s why the message wasn’t showing up anywhere. I would never have figured that out without looking at your correct code. Thank you again for taking the time to help me!It is very much appreciated!

    https://photos.google.com/search/_tra_/photo/AF1QipPGMTicI9K4Q2OzaueNB4NIXj2VvNzvaZa65D17

    I want to add the customer billing address in customer order detail and i attach the link of image kindly check it and give me some suggestion.

    Thanks

    I just want to say thanks to you guys for discussing the solution to this issue. @mgason is right, there is very little documentation on this topic that I could find (I’ve been lost until I came across this thread!!) And I agree… you would think that this is pretty basic/obvious documentation for the plugin developers to include in the tutorials section.

    I want to post something that may help someone in the future who is still having issues with this. The specific code here did not completely work for my situation, I had to change a few minor parts around to get it to work for me. However, it would have taken me forever to figure this out of you all didn’t lead me down the right path with this thread!!

    In my situation, I needed to be able to display the user-submitted order info derived from basic text input fields, as well as textarea fields. Here are a few examples of my working code (the part that adds my custom fields to the order-received (aka thank you) page:

    Custom Text Input Field

    /**
     * Add the fields to order emails and thank you page.
     **/
    add_action( "woocommerce_email_after_order_table", "my_woocommerce_number_to_call_after_order_table", 10, 1);
     
    /* add same function to run on after orders table for thank you page */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_number_to_call_after_order_table", 10, 1 );
     
    function my_woocommerce_number_to_call_after_order_table( $order ) {
    echo '<p><strong>'.__('Phone Number to Call').':</strong> ' . get_post_meta( $order->id, 'Phone Number to Call', true ) . '</p>';
     
    }

    Custom Text Input Field

    /**
     * Add the fields to order emails and thank you page.
     **/
    add_action( "woocommerce_email_after_order_table", "my_woocommerce_time_to_call_after_order_table", 10, 1);
     
    /* add same function to run on after orders table for thank you page */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_time_to_call_after_order_table", 10, 1 );
     
    function my_woocommerce_time_to_call_after_order_table( $order ) {
    echo '<p><strong>'.__('Best Time to Call').':</strong> ' . get_post_meta( $order->id, 'Best Time to Call', true ) . '</p>';
     
    }

    Custom Textarea Field

    /**
     * Add the fields to order emails and thank you page.
     **/
    add_action( "woocommerce_email_after_order_table", "my_woocommerce_script_after_order_table", 10, 1);
     
    /* add same function to run on after orders table for thank you page */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_script_after_order_table", 10, 1 );
     
    function my_woocommerce_script_after_order_table( $order ) {
       echo '<p><strong>'.__('The Script').':</strong> ' . get_post_meta( $order->id, 'The Script', true ) . '</p>';
     
    }

    So here I had three different custom checkout fields I needed to display on the order-received (thank you) page. The code shown above places your custom fields directly after the order table, as you can assume. Those needing to place the custom fields in other areas can look here to find the appropriate hook: https://docs.woocommerce.com/wc-apidocs/hook-docs.html

    For instance, if you wanted to add your custom fields underneath the “Custom details” section, you would substitute woocommerce_order_details_after_customer_details in place of woocommerce_order_details_after_order_table

    Here is a trick I used to make this a whole lot easier. If you’re like me, you might have already used the available woo documentation to display field values on the order edit page found here: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

    Here is the code template to display your custom checkout field values on the order edit page:

    /**
     * Display field value on the order edit page
     */
    add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
    
    function my_custom_checkout_field_display_admin_order_meta($order){
        echo '<p><strong>'.__('My Field').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';
    }

    Since I had many fields I needed to display, I simply copied this line

    echo '<p><strong>'.__('My Field').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';

    from each of my custom fields that I had already set up, and pasted each line into it’s respective (order-received/thank you page) function. Think of it this way – you are displaying the checkout fields already on the order edit page with this code, you just need to use the appropriate action hooks to get it whereever you want.

    Anyway, the woocommerce people should really add documentation on this to their official site so people can find it easily. I definitely spent a big chunk of time trying to figure this out and so thankful that you guys already figured most of it out, so I just had to connect a couple of very minor situational dots. Would still be sitting here confuzzled if it weren’t for this thread. Hope my additions can help someone else in the future save some time, like you guys did for me. Thank you!

    Oh yea, one more thing in case someone sees this. I am trying to figure out how to conditionally show the labels/meta info depending on if the field is empty or not. I think I remember seeing this mentioned in the thread earlier but not sure if the answer was there. About to read again…

    Alright, finally figured out how to hide checkout fields on the thank you page when they are empty, and display when content has been submitted. Again, had to make a few minor changes to the code above for it to work in my situation. Here are my final working solutions for the examples I posted above:

    Custom Text Input Field

    /**
     * Add the fields to order emails and thank you page.
     **/
    add_action( "woocommerce_email_after_order_table", "my_woocommerce_number_to_call_after_order_table", 10, 1);
     
    /* add same function to run on after orders table for thank you page */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_number_to_call_after_order_table", 10, 1 );
     
    function my_woocommerce_number_to_call_after_order_table( $order ) {
    
      if ($number_to_call = get_post_meta( $order->id, 'Phone Number to Call', true ) ) {
     
      echo '<p><strong>'.__('Phone Number to Call').':</strong> ' . get_post_meta( $order->id, 'Phone Number to Call', true ) . '</p>';
     
        }
    }

    Custom Text Input Field

    /**
     * Add the fields to order emails and thank you page.
     **/
    add_action( "woocommerce_email_after_order_table", "my_woocommerce_time_to_call_after_order_table", 10, 1);
     
    /* add same function to run on after orders table for thank you page */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_time_to_call_after_order_table", 10, 1 );
     
    function my_woocommerce_time_to_call_after_order_table( $order ) {
    
      if ($time_to_call = get_post_meta( $order->id, 'Best Time to Call', true ) ) {
      
      echo '<p><strong>'.__('Best Time to Call').':</strong> ' . get_post_meta( $order->id, 'Best Time to Call', true ) . '</p>';
    
       } 
    }

    Custom Textarea Field

    /**
     * Add the fields to order emails and thank you page.
     **/
    add_action( "woocommerce_email_after_order_table", "my_woocommerce_script_after_order_table", 10, 1);
     
    /* add same function to run on after orders table for thank you page */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_script_after_order_table", 10, 1 );
     
    function my_woocommerce_script_after_order_table( $order ) {
    
       if ($the_script = get_post_meta( $order->id, 'The Script', true ) ) {
    
       echo '<p><strong>'.__('The Script').':</strong> ' . get_post_meta( $order->id, 'The Script', true ) . '</p>';
     
       }
    }

    So to conditionally show the fields depending on whether there is content or not, you just need to add something like:

    if ($your_custom_field = get_post_meta( $order->id, 'Your Custom Field', true ) ) {

    to your function.

Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘add custom fields to order confirmation screen?’ is closed to new replies.