How to Add New Column On WooCommerce Orders Page

Do you want to add a new column on the WooCommerce order page? By default, WooCommerce provides you with an order page. This page contains all the details of the orders made by customers in your store.

Table of Contents

Four columns are displayed on this page. Let us look at each of them. You can skip this section if you know these columns.

Columns on WooCommerce Orders Page

The first column is the status column. It shows you the status of the orders that have been placed by the customers on your WooCommerce store.

It could be either Pending Payment, Processing, On hold, Completed, Cancelled, Refunded, or Failed. The order statuses are denoted by a different icon.

The order column displays the order number, customer name, and email address. The date column displays when the order was made.

The last column is the totals column.

In this post, we will show you how you can add a new column to this page.

Let us see how you can achieve this.

Steps to Add a New Column to the Orders Page

This is how the orders page is displayed on the back end:

Here are the simple steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will add a new column on the orders page.
Add the following code to the php file:

[php] add_filter( ‘manage_edit-shop_order_columns’, ‘MY_COLUMNS_FUNCTION’ );

function MY_COLUMNS_FUNCTION( $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[‘MY_COLUMN_ID_1’] = ‘MY_COLUMN_1_TITLE’;

$new_columns[‘MY_COLUMN_ID_2’] = ‘MY_COLUMN_2_TITLE’;

//stop editing

$new_columns[ ‘order_actions’ ] = $columns[ ‘order_actions’ ];

return $new_columns;

}
[/php]

This is the outcome:
The next step is to make the new columns sortable. Sorting the new column items means being able to arrange the items that will be displayed on those new columns. To do this, add the following code in the same file:

[php] add_filter( "manage_edit-shop_order_sortable_columns", ‘MY_COLUMNS_SORT_FUNCTION’ );

function MY_COLUMNS_SORT_FUNCTION( $columns )

{

$custom = array(

‘MY_COLUMN_ID_1’ => ‘MY_COLUMN_1_POST_META_ID’,

‘MY_COLUMN_ID_2’ => ‘MY_COLUMN_2_POST_META_ID’

);

return wp_parse_args( $custom, $columns );

}
[/php]

The last step is to look at how to make those created new columns have custom fields. The custom fields will allow the admin to add additional information to an order. To achieve this, add the following code to the same file:

[php] add_action( ‘manage_shop_order_posts_custom_column’, ‘MY_COLUMNS_VALUES_FUNCTION’, 2 );

function MY_COLUMNS_VALUES_FUNCTION( $column ) {

global $post;

$data = get_post_meta( $post->ID );

//start editing, I was saving my fields for the orders as custom post meta

//if you did the same, follow this code

if ( $column == ‘MY_COLUMN_ID_1’ ) {

echo ( isset( $data[ ‘MY_COLUMN_1_POST_META_ID’ ] ) ? $data[ ‘MY_COLUMN_1_POST_META_ID’ ] : ” );

}

if ( $column == ‘MY_COLUMN_ID_2’ ) {

echo ( isset( $data[ ‘MY_COLUMN_2_POST_META_ID’ ] ) ? $data[ ‘MY_COLUMN_2_POST_META_ID’ ] : ” );

}

}
[/php]

This is the outcome:

Conclusion

In this brief tutorial, we have shared how you can create a new column on the orders page. We recommend that you create a child theme so that your changes are not lost during an update.

You should also be careful when editing the functions.php file. If you make any mistake, a critical error will be displayed on your site.

Editorial Staff

How to Add New Column On WooCommerce Orders Page

Columns on WooCommerce Orders Page

Steps to Add a New Column to the Orders Page

Conclusion

Similar Articles

Related