How to Add a Custom Filter Field and Custom Column in WooCommerce Admin Orders Page?

If your online store doesn’t have integrated Product Input Fields—such as Select, Datepicker, Text, and others—on the product page to capture user selections, admins may need to manually enter some custom values into a custom field present on the edit order page. These selections are then saved as custom meta fields on the WooCommerce order details page.

For example, in a furniture store, you might create a custom field called ‘style’ to save custom values such as Modern, Rustic, or Classic for each order. The following code snippet adds a custom column named ‘Style’ and a custom filter field to the WooCommerce Orders page, allowing store owners to filter orders based on these specific values. The entered values are saved as metadata, and admins can filter orders using a dropdown menu. Let’s see how this is accomplished!

Solution: Add a Custom Filter Field and Custom Column in WooCommerce >Admin Orders Page

This code snippet will help you to enhance the functionality on the WooCommerce Orders page by creating a custom filter field and adding a custom column, allowing users to view, filter, and search orders based on the selected custom meta data values. The following code snippet is also compatible with HPOS based order table.

// Add Style column to the Orders page in WooCommerce admin
function ts_add_style_column($columns) {
    $columns['style'] = __('Style', 'woocommerce');
    return $columns;
}
add_filter('manage_woocommerce_page_wc-orders_columns', 'ts_add_style_column');

// Display the Style value in the Style column
function ts_display_style_column($column, $post_id) {
    if ($column == 'style') {
        // Get the WooCommerce order object
        $order = wc_get_order($post_id);

        // Replace 'style' with the actual meta key used for the Style field
        $style_value = $order->get_meta('style');
        echo $style_value;
    }
}
add_action('manage_woocommerce_page_wc-orders_custom_column', 'ts_display_style_column', 10, 2);

// Add a custom dropdown for filtering by Style
function ts_add_style_filter($post_type) {
    if ('shop_order' === $post_type) {
        $domain = 'woocommerce';
        $styles = array(__('Modern', $domain), __('Rustic', $domain), __('Classic', $domain));

        $selected_value = isset($_GET['style_filter']) ? sanitize_title($_GET['style_filter']) : '';

        echo '<select name="style_filter">';
        echo '<option value="" ' . selected('', $selected_value, false) . '>Filter by Style</option>';

        foreach ($styles as $value) {
            echo '<option value="' . sanitize_title($value) . '" ' . selected(sanitize_title($value), $selected_value, false) . '>' . $value . '</option>';
        }

        echo '</select>';
    }
}
add_action('woocommerce_order_list_table_restrict_manage_orders', 'ts_add_style_filter');

// Filter orders by Style
function ts_filter_orders_by_style($vars) {
    if (isset($_GET['style_filter']) && !empty($_GET['style_filter'])) {
        $selected_style_value = sanitize_text_field($_GET['style_filter']);

        $vars['meta_query'][] = array(
            'key'     => 'style',
            'value'   => $selected_style_value,
           
        );
    }

    return $vars;
}
add_filter('woocommerce_order_list_table_prepare_items_query_args', 'ts_filter_orders_by_style');

// Add Style to the search fields for the Orders table
function custom_woocommerce_shop_order_search_fields($search_fields) {
    $search_fields[] = 'style';
    return $search_fields;
}
add_filter('woocommerce_order_table_search_query_meta_keys', 'custom_woocommerce_shop_order_search_fields');

Output

Let’s assume you have created custom meta field values such as ‘Modern’, ‘Rustic’, and ‘Classic’ to identify the furniture type associated with each order. A custom filter field named ‘Filter by Style’ and a new column named ‘Style’ are added to the WooCommerce Orders page in the WordPress admin. This column displays the values of the custom meta field, specifically the ‘Style’ field, for each order as shown below.

When any one of the values such as ‘Modern’  is selected from the filter field, the code will retrieve orders specific to the selected value.

If you have integrated third party payment gateways such as paypal or stripe into your WooCommerce store, then you can also add a filter field for payment gateway in WooCommerce orders page which will help you to save time by quickly filtering orders of specific payment transactions.