How to Easily Retrieve WooCommerce Order Details on a Custom Page
As an ecommerce store owner using WooCommerce, being able to access and display order details is crucial for providing excellent customer service and gaining valuable insights into your business. However, sometimes the default WooCommerce order page may not be enough, and you may need to create a custom page to showcase order information.
In this article, we'll walk you through a step-by-step process to retrieve WooCommerce order details and display them on a custom page using a simple form and a WordPress shortcode.
Why Customize the Order Details Page?
There are several reasons why you might want to create a custom page to display WooCommerce order details:
-
Improved User Experience: The default WooCommerce order page can be overwhelming and cluttered, especially for customers who need to quickly access their order information. By creating a custom page, you can present the order details in a more user-friendly and intuitive way.
-
Additional Functionality: A custom order details page allows you to add extra features, such as the ability to track the order status, view shipping information, or even initiate a refund or exchange.
-
Better Data Presentation: With a custom page, you can choose how to organize and present the order data, making it easier for you and your customers to find the information they need.
-
Branding and Customization: By creating a custom page, you can ensure that the order details section of your website aligns with your brand's design and messaging.
Step 1: Create the Order Details Function
To retrieve the order details, we'll use a custom function that accesses the WooCommerce order meta data. Add the following code to your theme's functions.php
file:
function display_order_details() {
// Exit if Order number not submitted
if ( ! isset( $_POST['order_number'] ) )
return; // Exit
if( $_POST['order_number'] > 0 )
$order_id = sanitize_text_field( $_POST['order_number'] );
else
return; // Exit
echo '<h3>THE ORDER META DATA (Using the array syntax notation):</h3>
<p>';
$billing_first_name = get_post_meta( $order_id, '_billing_first_name', true );
if( ! empty( $billing_first_name ) )
echo 'Billing first name: ' . $billing_first_name . '<br>';
$billing_last_name = get_post_meta( $order_id, '_billing_last_name', true );
if( ! empty( $billing_last_name ) )
echo 'Billing last name: ' . $billing_last_name . '<br>';
$billing_address_index = get_post_meta( $order_id, '_billing_address_index', true );
if( ! empty( $billing_address_index ) )
echo 'Billing details: ' . $billing_address_index . '<br>';
$shipping_address_index = get_post_meta( $order_id, '_shipping_address_index', true );
if( ! empty( $shipping_address_index ) )
echo 'Shipping details: ' . $shipping_address_index;
echo '</p><br>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br><br>';
}
This function first checks if an order number has been submitted via a form. If it has, the function retrieves the order details using the get_post_meta()
function and displays them on the page.
Step 2: Create the Order Details Form and Shortcode
Next, we'll create a shortcode that displays a form for the customer to enter the order number, and then calls the display_order_details()
function to output the order information.
Add the following code to your functions.php
file:
add_shortcode( 'order_details', 'form_get_order_details' );
function form_get_order_details(){
ob_start(); // Buffering data
?>
<form action="" method="post">
<label for="order_number">Order number</label><br>
<input type="text" name="order_number" size="30"><br><br>
<input type="submit" id="submit" value="Find and output"><br>
</form>
<?php
display_order_details();
return ob_get_clean(); // Output data from buffer
}
This code creates a shortcode called [order_details]
that displays a simple form for the customer to enter the order number. When the form is submitted, the display_order_details()
function is called to retrieve and display the order details.
Using the Order Details Shortcode
To use the order details shortcode, you can simply add it to any page or post in your WordPress website. For example, you can add the following code to a new page:
[order_details]
When a customer visits this page and enters their order number in the form, the order details will be displayed on the page.
Alternatively, you can also use the shortcode in a PHP file by using the do_shortcode()
function:
echo do_shortcode("[order_details]");
Customizing the Order Details Display
The display_order_details()
function in the example code retrieves and displays only a few basic order details, such as the billing and shipping information. You can customize this function to retrieve and display any other order-related information that you need, such as:
- Order items and quantities
- Order total and payment method
- Shipping method and tracking information
- Order status and notes
- Customer details (email, phone, etc.)
To do this, simply add more get_post_meta()
calls to the function and format the output as desired.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Conclusion
In this article, we've shown you how to easily retrieve and display WooCommerce order details on a custom page using a simple form and a WordPress shortcode. By creating a custom order details page, you can improve the user experience, add extra functionality, and better align the order details section with your brand.
Remember, the example code provided can be further customized to suit your specific needs, so feel free to experiment and enhance the order details display as needed. And if you're looking for a more comprehensive solution to optimize your website's conversion rates, be sure to check out Flowpoint.ai, which can help you identify and fix technical issues that may be impacting your store's performance.