A Simple Way to List WooCommerce Orders in the Front End

By Updated: October 28, 2019 29

 

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.

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 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 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.

Need professional assistance?
We've partnered with Codeable to provide our customers with expert help if required.

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.

Unfortunately this is a bit tricky because WooCommerce doesn’t store the customer details as a taxonomy on the ‘shop_order’ post type that you can use to control which orders to include in the table. As a result, you need to create a new way to store this information so that Posts Table Pro knows which orders relate to the current customer.

Here are two suggested workarounds. The first is aimed at non-technical users and requires a bit of manual work. The second is for developers and is more automated.

Option 1 – Create a hidden page for each customer listing their 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.

Option 2 – Automated solution

For a more automated solution with less manual work, here’s an alternative method for you (or your developer):

  1. Create a custom taxonomy on the ‘shop_order’ post type, and code it to automatically populate with the username of the person who placed the order.
  2. Modify the template for the WooCommerce Account page to replace the default list of orders with a Posts Table Pro shortcode: [posts_table post_type="shop_order" columns="id,date,cf:_order_total" post_status="Wc-completed" links="none" term="customer:user1"]
  3. Replace “customer” in the shortcode with the slug of the taxonomy you created in step 1 a minute ago.
  4. Instead of “user1”, you need to dynamically populate this part of the shortcode with the customer’s username (which you are storing as a taxonomy term, as described in step 1).

Once you have done this, the WooCommerce Account page will include a table listing orders for the current user.

Need professional assistance?
We've partnered with Codeable to provide our customers with expert help if required.

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.

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.

Katie Keith

An active member of the global WordPress community, Barn2 Co-Founder Katie loves collaborating with other plugin companies. Her articles have been published on high profile sites including WPTavern, Torque and IndieHackers. She oversees all plugin support and deals with 'Tier 2' support requests about how to use Barn2's plugins in advanced ways.

29 Comments

  1. Matt M
    October 6, 2019 Reply

    Can I have export buttons like in other datatable plugins? for example: a button to download CSV file?

    • EJ
      October 10, 2019 Reply

      Hi, Matt. Our plugin allows you to display/list/show your WooCommerce orders in the front end of your website. To export this data, you can use a WooCommerce order export plugin, which has a feature that allows you to display an export button in the front end. Thanks.

  2. SAMEDI AMBA
    September 1, 2019 Reply

    Can I print the results of a query, or must I seek the services elsewhere?

    • EJ
      September 5, 2019 Reply

      Unfortunately, it's not possible to print query results from using the search box. To do that, you would need to use the options that come with WooCommerce Product Table to refine the orders displayed (See Choosing which products appear in the table), and then simply use the Edit -> Print function in your browser to print the current page, and that will only print the products that appear in the table when it first loads.

  3. Bryan Assata
    April 26, 2019 Reply

    How many filters can you apply, and can the filters be used with custom "meta" columns?

    • Katie Keith
      April 30, 2019 Reply

      You can add as many filter dropdowns as you like above the table. Posts Table Pro supports filters for categories, tags and any custom taxonomy, but of course you can only create filters for information that are used for the orders post type created by WooCommerce.

  4. Alessandro Putera
    March 25, 2019 Reply

    Hi, I already bought this plugin, I just want to ask, how to display the name of the product that has been ordered. Thank you.

    • Katie Keith
      March 26, 2019 Reply

      Hi Alessandro, you can find advice about the best way to do this in the 'Can I list the products for each order?' section of the above article.

Please share your thoughts...

Your email address will not be published.