Search the site:

Home Blog How To Add A New Column On WooCommerce Orders Page

How To Add A New Column On WooCommerce Orders Page

This article discusses how to show and add an additional column in the admin of WooCommerce Orders page. We will also look at showing the data from the custom field and how to make the new column sortable.

The WooCommerce orders admin page looks as shown below:

Add A New Column On WooCommerce Orders Page - WooCommerce Orders Page

There are a total of 8 columns that are displayed by default in WooCommerce orders page.

If you are already aware about what each column displays, then skip to the section right after it.

Understanding the default columns on Orders page

Column Number 1: Status

This column on the WooCommerce orders admin page shows you the status of the orders that have been placed by the customers on your WooCommerce store.

The status could be either Pending Payment, Processing, On hold, Completed, Cancelled, Refunded or Failed & it is denoted by different icons.

Column Number 2: Order

The Order column shows the order #, customer name & customer email address.

Column Number 3: Ship To

The next column on the WooCommerce orders admin page is the Ship To column. This column shows the shipping details as were entered in the “Shipping Address” fields on checkout page.

Column Number 4: Customer Message

As the name suggests, the Customer Message column shows you the message that the customer has sent you pertaining to the order. This corresponds to the Order Notes field on the checkout page.

Add A New Column On WooCommerce Orders Page - Order Note From WooCommerce Checkout Page

Column Number 5: Order Notes

Although this column is titled as Order Notes, it is not to be confused with the Order Notes field on the checkout page. These are notes that typically indicate the order status changes, or any other logs related to it.

Add A New Column On WooCommerce Orders Page - WooCommerce Order notes

Column Number 6: Date

This column shows you the date that the order had been placed.

Column Number 7: Totals

The Totals column shows the total order amount along with the payment method.

Column Number 8: Action

The Action column allows you to do actions like mark the order as Complete or view the order details.

Adding new columns to the Orders Page

Instead of writing the code in functions.php file or anywhere else, it’s best if you create a plugin for this.

Step 1: Add the following lines to your plugin file

For this, the new columns: MY_COLUMN_1_TITLE and  MY_COLUMN_2_TITLE are going to be added to the WooCommerce orders admin page.

A few things here:

i. The add filter line of code calls into action the function to create new columns arrays in the admin orders page automatically.

ii. “MY_COLUMN_ID_1” – This function is for the new first column ID (identification). Creates new column ID.

iii. “MY_COLUMN_ID_2” – This function is the new second column ID (identification). Creates new column ID.

iv. 2 New columns will be created that is “MY_COLUMN_1_TITLE” and “MY_COLUMN_2_TITLE” you can use your own titles here that you want to appear in the WooCommerce Orders page.

v. If you just want to add one new column just delete the other column and if you want to add other columns let say 4 or ten just add different lines of codes under the same.

If you go to the WooCommerce orders admin page and you will see that the changes have taken place and two new columns have been added, that is “MY_COLUMN_1_TITLE” and “MY_COLUMN_2_TITLE” just in between Totals and Actions columns as shown below:

Add A New Column On WooCommerce Orders Page - New Columns on WooCommerce Orders page

Step 2

Next, we are going to look at how to make those new columns sortable, that is how to sort the items in the just created new columns on WooCommerce orders admin page.

Add the below lines of code in your plugin file. Preferably, you can paste the given lines of codes just below the other lines of codes that we discussed earlier.

The new layout after adding the above lines of code.

Add A New Column On WooCommerce Orders Page - New Columns Sortable on WooCommerce Orders page

Sorting the new column items means being able to arrange the items that will be displayed on those new columns. The new column items change into links to enable you easily sort the items in those new columns.

NOTE: There is normally a triangle icon that will appear and become available on sorting attributes.

Step 3

Lastly, we are going to look at how to make those created new columns have custom fields. The custom fields will be useful in allowing the store admin to add additional information on the various orders that have been made by the customer.

You can do that by adding the below lines of codes in your new plugin file:

Here we are assuming that you have created the custom fields that are storing the values in the above mentioned post meta records:MY_COLUMN_1_POST_META_ID & MY_COLUMN_2_POST_META_ID.

That’s it. Doing the above will add & show your new columns on the WooCommerce Orders page.

We have used this same logic in the Order Delivery Date plugin. We added a new column in the plugin that shows the Delivery Date & time on the Orders page.

This is how the column appears:

Add A New Column On WooCommerce Orders Page - Delivery Date on Orders page

As you can see, the Delivery Date is also sortable.

Browse more in: WooCommerce, WooCommerce How Tos, WooCommerce Tutorials

20
Leave a Reply

avatar
12 Comment threads
8 Thread replies
11 Followers
 
Most reacted comment
Hottest comment thread
13 Comment authors
PorsiyonJon GlazerJoy FanChristopherDhara Shah Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
Robert
Guest
Robert

Hi Thanks for your sharing. Is it possible to show the total orders under that email address in new column? Thanks.

Rémi
Guest

Hi Vishal,
Thanks a lot for this tuto..
I try to add a column with the “total_tax” of the order.
I found this API and name here : https://woocommerce.github.io/woocommerce-rest-api-docs/#order-properties
But I don’t know how to add this item. I tried a lot of things.. but without success !
Thanks for your help.. if you have time.. 😉
Rémi

Camilo
Guest
Camilo

Hi, thanks you very much for the post! I’m having the following problem: the values of the custom fields is showing as “Array” for all orders. I created the fields using Advanced Custom Fields and replaced your “MY_COLUMN_1_POST_META_ID” with the custom field name. My code looks like this: add_filter( 'manage_edit-shop_order_columns', 'my_columns_fn' ); function my_columns_fn( $columns ) { $new_columns = ( is_array( $columns ) ) ? $columns : array(); unset( $new_columns[ 'order_actions' ] ); //edit this for your column(s) //all of your columns will be added before the actions column $new_columns['fecha_horneada'] = 'Fecha Horneada'; $new_columns['encargado'] = 'Encargado'; //stop editing $new_columns[ 'order_actions'… Read more »

Matt
Guest

I added the columns via “snippet”. However, I don’t know how to get data to populate inside of those columns. I added a custom field (additional_charter) using a plugin called “Woo Checkout Field Editor Pro”. Can you help me populate this custom field data into the new column?

frzr
Guest
from purchased

Subscribe Now