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 of WC_Order class to get the ID of an order.
• get_post_meta() is still my favourite function to work with metadata but consider using get_meta() of WC_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.

# WooCommerce

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

Follow me on Twitter