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 15 replies - 1 through 15 (of 23 total)
  • Hello,

    You would need to edit your wp-content/themes/your-theme-name/woocommerce/checkout/thankyou.php page as this is the order confirmation page.

    If you have any problems adding your custom meta there please provide me some more info about it so to give you more certain answer.

    Regards,
    Al

    There no hooks on this page it seems? That would be a good thing to have here as you can display them every where else you might want and it seems a common question and an obvious place to put checkout custom field information.

    I am not sure it warrants having a custom thank you page in my theme which I have to watch for updates. Still I would like to know how to do it.

    Here is the code from my functions.php for my checkout custom fields.

    add_action( 'woocommerce_after_checkout_billing_form', 'my_custom_checkout_field' );
    
    function my_custom_checkout_field( $checkout ) {
       echo '<div class="my_gift_wrap_checkout_field"><h2>' . __('Gift wrap') .'</h2>';
    
       woocommerce_form_field( 'my_gift_wrap_checkbox', array(
    'type'          => 'checkbox',
    'class'         => array('checkbox_field'),
    'label'         => __('Gift wrap? - Yes please!'),
    'required'  => false,
    ), $checkout->get_value( 'my_gift_wrap_checkbox' ));
    
    woocommerce_form_field( 'my_gift_wrap_field', array(
    
    'type' => 'textarea',
       'label'      => __('Gift wrap instructions', 'woocommerce'),
       'placeholder'   => _x('Please enter any gift wrapping instructions. For example if you have multiple items in your order but only want 1 wrapped, or a special message to include.', 'placeholder', 'woocommerce'),
       'required'   => false,
       'class'      => array('form-row-wide'),
       'clear'     => true,
           ), $checkout->get_value( 'my_gift_wrap_field' ));
    
       echo '</div>';
    }

    I display them in the customer email like this

    add_action( "woocommerce_email_after_order_table", "my_woocommerce_email_after_order_table", 10, 1);
    
    function my_woocommerce_email_after_order_table( $order ) {
        $my_gift_wrap_checkbox = get_post_meta( $order->id, "my_gift_wrap_checkbox", true );
        $gift_wrap = $my_gift_wrap_checkbox ? 'Yes please!' : 'No thank you.';
    
        echo '<p><strong>Gift wrap?: </strong>' . $gift_wrap . '</p>';
    
        if ( $my_gift_wrap_checkbox ) {
            echo '<p><strong>Gift wrap instructions: </strong>' . get_post_meta( $order->id, "my_gift_wrap_field", true ) . '</p>';
        }
    
    }

    Oh I solved it, no need to edit the template. There is a hook for after the orders table. woocommerce_order_details_after_order_table
    I just added that action hook and ran the same function that displays the information in the email.

    here it is in case someone else is looking, with added line after UPPERCASE COMMENT…

    /**
     * Add the fields to order emails
     **/
    add_action( "woocommerce_email_after_order_table", "my_woocommerce_email_after_order_table", 10, 1);
    
    /* ADD THE SAME FUNCTION AGAIN TO RUN ON THANK YOU PAGE */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_email_after_order_table", 10, 1 );
    
    function my_woocommerce_email_after_order_table( $order ) {
        $my_gift_wrap_checkbox = get_post_meta( $order->id, "my_gift_wrap_checkbox", true );
        $gift_wrap = $my_gift_wrap_checkbox ? 'Yes please!' : 'No thank you.';
    
        echo '<p><strong>Gift wrap?: </strong>' . $gift_wrap . '</p>';
    
        if ( $my_gift_wrap_checkbox ) {
            echo '<p><strong>Gift wrap instructions: </strong>' . get_post_meta( $order->id, "my_gift_wrap_field", true ) . '</p>';
        }
    
    }

    Plugin Support Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    true I used the same code which I already solved in the other post. But this post is about how to display on the thank you page. Which it is really hard to find any docs on. So really about finding just this line. woocommerce_order_details_after_order_table

    /* ADD THE SAME FUNCTION AGAIN TO RUN ON THANK YOU PAGE */
    add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_email_after_order_table", 10, 1 );

    Hi, would you be able to help me? I am also trying to display a custom field value in the order confirmation page, in my case a gift message. I tried your code and I was able to get the gift message text field to show up, but the not the customers input. I know that I am entering in the wrong info since I’m very new to php. Basically, I’m not sure how to modify your code so the customer’s gift message shows up on the order confirmation page.

    Thanks in advance!

    I can help, I will post all of my code for displaying the field and having it appear in other locations. It is in my child theme functions.php. Do you have a child theme?
    What fields do you need to display? My code displays a checkbox for giftwrap and a input field.
    It adds it to checkout, the order (so it shows in backend orders page), the thank you page that displays after a successful order AND the thank you email the customer receives. You should be able to just copy and paste this to your child theme functions.php.
    You may or may not need the opening PHP tag on the first line or the closing one on the last line. It depends on the existing code in your functions.php.
    Let me know if you need more help.
    The complete code can be found here
    http://gasolicious.com/add-giftwrap-checkbox-instruction-field-child-theme-woocommerce/

    You may also just want to look at this plugin it adds a gift wrap option to each product, not the checkout though, I think.
    https://wordpress.org/plugins/woocommerce-product-gift-wrap/

    Thank you so much for getting back to me! I do have a functions.php and I am using a child theme. I need to display a gift message textarea field. I was able to get it to appear on the checkout page, the email and the backend orders page. I can not get it to display on the order confirmation page. So, I’m not sure how to make my code work with your checkbox code (I am that new at this). Also, I noticed that when I use autofill for the address it automatically inserts my zipcode into my custom field, do you happen to know how I can prevent that from happening?
    Also, I am so sorry if my code is not formatted properly in this post….

    /**
    * Add the gift message field to the checkout
    **/
    add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');
    
    function my_custom_checkout_field( $checkout ) {
    
    echo '<div id="my_custom_checkout_field"><h3>'.__('Gift Message').'</h3>';
    
    woocommerce_form_field( 'gift_message', array(
    'type'          => 'text',
    'class'         => array('gift_message-class form-row-wide'),
    'label'         => __('* Optional'),
    'placeholder'       => __('Add a Gift Message'),
    ), $checkout->get_value( 'gift_message' ));
    
    echo '</div>';
    
    }
    
    /**
    * Update the order meta with field value
    **/
    add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');
    
    function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ($_POST['gift_message']) update_post_meta( $order_id, 'Gift Message', esc_attr($_POST['gift_message']));
    }
    
    /* Add to Email 
    
    */
    add_filter('woocommerce_email_order_meta_keys', 'my_custom_order_meta_keys');
    
    function my_custom_order_meta_keys( $keys ) {
         $keys[] = 'Gift Message'; // This will look for a custom field called 'Tracking Code' and add it to emails
         return $keys;
    }
    
    

    I am not sure about the zip code. Wouldn’t it auto fill for each person with their zip code?
    I think the code below should work. Being New Years eve here I just got back from fireworks and am heading to bed. So may not really be able to look at this again for a day or 2 to test.
    http://pasted.co/2a43e0f0

    Sorry I just remembered something. It is a long time since I built that. You need to add one of the files from woocommerce to your child theme.
    You should make some folders in your child theme.
    First one named woocommerce
    Inside that one called checkout
    Then copy from the woocommerce plugin to the checkout folder in your child theme the file ‘thankyou.php’
    I think it is in woocommerce/templates/checkout.
    Search you will find it. Then your order confirmation page should work I THINK. As I said I can’t really test it now.

    Thank you so much for your help! I nearly fell down on my knees and wept when I saw that it worked! Do I need to add the woocommerce files if it works without them?

    Hi,
    as I said I wrote that a while ago and didn’t have time to test it before sending to you. If it works without the thankyou.php then I guess yo do not need it. Check it appears in customer confirmation emails too. If it works without it definitely leave it out.
    BUT I suspect I am using it because I added some classes to the checkbox field in the code to allow me to style it with CSS. You are not using the checkbox. Again I don’t have time to check as I need to go out and have some fun for New Year 😉

    Oh and I know that feeling when it finally works 😉 Glad I could help!

    Hey, I have another quick question. I noticed that the gift message appears on the email and thank you page even when someone doesn’t leave a gift message. Is there anyway to only make the gift message appear on the email and order detail page when someone chooses to enter a gift message? If you’re too busy, to look into this I completely understand. You have already done way more than enough and I can not begin to thank you for the help you have already given me.

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