Add Fields to Edit Order Page
First things first, if you need to display custom fields in View Order page in My Account, you need another tutorial. In this tutorial we are going to do it in WordPress admin only.
Here is what we are going to create:

To make it clear for you what custom fields do we have here is a screenshot.

Yes, order details are stored in post meta. I added the below values manually, but you can use this tutorial to add the appropriate fields to the checkout page.
Now let’s go.
Admin Order Page Hooks
“Order Details” metabox here has three locations (or columns) β General Details, Billing Details and Shipping details. And depending on where exactly you are going to display the custom fields, you need an appropriate hook for that.
woocommerce_admin_order_data_after_order_details
woocommerce_admin_order_data_after_billing_address
woocommerce_admin_order_data_after_shipping_address
Every mentioned hook accepts WC_Order
object as a function argument.
And also if your custom fields are supposed to be editable, woocommerce_process_shop_order_meta
will also be helpful.
Add Editable Fields into Order Details Metabox
Here is the complete code, you can insert it to your current theme functions.php
, all the explanation is after it.
<?php
/**
* Add Custom Fields to Edit Order Page
*
* @author Misha Rudrastyh
* @link https://rudrastyh.com/woocommerce/customize-order-details.html
*/
add_action( 'woocommerce_admin_order_data_after_order_details', 'misha_editable_order_meta_general' );
function misha_editable_order_meta_general( $order ){
?>
<br class="clear" />
<h3>Gift Order <a href="#" class="edit_address">Edit</a></h3>
<?php
/*
* get all the meta data values we need
*/
$is_gift = $order->get_meta( 'is_gift' );
$gift_wrap = $order->get_meta( 'gift_wrap' );
$gift_name = $order->get_meta( 'gift_name' );
$gift_message = $order->get_meta( 'gift_message' );
?>
<div class="address">
<p><strong>Is this a gift order?</strong><?php echo $is_gift ? 'Yes' : 'No' ?></p>
<?php
// we show the rest fields in this column only if this order is marked as a gift
if( $is_gift ) :
?>
<p><strong>Gift Wrap:</strong> <?php echo esc_html( $gift_wrap ) ?></p>
<p><strong>Recipient name:</strong> <?php echo esc_html( $gift_name ) ?></p>
<p><strong>Gift message:</strong> <?php echo wpautop( esc_html( $gift_message ) ) ?></p>
<?php
endif;
?>
</div>
<div class="edit_address">
<?php
woocommerce_wp_radio( array(
'id' => 'is_gift',
'label' => 'Is this a gift order?',
'value' => $is_gift,
'options' => array(
'' => 'No',
'1' => 'Yes'
),
'style' => 'width:16px', // required for checkboxes and radio buttons
'wrapper_class' => 'form-field-wide' // always add this class
) );
woocommerce_wp_select( array(
'id' => 'gift_wrap',
'label' => 'Gift Wrap:',
'value' => $gift_wrap,
'options' => array(
'' => 'No Wrap',
'Basic Wrap' => 'Basic Wrap',
'Magic Wrap' => 'Magic Wrap'
),
'wrapper_class' => 'form-field-wide'
) );
woocommerce_wp_text_input( array(
'id' => 'gift_name',
'label' => 'Recipient name:',
'value' => $gift_name,
'wrapper_class' => 'form-field-wide'
) );
woocommerce_wp_textarea_input( array(
'id' => 'gift_message',
'label' => 'Gift message:',
'value' => $gift_message,
'wrapper_class' => 'form-field-wide'
) );
?>
</div>
<?php
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'misha_editable_order_meta_billing' );
function misha_editable_order_meta_billing( $order ){
$contactmethod = $order->get_meta( 'contactmethod' );
?>
<div class="address">
<p<?php if( ! $contactmethod ) { echo ' class="none_set"'; } ?>>
<strong>Preferred Contact Method:</strong>
<?php echo $contactmethod ? esc_html( $contactmethod ) : 'No contact method selected.' ?>
</p>
</div>
<div class="edit_address">
<?php
woocommerce_wp_select( array(
'id' => 'contactmethod',
'label' => 'Preferred Contact Method',
'wrapper_class' => 'form-field-wide',
'value' => $contactmethod,
'description' => 'Please, contact the customer only with the method selected here.',
'options' => array(
'By Phone' => 'By Phone', // option value == option name
'By Email' => 'By Email'
)
) );
?>
</div>
<?php
}
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'misha_editable_order_meta_shipping' );
function misha_editable_order_meta_shipping( $order ){
$shippingdate = $order->get_meta( 'shippingdate' );
?>
<div class="address">
<p<?php if( empty( $shippingdate ) ) { echo ' class="none_set"'; } ?>>
<strong>Shipping date:</strong>
<?php echo ! empty( $shippingdate ) ? $shippingdate : 'Anytime.' ?>
</p>
</div>
<div class="edit_address">
<?php
woocommerce_wp_text_input( array(
'id' => 'shippingdate',
'label' => 'Shipping date',
'wrapper_class' => 'form-field-wide',
'class' => 'date-picker',
'style' => 'width:100%',
'value' => $shippingdate,
'description' => 'This is the day, when the customer would like to receive his order.'
) );
?>
</div>
<?php
}
add_action( 'woocommerce_process_shop_order_meta', 'misha_save_general_details' );
function misha_save_general_details( $order_id ){
update_post_meta( $order_id, 'is_gift', wc_clean( $_POST[ 'is_gift' ] ) );
update_post_meta( $order_id, 'gift_wrap', wc_clean( $_POST[ 'gift_wrap' ] ) );
update_post_meta( $order_id, 'gift_name', wc_clean( $_POST[ 'gift_name' ] ) );
update_post_meta( $order_id, 'gift_message', wc_sanitize_textarea( $_POST[ 'gift_message' ] ) );
update_post_meta( $order_id, 'contactmethod', wc_clean( $_POST[ 'contactmethod' ] ) );
update_post_meta( $order_id, 'shippingdate', wc_clean( $_POST[ 'shippingdate' ] ) );
// wc_clean() and wc_sanitize_textarea() are WooCommerce sanitization functions
}
- To get custom field values I used
$order->get_meta()
method, because it seems more convenient for me, but you can surely useget_post_meta()
function for that purpose. - To update the fields you can use
$order->update_meta_data()
method, but it will become more complicated thatupdate_post_meta()
function, because you have only$order_id
available, so you will need to getWC_Order
object usingwc_get_order()
function and after updating meta data it is also required to do$order->save()
. - Using WooCommerce hook
woocommerce_process_shop_order_meta
gives you some advantages in compare tosave_post
hook, because you don’t need to do nonce check, user permission check and all that stuff. - With the help of
woocommerce_admin_order_data_after_order_details
,woocommerce_admin_order_data_after_billing_address
andwoocommerce_admin_order_data_after_shipping_address
you can add not only fields but any HTML. But in order to add fields we are using WooCommerce functions βwoocommerce_wp_text_input()
,woocommerce_wp_textarea_input()
,woocommerce_wp_checkbox()
andwoocommerce_wp_radio()
. - What I also would like to highlight is that if you add a link with
edit_address
class and two containers withaddress
andedit_address
classes, then, when you click the link, theaddress
container becomes hidden, but theedit_address
becomes visible. - Creating a datepicker field is also super simple in WooCommerce admin. All you need is to pass
date-picker
class to thewoocommerce_wp_text_input()
function.

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Thanks for sharing the code with us.
How to change billing city textbox field to selectbox field?
You’re welcome!
With the code like this:
Dear Misha,
Thank you for your sharing.
I tried to edit these code to meet my demand.
However, I am not sure what happened. It cannot work.
It can be edited, but it cannot be updated after pressing update button.
Hey,
Maybe because your forgot about part of the code? What about
woocommerce_process_shop_order_meta
action hook?Hi,
Thank you for your reply.
I solved the problem. I found I forgot to save the order meta.
By the way, I think these codes are very useful. A lot of plugins have functions to modify checkout fields, but I cannot find any plugin has function to revise order in admin order detail.
U are the best men!
Hi there,
This is one of the most usefull tutorials about Woocommerce I have ever seen. well done.
I want to hide the order date, date picker, and the time, under General details section. What code should I use?
Thank you in advance.
Hey Amin,
Thank you!
There are no hooks to do it, so the only way is CSS π
Thank you for your reply.
Actually my problem is a third party plugin, which changes the gregorian date to Jalali calendar, which is a Persian calendar. For example, 2017 in Gregorian calendar, is similar to 1396 in Jalali. By this change, when we try to update an order, woocommerce thinks this is the 14th century at 1396 in Gregorian! So the order goes to the latest position of orders.
Neither wc devs nor Jalali plugin devs could solve this.
So css is not my solution. I wanted to completely disable order date section, so no change in order date could be happen.
Wow, such a detailed problem explanation! In this case there would be two steps:
1. Hide with CSS
2. Use this hook:
Thanks Misha,
But it stills says “Please match the requested format”
I think this is because of that digits are in Persian charachters.
Could you attach a screenshot?
I’m not a code man :-( but I will search for the javascript thing you said.
Thank you :-)
New NEWS!
I changed the Jalali plugin settings to use English charachters in dates.
Now (with this code) when I hit the update order button, there is no “please match the requested format” notice, but the date and time changes to todate after updating the order! For example if an order was at 3 days ago, now it becomes right away in time and date.
“Dear Misha, please let me know if I should not disqus this problem here”
And what happens if you don’t use my latest code?
The order date changes to something irregular date and time.
Is there a way with that plugin to convert your date format to regular date format on
save_post
action?Hey Misha, thank your for sharing all the code.
Maybe you can help me out.
I need to put the order number above the name in shipping details on order details page.
:-) Thanks in advance
Hi Misha,
I wanted to know whether there is an easy way of creating this that is through a plugin. I am not a php guy so having trouble with the codes.
Hi Ibrahim,
Sorry, I don’t know a plugin for this.
I got it actually :p Advanced Custom field.
Ahaha π I know it! But I wasn’t sure that it is possible to hook order details with it.
Hi Misha,
Thanks for sharing the code.
I was wondering if you can give me a way to have a input box with validation by numbers and with save/modify button for “View Order/Oder Confirmation/Thank You templates.
What I am wanting is not only allow editing on admin side but also allowing users to edit that field for specific order. They will see a input box number validate before Order Table. They types in and click saves and meta value stored for that order id. Which can be also edited from admin order view.
Thanks in advance.
Hello Misha,
I am following your advices with great interest. Now, i have the courage to ask you something that bothers me since forever.
On my website the customer places the order and then he sees the Thank You Page. On this thank you page i want to ask for some more details about the order.
Can it be done? Like, after the order is placed? And these details to be seen inside Admin placed order?
Something like update metaboxes in the thank you page!?
Thanks again and keep it going!
Hi Perusi,
I began to write an anwer for you in comments but decided that is is better to create an awesome tutorial about this topic. I will publish it next Tuesday. I hope it is ok.
Misha you are great!
First i was hoping for an idea, but frankly being a newbie i was searchin for a step by step guide.
Now, you saying that you will make a tutorial…
Wow!!!
A lot of thanks!!!
Best of wishes!!!!!
I’m glad to help! π
Hi,
Here it is!
Hi Dear,
I’m creating custom fields in product page.
I implemented and save the data in post meta now I want to display and store, that data on edit product page on dashboard, in order_meta table.
How to do that?
Hi,
You can check this tutorial.
P.S. Sorry, I removed your code because in the tutorial it is described absolutely the same
Thanks for your revert.
I saw that tutorial but I guess my problem is quite different.
Actually I want to show custom fields values in edit order section under dashboard which I’ve created in product_data_section under edit product.
Hi Misha Amazing post.
Keep it up. I have one questions.
How to rename the label for shipping to a different name i.e Delivery ?
And also TAX to VAT ?
Hi,
Thank you! π
I’m afraid the only way to do it is with the help of
gettext
filter. Example:Hello i have 2 question related to order in dashboard
1) how to remove billing city field in order billing form
2) how to unset one of the payment method options in order billing form ?
thanks in advance
i found solution for the first question
now i need answer to the second one thanks :))
Hello Rowan :)
In your WooCommerce settings you can navigate to the Payments tab and unset it there, if you need to do it with code, check this tutorial and this comment.
I created a dropdown select in General Details to set an order’s “origin” in order to differentiate them by “Manual” (backend-made orders), “Web” (frontend-made orders), and “Phone” (orders made over the phone). How can I set “Manual” as the default selected value?
My code is as follows:
Thank you for the helpful guide, it’s the best one I found so far!
Hey,
Hi Misha, that works perfectly.
Thank you so much for being so helpful. Really enjoying learning from this guide and doing it myself. Cheers!
I’m glad to help π
Hi Misha, it’s been a while since I figured out how to add my custom field of “Origin” with your help.
I recently noticed if I re-edit an order that has a different value (“Web” or “Phone”), they get changed to “Manual” without me actually changing the Origin type using the dropdown selection. I removed your code from above, but it still occurs.
How can I ensure the Origin custom field keeps the previously selected value unless I explicitly changes it using the dropdown selection? Or do I have to remember to set the correct value every time I edit an order?
Any insight into this would be greatly appreciated. Thank you so much Misha!
Hey,
I’m afraid I can not help with this in comments. Please send me your admin + SFTP details by email.
Great article. Any clue if there are any WordPress form builder plugins that could be used to display a custom form on New Order page in backend. I would use your approach if I just needed to collect basic text or simple selection options (i.e. checkbook, radio box, etc.) I am looking to add a bunch of fields and inputs to the New Order for that would allow for price transformation of order subtotal using calculated fields. Any help is greatly appreciated.
Hey Ronny,
What type of field do you need? Maybe I could create this plugin for you.
The fields that need to be added can be seen at the following url: http://metakraftlabs.net/woo/configure-quote/
The fields in Step 1 of this form are not a problem. My challenge is with implementing Step 2, 3 and 4. Step 2 is the most important. It’s a leasing calculator that transforms the cart/order total into a monthly payment amount. I’m interested in finding the right developer to help with customizations on this project and would welcome the opportunity to discuss further with you offline.
hello how would i make it show on the frontend of it? great post very helpful on it but i want to show it on the frontend so the clients can edit it. i cant show it.
thanks!
Hi,
Do you mean “My account > Orders > View Order” page?
hey misha, great post!! Love it man!! I just need one more help.
I have created certain custom fields under (My Account >> Address >> Billing Address) and it is perfectly displaying on Checkout page but the fields are not displaying under (WordPress Dashboard >> Woocommerce >> Order >> Order Details >> Full Billing Details (Pencil Icon).)
Hey Taher,
you’re welcome π
I think you’ve made something incorrectly, please double check my tutorial!
Hi,
it possible to load customized fields created in new orders? I’ve seen that you use the woocommerce_json_search_customers function to look up user data, but custom fields are not loaded.
Can you help me?
Best regards from Italy
Hi Cesare,
I need more details.
A great Post. Is it possbile to add TIME to the shipping time please.
Warm regards
Hey Josef,
Do you mean two fields with hours and minutes? I think you can just add a simple textarea field for this purpose :)
Yes, but a dropdown option will be more convinience and faster. is it possbile to add a simple code the theme Functions please?
Warm regards
Hi Misha,
Is this compatible with the WooCommerce Checkout Field editor plugin?
Thanks.
Hi Eda,
I didn’t have a chance to use this plugin.
Hi Misha,
Thanks for notifying! :) I have used your snippet in another work-around with ACF PRO. I’ve implemented it such that extra user-related fields are seen in the meta box, as well as in the profile edit screen.
All appears fine, however I can’t help but notice that I can edit those fields in the order meta box fine as admin, but when I try this in the profile edit screen, the update function does not seem to work.
Would you have any idea why this would occur? Your insights would be much appreciated!
Hello Misha,
Is it possible to add a custom field that applies a fee to the order from this admin order page? I know you can have fields that set and save to the order meta, but I’m not sure about adding fees and haven’t found any online article about it.
I keep returning to your articles because of how helpful they are with customizing WooCommerce. Very glad there’s such a resource available which has helped me many times. Thanks!
Hi
Fantastic tutorial – thanks.
Just need to update your
$order->id
to$order->get_id()
.Thanks again
Kind Regards
Hey Pete,
You’re right, thank you for your comment! I’ve just updated it in the tutorial.
Hi Misha,
I just noticed in Woocommerce admin billing and shipping fields the order is different for US, Europe and Asian countries. Do you maybe know how to change the order to always display Western adress order?
Thanks in advance!
Hi Misha,
Thanks for this – very helpful!
Hi Misha
How can I send these custom data to customer through order emails? And how can I show them in the Order Detail in Customer My Account?
Thank you.
Hi,
Here is a guide about it, and another guide related to your second question ;)
Hey thanks for your content –
a question – are you aware if there’s also a date-time-picker that could be easily added to a field?
Thank!