Add a custom action button in WooCommerce admin order list

Question

I have followed this instructions to add a custom order status for my WooCommerce Orders.

I can't find a way to create a custom action button that changes the order status to my custom status from the admin order list page like this screenshot:

I would like this custom action button to be shown for the orders that have a "Processing" status.

I could not find any answer in WooCommerce documentation.

Is there a hook to apply these buttons?
How can I add it in the function.php?

Thank you

Answer 1

To resume, you have created a custom order status 'wc-parcial' (with the instructions code provided in your question) and you need to add a related action button to orders admin list.

For WooCommerce version 3.3+ check the update in this answer below

You need to use a custom function hooked in woocommerce_admin_order_actions filter hook

// Add your custom order status action button (for orders with "processing" status)
add_filter( 'woocommerce_admin_order_actions', 'add_custom_order_status_actions_button', 100, 2 );
function add_custom_order_status_actions_button( $actions, $order ) {
    // Display the button for all orders that have a 'processing' status
    if ( $order->has_status( array( 'processing' ) ) ) {

        // Get Order ID (compatibility all WC versions)
        $order_id = method_exists( $order, 'get_id' ) ? $order->get_id() : $order->id;
        // Set the action button
        $actions['parcial'] = array(
            'url'       => wp_nonce_url( admin_url( 'admin-ajax.php?action=woocommerce_mark_order_status&status=parcial&order_id=' . $order_id ), 'woocommerce-mark-order-status' ),
            'name'      => __( 'Envio parcial', 'woocommerce' ),
            'action'    => "view parcial", // keep "view" class for a clean button CSS
        );
    }
    return $actions;
}

// Set Here the WooCommerce icon for your action button
add_action( 'admin_head', 'add_custom_order_status_actions_button_css' );
function add_custom_order_status_actions_button_css() {
    echo '<style>.view.parcial::after { font-family: woocommerce; content: "\e005" !important; }</style>';
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works. You will get that:

Answer 2

Updated version for Woocommerce 3.3+

To resume, you have created a custom order status 'wc-parcial' (with the instructions code provided in your question) and you need to add a related action button to orders admin list.

The new code:

// Add your custom order status action button (for orders with "processing" status)
add_filter( 'woocommerce_admin_order_actions', 'add_custom_order_status_actions_button', 100, 2 );
function add_custom_order_status_actions_button( $actions, $order ) {
    // Display the button for all orders that have a 'processing' status
    if ( $order->has_status( array( 'processing' ) ) ) {

        // The key slug defined for your action button
        $action_slug = 'parcial';

        // Set the action button
        $actions[$action_slug] = array(
            'url'       => wp_nonce_url( admin_url( 'admin-ajax.php?action=woocommerce_mark_order_status&status=parcial&order_id=' . $order->get_id() ), 'woocommerce-mark-order-status' ),
            'name'      => __( 'Envio parcial', 'woocommerce' ),
            'action'    => $action_slug,
        );
    }
    return $actions;
}

// Set Here the WooCommerce icon for your action button
add_action( 'admin_head', 'add_custom_order_status_actions_button_css' );
function add_custom_order_status_actions_button_css() {
    $action_slug = "parcial"; // The key slug defined for your action button

    echo '<style>.wc-action-button-'.$action_slug.'::after { font-family: woocommerce !important; content: "\e029" !important; }</style>';
}

Code goes in functions.php file of your active child theme (or active theme).

Tested and works