Add a New Column in WooCommerce Admin Order List: A Step-by-Step Guide
Image by Henny - hkhazo.biz.id

Add a New Column in WooCommerce Admin Order List: A Step-by-Step Guide

Posted on

Are you tired of scrolling through endless columns in your WooCommerce admin order list, searching for that one specific piece of information? Do you wish you could customize the columns to fit your business needs? Well, wish no more! In this article, we’ll show you how to add a new column in WooCommerce admin order list, and it’s easier than you think.

Why Customize the WooCommerce Admin Order List?

The default WooCommerce admin order list is, well, basic. It provides a limited amount of information, and let’s be honest, it can be overwhelming to find what you need quickly. By customizing the columns, you can prioritize the information that matters most to your business, making it easier to manage your orders and improve customer satisfaction.

What You’ll Need

To follow along with this tutorial, you’ll need:

  • A WordPress website with WooCommerce installed and configured
  • A basic understanding of PHP and WordPress development (don’t worry, we’ll guide you through it)
  • A code editor or IDE of your choice

Step 1: Create a Custom Plugin

Before we dive into the code, we need to create a custom plugin to hold our customizations. This will ensure that our changes aren’t lost during updates or theme changes.

Create a new folder in the wp-content/plugins directory and name it something like woocommerce-custom-columns. Inside this folder, create a new file called woocommerce-custom-columns.php.


// woocommerce-custom-columns/woocommerce-custom-columns.php
<?php
/*
Plugin Name: WooCommerce Custom Columns
Description: Add custom columns to the WooCommerce admin order list
Version: 1.0
Author: Your Name
Author URI: https://yourwebsite.com
*/

Step 2: Define the Custom Column

In this step, we’ll define the custom column we want to add. For this example, let’s say we want to add a column to display the customer’s phone number.

Add the following code to the woocommerce-custom-columns.php file:


// Define the custom column
function add_custom_column_to_order_list($columns) {
  $columns['customer_phone'] = __('Customer Phone', 'woocommerce');
  return $columns;
}
add_filter('manage_edit-shop_order_columns', 'add_custom_column_to_order_list');

This code defines a new column called customer_phone and adds it to the order list columns array.

Step 3: Populate the Custom Column

Now that we’ve defined the custom column, we need to populate it with data. For this example, we’ll retrieve the customer’s phone number from the order meta data.

Add the following code to the woocommerce-custom-columns.php file:


// Populate the custom column
function populate_custom_column($column, $order_id) {
  if ($column == 'customer_phone') {
    $order = wc_get_order($order_id);
    $customer_phone = $order->get_billing_phone();
    echo esc_html($customer_phone);
  }
}
add_action('manage_shop_order_posts_custom_column', 'populate_custom_column', 10, 2);

This code retrieves the customer’s phone number from the order meta data and displays it in the custom column.

Step 4: Make it Look Pretty

To make our custom column easier to read, let’s add some basic styling. Add the following code to the woocommerce-custom-columns.php file:


// Add basic styling to the custom column
function custom_column_style() {
  ?>
  <style>
    .column-customer_phone {
      width: 15%;
    }
  </style>
  <?php
}
add_action('admin_head', 'custom_column_style');

This code adds a basic CSS style to the custom column, making it easier to read.

Step 5: Test and Refine

The final step is to test our custom column and refine it as needed.

Log in to your WordPress admin dashboard and navigate to the WooCommerce orders page. You should see the new custom column displaying the customer’s phone number.

If everything looks good, great! If not, don’t worry, we can refine the code as needed.

Bonus: Add a Filter to the Custom Column

Let’s take it a step further and add a filter to our custom column. This will allow us to filter orders based on the customer’s phone number.

Add the following code to the woocommerce-custom-columns.php file:


// Add a filter to the custom column
function add_custom_column_filter($filters) {
  $filters[] = 'customer_phone';
  return $filters;
}
add_filter('woocommerce_order_filters', 'add_custom_column_filter');

function custom_column_filter($query, $filter) {
  if ($filter == 'customer_phone') {
    $query->set('meta_query', array(array('key' => '_billing_phone', 'value' => '', 'compare' => '!=')));
  }
  return $query;
}
add_filter('woocommerce_order_query', 'custom_column_filter', 10, 2);

This code adds a filter to the custom column, allowing us to filter orders based on the customer’s phone number.

Conclusion

And that’s it! You’ve successfully added a new column to the WooCommerce admin order list. With this guide, you can customize the columns to fit your business needs, making it easier to manage your orders and improve customer satisfaction.

Remember, this is just the tip of the iceberg. With a little creativity and some PHP magic, the possibilities are endless.

Column Title Description
Customer Phone Displays the customer’s phone number

So, what’s next? Start experimenting with different custom columns and filters to take your WooCommerce admin order list to the next level!

Frequently Asked Question

Customizing the Woocommerce admin order list to add a new column can be a bit tricky, but don’t worry, we’ve got you covered!

How do I add a new column to the Woocommerce admin order list?

You can add a new column to the Woocommerce admin order list by using the `woocommerce_admin_order_item_values` action hook. You’ll need to create a custom function that will display the new column and its data. You can do this by adding the function to your theme’s functions.php file or by creating a custom plugin.

What is the `woocommerce_admin_order_item_values` action hook?

The `woocommerce_admin_order_item_values` action hook is a hook that allows you to add custom columns to the Woocommerce admin order list. It’s typically used to display additional information about each order, such as custom meta data or third-party plugin data.

Can I add multiple columns to the Woocommerce admin order list?

Yes, you can add multiple columns to the Woocommerce admin order list by using the same `woocommerce_admin_order_item_values` action hook. You’ll just need to create a separate function for each column and add it to the hook.

How do I make the new column sortable?

To make the new column sortable, you’ll need to use the `woocommerce_admin_order_item_values_sortable_columns` filter hook. This hook allows you to add sorting functionality to your custom column.

Can I use this method to add a column to the frontend order list?

No, this method only works for the Woocommerce admin order list. If you want to add a column to the frontend order list, you’ll need to use a different approach, such as using the `woocommerce_my_account_my_orders_column` action hook.