How to Add a Payment Gateway Filter Field in WooCommerce >Admin Orders Page?

By default, the WooCommerce orders page includes the most basic columns and filter options only. But you can customize the orders page by additional parameters such as Payment method, Order status, Delivery dates, etc. It allows the admin to quickly filter and sort orders easily. This can save time when managing orders and analyzing sales data.

This post helps you to Add a Payment Gateway Filter Field in WooCommerce >Admin Orders Page. 

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Solution: Add a Payment Gateway Filter Field in WooCommerce >Admin Orders Page

Imagine an online clothing store offering multiple payment methods, including credit cards, PayPal, and Apple Pay. If the store owner wants to monitor the performance of these payment gateways, manually sorting and organizing orders by payment method can be a time-consuming task.

The following code snippet simplifies this process by adding a dropdown field labeled as ‘Filter by Payment Method’ and a new column as ‘Payment Gateway’ in the admin Orders table.

// Add the Payment Method column to the Orders page in WooCommerce admin
function ts_add_payment_method_column($columns) {
    $columns['payment_method'] = __('Payment Method', 'woocommerce');
    return $columns;
}
add_filter('manage_edit-shop_order_columns', 'ts_add_payment_method_column');

// Display the payment method value in the Payment Method column
function ts_display_payment_method_column($column, $post_id) {
    if ($column == 'payment_method') {
        $order = wc_get_order($post_id);
        echo $order->get_payment_method_title();
    }
}
add_action('manage_shop_order_posts_custom_column', 'ts_display_payment_method_column', 10, 2);

// Add a custom dropdown for filtering by payment method
function ts_add_payment_method_filter() {
    global $typenow;
    
    if ('shop_order' === $typenow) {
        $payment_methods = array(
            'bacs' => __('BACS', 'woocommerce'),
            'cod'  => __('Cash on Delivery', 'woocommerce'),
			'cheque'  => __('Cheque', 'woocommerce'),
            // Add more payment methods as needed
        );
        
        echo '<select name="payment_method_filter">';
        echo '<option value="">Filter by Payment Method</option>';
        
        foreach ($payment_methods as $method => $label) {
            echo '<option value="' . $method . '">' . $label . '</option>';
        }
        
        echo '</select>';
    }
}
add_action('restrict_manage_posts', 'ts_add_payment_method_filter');

// Filter orders based on the selected payment method
function ts_filter_orders_by_payment_method($query) {
    global $pagenow;
    
    if ('edit.php' === $pagenow && isset($_GET['payment_method_filter']) && !empty($_GET['payment_method_filter'])) {
        $query->query_vars['meta_key'] = '_payment_method';
        $query->query_vars['meta_value'] = sanitize_text_field($_GET['payment_method_filter']);
    }
}
add_filter('parse_query', 'ts_filter_orders_by_payment_method');

Output

The image below indicates that the code has added a field named “Filter by Payment Method” that allows you to select a particular payment method via a dropdown filter. A new column titled “Payment Gateway” will now be visible in the admin Orders table. This column will showcase the payment method used for each order based on the user’s selection.

The image below shows that when you choose and filter a specific payment method such as ‘Cash on Delivery’, only that method is filtered, and it will be displayed in the payment method column.

If you choose and filter a specific payment method such as ‘BACS’, only that method is filtered, and it will be displayed in the payment method column.

Code Explanation

Step 1: Adding the Payment Method Column

This step is focused on customizing the display of the Orders page in the WooCommerce admin panel.

• add_payment_method_column is a custom function that takes an array of column names as its parameter. In this function, it adds a new column named ‘payment_method’ to the existing columns. The text ‘Payment Method’ is the label for this new column.
• The add_filter function is used to apply this customization. It tells WordPress to execute the add_payment_method_column function when generating the columns for the ‘shop_order’ type (i.e., WooCommerce orders).

Step 2: Displaying the Payment Method Value in the Column

In this step, the code specifies how to display the payment method information in the new ‘Payment Method’ column.

• The display_payment_method_column function is defined to display the content of the ‘payment_method’ column. It checks if the current column being processed is ‘payment_method’ and if so, it retrieves the order associated with the current post ID using wc_get_order.
• Then, it outputs the title of the payment method associated with that order using $order->get_payment_method_title().
• The add_action function is used to execute the display_payment_method_column function when generating custom columns for shop orders. 

Step 3: Adding a Custom Dropdown for Filtering by Payment Method

This part of the code adds a custom dropdown filter to the WooCommerce Orders page, enabling users to filter orders by payment method.

• The add_payment_method_filter function checks if the current post type is ‘shop_order’ by inspecting the global variable $typenow.
• If it’s indeed a ‘shop_order’ page, it defines an array called $payment_methods. This array contains various payment methods, each associated with a label. You can add more payment methods as needed.
• The code then generates HTML for a <select> dropdown with options for each payment method. It also includes a default option for filtering (“Filter by Payment Method”).
• This function is executed when generating the WordPress admin page and custom post types using the restrict_manage_posts action hook.

Step 4: Filtering Orders Based on the Selected Payment Method

This step focuses on filtering orders based on the selected payment method using the custom dropdown created earlier.

• The filter_orders_by_payment_method function checks if the current page being displayed is ‘edit.php’ (the edit page for posts) and if the ‘payment_method_filter’ parameter is set in the URL, indicating that a payment method has been selected.
• If these conditions are met, it modifies the query to filter orders by adding a meta key (meta_key) of ‘_payment_method’ and a meta value (meta_value) based on the selected payment method. It uses sanitize_text_field to ensure that the input is safe and clean.
• This function is hooked to the parse_query action, which allows you to modify the query parameters before it’s executed.

Conclusion

The above code helps you to add a custom dropdown filter field enabling you to filter payment gateways on the admin interface of WooCommerce > Orders. If you prefer not to filter the payment gateways and would rather view all the payment methods for orders, you can easily achieve this only by adding the Payment Gateway Column to the WooCommerce ‘Orders’ list.

Similarly, filtering specific delivery details of orders is done effectively using the Order Delivery Date Pro for WooCommerce plugin.

It helps admins search, view, and sort orders and their delivery details quickly. You can also look at specific order details as per the requirement using the filter option on the WooCommerce orders page.