This Is How You Can Display All WooCommerce Orders Under the My Account Page
As an ecommerce business owner using WooCommerce, one of the most common requests from your customers is the ability to view all their past orders on the "My Account" page. However, implementing this feature is not as straightforward as it may seem, and you may have struggled to find a satisfactory solution online.
In this article, we'll dive deep into the steps required to display all WooCommerce orders on the My Account page, even if there's no accepted answer related to this issue on WordPress forums.
Why Displaying All Orders Matters
Providing customers with easy access to their order history is crucial for several reasons:
-
Improved Customer Experience: By allowing customers to view their past purchases, you're enhancing their overall experience with your brand. This builds trust and loyalty, as they can easily reference their order details whenever needed.
-
Increased Customer Support: When customers can access their order information, it reduces the number of support inquiries you'll receive, as they can self-serve and find the details they need.
-
Better Order Management: From your perspective as a business owner, having all orders displayed on the My Account page makes it easier for you to manage and track customer orders.
Despite the clear benefits, many WooCommerce store owners struggle to implement this functionality, often because the default My Account page doesn't include an "Orders" section that lists all past purchases.
Step 1: Understanding the WooCommerce My Account Page
The My Account page in WooCommerce is a powerful feature that allows customers to manage their account details, view their order history, and perform other account-related actions. By default, the My Account page includes the following sections:
- Dashboard: An overview of the customer's account details and recent orders.
- Orders: A list of the customer's past orders.
- Downloads: A list of any downloadable products the customer has purchased.
- Addresses: The customer's billing and shipping addresses.
- Account Details: The customer's account information, such as their name, email, and password.
The problem arises when you want to display all of the customer's orders on the My Account page, as the default "Orders" section only shows the most recent orders.
Step 2: Customizing the My Account Page
To display all WooCommerce orders on the My Account page, you'll need to customize the default functionality. Here's how you can do it:
-
Create a Custom My Account Page Template: In your WordPress theme, create a new file called my-account.php
in the woocommerce
folder. This will override the default My Account page template and allow you to customize its content.
-
Retrieve All Orders for the Current User: Inside the my-account.php
file, you'll need to retrieve all the orders for the current user. You can do this by using the WC_Order_Query
class provided by WooCommerce. Add the following code to your my-account.php
file:
<?php
global $wp_query;
$customer_orders = get_posts(array(
'numberposts' => -1,
'meta_key' => '_customer_user',
'meta_value' => get_current_user_id(),
'post_type' => 'shop_order',
'post_status' => 'any'
));
?>
This code retrieves all orders (regardless of their status) for the current user, using the get_posts()
function.
- Display the Orders: Now that you have the list of orders, you can display them on the My Account page. You can use a loop to iterate through the orders and display the relevant information, such as the order number, date, status, and total. Add the following code to your
my-account.php
file:
<?php if ( $customer_orders ) : ?>
<h2>Your Orders</h2>
<table class="shop_table shop_table_responsive my_account_orders">
<thead>
<tr>
<th class="order-number"><span class="nobr"><?php esc_html_e( 'Order', 'woocommerce' ); ?></span></th>
<th class="order-date"><span class="nobr"><?php esc_html_e( 'Date', 'woocommerce' ); ?></span></th>
<th class="order-status"><span class="nobr"><?php esc_html_e( 'Status', 'woocommerce' ); ?></span></th>
<th class="order-total"><span class="nobr"><?php esc_html_e( 'Total', 'woocommerce' ); ?></span></th>
<th class="order-actions"> </th>
</tr>
</thead>
<tbody>
<?php foreach ( $customer_orders as $customer_order ) :
$order = wc_get_order( $customer_order );
$item_count = $order->get_item_count();
?>
<tr class="order">
<td class="order-number" data-title="<?php esc_attr_e( 'Order Number', 'woocommerce' ); ?>">
<a href="<?php echo esc_url( $order->get_view_order_url() ); ?>">
<?php echo esc_html( $order->get_order_number() ); ?>
</a>
</td>
<td class="order-date" data-title="<?php esc_attr_e( 'Date', 'woocommerce' ); ?>">
<time datetime="<?php echo esc_attr( $order->get_date_created()->date( 'c' ) ); ?>">
<?php echo esc_html( $order->get_date_created()->date_i18n( get_option( 'date_format' ) ) ); ?>
</time>
</td>
<td class="order-status" data-title="<?php esc_attr_e( 'Status', 'woocommerce' ); ?>" style="text-align:left; white-space:nowrap;">
<?php echo esc_html( wc_get_order_status_name( $order->get_status() ) ); ?>
</td>
<td class="order-total" data-title="<?php esc_attr_e( 'Total', 'woocommerce' ); ?>">
<?php echo wp_kses_post( $order->get_formatted_order_total() ); ?>
</td>
<td class="order-actions" data-title="<?php esc_attr_e( 'Actions', 'woocommerce' ); ?>">
<?php
$actions = wc_get_account_orders_actions( $order );
if ( ! empty( $actions ) ) {
foreach ( $actions as $key => $action ) {
echo '<a href="' . esc_url( $action['url'] ) . '" class="woocommerce-button button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
}
}
?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else : ?>
<div class="woocommerce-Message woocommerce-Message--info woocommerce-info">
<a class="woocommerce-Button button" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>">
<?php esc_html_e( 'Go shop', 'woocommerce' ); ?>
</a>
<?php esc_html_e( 'No order has been made yet.', 'woocommerce' ); ?>
</div>
<?php endif; ?>
This code creates a table that displays the order number, date, status, total, and actions for each order. If the customer hasn't placed any orders yet, it displays a message prompting them to start shopping.
- Enqueue the Necessary CSS: To ensure the table is styled correctly, you'll need to enqueue the necessary CSS files. Add the following code to your
functions.php
file:
function my_account_enqueue_styles() {
wp_enqueue_style( 'woocommerce-account-my-orders', WC()->plugin_url() . '/assets/css/account/my-account.css', array(), WC_VERSION );
}
add_action( 'wp_enqueue_scripts', 'my_account_enqueue_styles' );
This code enqueues the woocommerce-account-my-orders
CSS file, which is used to style the orders table on the My Account page.
Now, when customers visit the My Account page, they will see a table displaying all their past orders, regardless of their status.
Customizing the Order Display
The code we've provided so far will display all the orders, but you may want to further customize the information shown. Here are a few additional steps you can take:
-
Add Custom Order Information: If you want to display additional order details, such as the order item names, quantities, or any custom order meta, you can modify the code within the loop that displays the orders.
-
Enhance the Order Actions: The default order actions (such as "View" and "Pay") can be customized or expanded to include additional actions, such as "Reorder" or "Leave a Review".
-
Implement Pagination: If a customer has a large number of orders, you may want to implement pagination to improve the user experience and prevent the page from becoming too long.
-
Add Sorting and Filtering Options: Allow customers to sort their orders by date, status, or total, and filter them based on specific criteria, such as order status or a date range.
-
Integrate with Other WooCommerce Extensions: If you're using additional WooCommerce extensions, such as Subscriptions or Memberships, you may need to modify the code to display orders from those extensions as well.
By following these steps, you can create a fully customized My Account page that displays all of your customers' WooCommerce orders in a user-friendly and informative manner.
Conclusion
Displaying all WooCommerce orders on the My Account page is an essential feature for providing a great customer experience. While the default WooCommerce functionality may not meet your needs, the steps outlined in this article will help you create a custom solution that meets the unique requirements of your online store.
Remember, the key to a successful implementation is understanding the underlying WooCommerce order management system and tailoring the display to your customers' needs. By taking the time to implement this feature, you'll not only improve customer satisfaction but also streamline your own order management processes.
If you're looking for a more comprehensive solution to optimize your website's conversion rates, be sure to check out Flowpoint.ai, a web analytics platform that uses AI to identify technical, UX, and content-related issues that are impacting your site's performance
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.