A Simple Way to List WooCommerce Orders in the Front End

Published on: Updated: October 5, 2018

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, a WordPress table plugin. It displays orders in a responsive table for front end WooCommerce inventory management. This is the complete guide on how to display WooCommerce orders in the front end using Posts Table Pro.

Posts Table Pro

Start listing WooCommerce orders on the front end of your WordPress site.

GET THE PLUGIN

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.

I’m going to tell you how to list all WooCommerce orders in the front end, and how to show orders for a specific customer only.

Let’s get started!

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
  • Transaction 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 short code 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 orders for WooCommerce inventory management. 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.

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.

WordPress plugin customizations service

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. This is where the plugin comes in useful for front end WooCommerce inventory management.

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 Woo ‘My Account’ page in 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.

Can customers see a list of their own orders?

So far, I’ve shown how you to list ALL orders from WooCommerce in the WordPress front end for WooCommerce inventory management. But what if you want to show orders for the current user only? For example, if you’re running a multi-vendor site then you might want each vendor to view a table or report of their own orders.

  1. Add a hidden page for each customer and password protect it.
  2. Create a custom taxonomy called ‘Customer’ or similar, and use it to tag each order with the correct customer’s username or ID.
  3. Use Posts Table Pro to list the customer’s orders on the page. Use the term option to list orders for that customer only. For example, this shortcode will list completed orders that are tagged with ‘user1’ in the ‘customer’ taxonomy:
    [posts_table post_type="shop_order" columns="id,date,cf:_order_total" post_status="Wc-completed" links="none" term="customer:user1"]
  4. Send the customer a link to their page, along with the password.
  5. Repeat steps 1-4 for all the customers who need to see their own orders in the WP front end.

Over to you!

By now, you have all the information you need to list WooCommerce orders for front end WooCommerce inventory management.  Get the WordPress table plugin, Posts Table Pro, and set it up today!

Posts Table Pro

Start listing WooCommerce orders on the front end of your WordPress site.

GET THE PLUGIN

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.

Filed under: Posts Table Pro, WordPress Plugins ,