How to Add Custom Fields to Order Details Page
In this tutorial I am going to talk about customers order details page, that is located in My Account > Orders > View Order. In case you are looking for a solution how to add custom fields to edit order page in WordPress admin, there is a separate tutorial for that.
Order Details Page Hooks
Displaying the custom fields in customers order details page is quite simple, as all the other WooCommerce pages, it is well customizable with hooks.
And we have plenty of hooks here:
woocommerce_order_details_before_order_table
– before “Order Details” table.woocommerce_order_details_before_order_table_items
– before products in “Order details” table, just after the opening<tbody>
tag.woocommerce_order_details_after_order_table_items
– after products in “Order details” table, just before the closing</tbody>
tag.woocommerce_order_details_after_order_table
– after “Order Details” table, before closing</section>
tag.woocommerce_after_order_details
– after “Order Details” table, after closing</section>
tag.woocommerce_order_details_after_customer_details
– after customer billing and shipping addresses part.
All the mentioned hooks has WC_Order
object available inside of them as the only argument. There is also woocommerce_view_order
action hook at the very bottom of the page and it accepts only $order_id
, but I don’t think that we really need because we have a lot of hooks for all occasions anyway.
Example 1. Add Fields Inside “Order Details” Table
Let’s say that we have a couple of order custom fields, it may be a “Preferable contact method” and “Preferable shipping date” for example. We can add both of them at the very beginning of the “View order” page.
Here I am going to use woocommerce_order_details_after_order_table_items
. This hook allows us to display our information just like that:

Below is the ready code that you can insert to your current theme functions.php
file or to a custom plugin if you wish. But in some cases do not forget to remove opening <?php
tag.
<?php
/**
* Add Fields Inside “Order Details” Table
*
* @author Misha Rudrastyh
* @link https://rudrastyh.com/woocommerce/add-info-view-order-thank-you-pages.html#example-1
*/
add_action( 'woocommerce_order_details_after_order_table_items', 'misha_order_details' );
function misha_order_details( $order ) {
$contact_method = get_post_meta( $order->get_id(), 'contactmethod', true );
$shippingdate = get_post_meta( $order->get_id(), 'shippingdate', true );
if( $contact_method ) :
?>
<tr>
<th scope="row">Preferable contact method:</th>
<td><?php echo esc_html( $contact_method ) ?></td>
</tr>
<?php
endif;
if( $shippingdate ) :
?>
<tr>
<th scope="row">Shipping date:</th>
<td><?php echo date( 'F jS, Y', strtotime( $shippingdate ) ) ?></td>
</tr>
<?php
endif;
}
In this code:
- I used
get_id()
method ofWC_Order
class to get the ID of an order. get_post_meta()
is still my favourite function to work with metadata but consider usingget_meta()
ofWC_Order
class, example$order->get_meta( 'shippingdate' )
.- Never forget about escaping, so I used
esc_html()
for that.
Example 2. Add Fields After Customer Addresses
Let’s add a little bit more order meta information right now.

The code for that.
<?php
/**
* Add Fields After Customer Addresses
*
* @author Misha Rudrastyh
* @link https://rudrastyh.com/woocommerce/add-info-view-order-thank-you-pages.html#example-2
*/
add_action( 'woocommerce_order_details_after_customer_details', 'misha_after_customer' );
function misha_after_customer( $order ){
$is_gift = $order->get_meta( 'is_gift' );
?>
<h2>Gift Order</h2>
<table class="woocommerce-table shop_table gift_info">
<tbody>
<tr>
<th>Is gift?</th>
<td><?php echo $is_gift ? 'Yes' : 'No'; ?></td>
</tr>
<?php if( $is_gift ) : ?>
<tr>
<th>Gift Wrap</th>
<td><?php echo esc_html( $order->get_meta( 'gift_wrap' ) ); ?></td>
</tr>
<tr>
<th>Recipient name</th>
<td><?php echo esc_html( $order->get_meta( 'gift_name' ) ); ?></td>
</tr>
<tr>
<th>Gift message</th>
<td><?php echo wpautop( esc_html( $order->get_meta( 'gift_message' ) ) ); ?></td>
</tr>
<?php endif; ?>
</tbody>
</table>
<?php
}
This custom information can also be added to the thank you page, and to WooCommerce emails.

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
Hi,
I Have read your tutorial about ” Additional Order Details on the “View Order” and “Thank You” Pages'” and I would like to do it with the billing address and shipping address on the ‘woocommerce_checkout_before_order_review’ ( I’m using a multistep checkout plugin).
I can display the title but not the address meta data. Do you know how to call the meta data (like : billing_first_name, billing_last_name, …) in this page ? I have try with the “order-details-customer” but it didn’t worked…
Hi, try this
print_r( WC()->customer );
Thank you so much :)