Additional Custom Columns to the WooCommerce Orders Overview

Customizing your WooCommerce orders overview can empower you to display additional information and improve your order management workflow. One effective customization is adding your own custom columns to the orders list. This guide explains how to add a custom column to the WooCommerce orders page using PHP and how to style it with custom CSS. Tools like WP Code or Code Snippets are recommended for safely integrating the code without modifying core files.

Approach – PHP Solution

Using filters and actions provided by WooCommerce, you can add new columns to the orders overview and display custom data stored for each order. In this example, we create a custom column labeled “Custom Column” that displays data saved in the order’s metadata under the key _custom_column.

Example Code:

<?php
// Add a custom column to the WooCommerce orders overview
function add_custom_order_column( $columns ) {
    $new_columns = array();
    
    // Iterate existing columns and insert our custom column after the Order Status column
    foreach ( $columns as $key => $column ) {
        $new_columns[ $key ] = $column;
        if ( 'order_status' === $key ) {
            $new_columns['custom_column'] = __( 'Custom Column', 'text_domain' );
        }
    }
    return $new_columns;
}
add_filter( 'manage_edit-shop_order_columns', 'add_custom_order_column', 20 );

// Populate the custom column with its value from the order meta data
function populate_custom_order_column( $column, $post_id ) {
    if ( 'custom_column' === $column ) {
        $custom_value = get_post_meta( $post_id, '_custom_column', true );
        echo ! empty( $custom_value ) ? esc_html( $custom_value ) : '-';
    }
}
add_action( 'manage_shop_order_posts_custom_column', 'populate_custom_order_column', 10, 2 );
?>

How It Works:

The first function, add_custom_order_column, uses the manage_edit-shop_order_columns filter to insert a new column after the “Order Status” column. The second function, populate_custom_order_column, makes use of the manage_shop_order_posts_custom_column action to fill the custom column with data retrieved from the post meta. If the meta field _custom_column is empty, it displays a dash.

Enhancing with CSS

Custom CSS can help improve the visual appearance and responsiveness of your new column. The following CSS snippet ensures that your custom column stands out with a subtle background color and refined text styling.

Example CSS Code:

/* Style the custom column in the WooCommerce orders overview */
.column-custom_column {
    background-color: #f9f9f9;
    color: #333;
    font-weight: bold;
    text-align: center;
    padding: 8px;
}

Integration with PHP:

To insert this CSS into the admin area, add the following PHP code. This code utilizes the admin_head hook to output the custom styles directly in your WordPress admin panels.

<?php
function add_custom_order_column_styles() {
    echo '
    <style>
        .column-custom_column {
            background-color: #f9f9f9;
            color: #333;
            font-weight: bold;
            text-align: center;
            padding: 8px;
        }
    </style>
    ';
}
add_action( 'admin_head', 'add_custom_order_column_styles' );
?>

Conclusion

Adding custom columns to your WooCommerce orders overview is a practical way to display additional, tailored information that improves order management efficiency. With the PHP solution provided, you can add a new column and populate it with specific meta data for each order. Complementing the functionality with custom CSS ensures that your column is not only informative but also visually integrated into your admin dashboard.

Experiment with these techniques to expand your order management capabilities and create a more customized backend experience that suits your business needs. Happy coding!