A Simple Way to List WooCommerce Orders in the Front End

List WooCommerce Orders Front End

If you need to list WooCommerce orders on the front end of your website then you can do this with our Posts Table Pro plugin. It displays orders in a responsive table on any WordPress page. This is the complete guide on how to display WooCommerce orders in the front end using Posts Table Pro.

GET POSTS TABLE PRO

What is Posts Table Pro?

Posts Table Pro is a popular WordPress table plugin developed and supported by us at Barn2 Media. It lists any type of WordPress content in a structured HTML table. This includes pages, posts, custom post types, and – you guessed it! – WooCommerce orders!

The plugin is very flexible and comes with dozens of options. You can choose which columns of order data to include in the table, how the table is sorted, and much more.

Please note that we have another plugin called WooCommerce Product Table. This lists normal WooCommerce products in a table. Surprisingly, this is NOT the right plugin to list WooCommerce orders in the front end. WooCommerce orders aren’t products – they’re a separate custom post type. This means that you need to list them using our Posts Table Pro plugin.

How to list WooCommerce orders in a table on the front end

Follow these steps to create an instant table of WooCommerce orders:

  1. Buy Posts Table Pro.
  2. Install the plugin and activate your license key. (You’ll receive instructions for this in your confirmation email.)
  3. Go to the page where you want to list WooCommerce orders in the front end. Add the following shortcode:
[posts_table post_type="shop_order" columns="id:Order ID,date,cf:_shipping_first_name:First Name,cf:_shipping_last_name:Last Name,cf:_shipping_address_1:Address 1,cf:_shipping_city:City,cf:_shipping_postcode:Postcode,cf:_billing_phone:Phone,cf:_order_total:Total ($)" post_status="any" links="none"]

This will create a table of WooCommerce orders that looks like this:

List WooCommerce Orders Plugin

I’ve added some commonly used columns to get you started. These include the order ID, date, name, shipping address, phone number and total order cost.

A few notes on creating your own table of WooCommerce orders:

  • You must include the status= option in the shortcode, otherwise no orders will show in the table.
  • It’s also essential to set columns using the columns= option. If you don’t, then the default columns will be used, which are designed for displaying posts rather than orders.

Keep reading to learn how to customize the list of WooCommerce orders and change what information is displayed.

What else can I list in the table of WooCommerce orders?

The example includes some sample columns, but you don’t have to use these. There are lots of possible columns that you can include in the table of WooCommerce orders. Feel free to add whichever you need. Simply add them to the comma separated list in the ‘columns’ section of the Posts Table Pro shortcode (see above).

Standard order fields

The ‘shop_order’ post type in WooCommerce comes with some built-in fields containing your order data. These are stored in the wp_posts database table:

  • Order ID (this is the ID number for the order in the WordPress database) – id
  • Order date – date
  • Post status (e.g. Completed or Processing) – post_status

Order meta fields

In addition, you can add columns in the table for any of the custom fields associated with WooCommerce orders. These are stored in the wp_postmeta database table and here’s a list of them all. You need to add cf: before each one to display them in the table of orders, so I have added this before each one for you:

  • Customer IP address – cf:_customer_ip_address
  • Customer’s browser and operating system – cf:_customer_user_agent
  • How the order was created (this will normally say ‘checkout’ – cf:_created_via
  • Billing details:
    • Complete billing information (lists the name, address etc. in a single column of the table) – cf:_billing_address_index
    • Billing first name – cf:_billing_first_name
    • Billing last name – cf:_billing_last_name
    • Billing company name – cf:_billing_company
    • Billing email address – cf:_billing_email
    • Billing phone number – cf:_billing_phone
    • Billing country – cf:_billing_country
    • Billing address line 1 – cf:_billing_address_1
    • Billing address line 2 – cf:_billing_address_2
    • Billing city – cf:_billing_city
    • Billing state – cf:_billing_state
    • Billing postcode – cf:_billing_postcode
  • Shipping details (if different from billing details):
    • Complete shipping information (lists the name, address etc. in a single column of the table) – cf:_shipping_address_index
    • Shipping first name – cf:_shipping_first_name
    • Shipping last name – cf:_shipping_last_name
    • Shipping company name – cf:_shipping_company
    • Shipping country – cf:_shipping_country
    • Shipping address line 1 – cf:_shipping_address_1
    • Shipping address line 2 – cf:_shipping_address_1
    • Shipping city – cf:_shipping_city
    • Shipping state – cf:_shipping_state
    • Shipping postcode – cf:_shipping_postcode
  • Order payment data:
    • Currency – cf:_order_currency
    • Do prices include tax? – cf:_prices_include_tax
    • Payment method code – cf:_payment_method
    • Payment method name – cf:_payment_method_title
    • Total order cost – cf:_order_total
    • Shipping cost – cf:_order_shipping
    • Total discount – cf:_cart_discount
    • Payment date – cf:_date_paid
    • Payment date (user-friendly format) – cf:_paid_date
  • Tax information:
    • Total tax – cf:_order_tax
    • Shipping tax – cf:_order_shipping_tax
    • Tax discount – cf:_cart_discount_tax
  • Transation ID (e.g. if you’re using PayPal) – cf:_transaction_id
  • Order status data:
    • Date the order was marked as complete – cf:_date_completed
    • Date the order was marked as complete (user-friendly format) – cf:_completed_date

Note: This will also be useful if you’re looking for a list of database fields for WooCommerce orders. I couldn’t find a list of these fields anywhere else online, so I went through the WordPress database and figured it out myself. If you’re using these order field names for another purpose, remove the cf: from the beginning as this is only used to display them using the Posts Table Pro WordPress table plugin. The actual name for the custom fields begins with an underscore ( _ ) and doesn’t include cf:.

List WooCommerce orders based on their status

In the shortcode above, I showed you how to list all orders regardless of status. If you prefer, you can set the table to display orders with a specific status only. Simply replace any with the appropriate status:

  • Completed orders – Wc-completed
  • Orders pending payment – Wc-pending
  • Payment processing – Wc-processing
  • On hold orders – Wc-on-hold
  • Cancelled orders – Wc-cancelled
  • Refunded orders – Wc-refunded
  • Failed payment – Wc-failed

For example: [posts_table post_type="shop_order" columns="id,date,cf:_order_total" post_status="Wc-completed" links="none"]

Other options to customize your list of WooCommerce orders

As I mentioned earlier, Posts Table Pro comes with dozens of options for customizing the display of your WooCommerce orders. As well as choosing your columns, you can control the default sort order, show or hide elements such as the search box, and much more.

You may have noticed that I customized some of the column names in the example shortcode above. Here’s a direct link to how you can do this yourself, for any of the table columns.

You can read about all the options in the plugin knowledge base.

You may have noticed that I added links="none" to my shortcode to list WooCommerce orders. This is because by default, Posts Table Pro will add a broken link to the Order ID column. The reason the link is broken is because it’s pointing to a front end page for the WooCommerce order, which doesn’t exist. As a result, I have shown you how to disable all links in the table of WooCommerce orders.

If you really wanted to link the ID column to the ‘Edit Order’ page in the WordPress admin, then you could write some custom code to achieve this. If you don’t know how to do this, then I recommend posting a job on Codeable to find a suitable WordPress expert.

Can I list the products for each order?

Unfortunately not, because WooCommerce doesn’t store this in the WordPress database in a way that Posts Table Pro can display. You will need to view the individual order in the WordPress admin to access the list of products.

Here’s a quick tip on the fastest way to do this:

  1. Copy the Order ID from the list of WooCommerce orders.
  2. Go to [your-domain]/wp-admin/post.php?post=12345&action=edit – replacing 12345 with the Order ID that you wish to look up.

This will take you straight to the Edit Order screen, which includes a list of products ordered.

Don’t forget customer confidentiality!

List WooCommerce orders securelyThe reason WooCommerce doesn’t come with a built-in option to display orders in the front end is because this information is normally confidential.

However, there are some situations where it’s appropriate to list WooCommerce orders on the front end. For example, you might want to create a hidden page for delivery drivers to see, without giving them access to the WordPress admin. You might want to do the same for your administrative or finance staff.

Whatever your reason for displaying WooCommerce orders in the front end, make sure you add the appropriate security measures to protect customer data.

As a minimum, this should include using an SSL certificate, and hiding the list of orders on a password protected page or other hidden area. Your list of WooCommerce order data should only be available to people who really need access to it.

Can customers see a front end list of their own orders?

Yes, and you don’t need any extra plugins to do this. The My Account page in WooCommerce already includes a list of orders, so customers just need to login and view their past orders. There’s also a shortcode for this, which you can add anywhere customers are logged into their account: [my_orders]

But if you want to list all WooCommerce orders in the front end, then you’ll need Posts Table Pro for this.

Over to you!

By now, you have all the information you need to list WooCommerce orders on the front end of your website. Get Posts Table Pro, and set it up today!

GET POSTS TABLE PRO

I’d love to hear how you are using lists of WooCommerce orders on the front end of your website. What information do you include? What do you use it for? How have you made sure your customer data is safe? Please leave your comments below.