Backend orders list custom action buttons in Woocommerce 3.3+

Question

Since WooCommerce version 3.3+ the code below that displays a custom action button in admin order list, doesn't work anymore.

// Add your custom order action button
add_action( 'woocommerce_admin_order_actions_end', 'add_custom_order_actions_button', 100, 1 );
function add_custom_order_actions_button( $order ) {

    // Get the tracking number
    $traking_number = get_post_meta( $order->get_id(), '_aftership_tracking_number', true );
    if( empty($traking_number) ) return;

    // Prepare the button data
    $url    = esc_url('https://track.aftership.com/'.$traking_number.'?');
    $name   = esc_attr( __('Tracking', 'woocommerce' ) );
    $action = esc_attr( 'view tracking' ); // keep "view" class for a clean button CSS

    // Set the action button
    printf( '<a class="button tips %s" href="%s" data-tip="%s" target="_blank">%s</a>', $action, $url, $name, $name );
}

// The icon of your action button (CSS)
add_action( 'admin_head', 'add_custom_order_actions_button_css' );
function add_custom_order_actions_button_css() {
    echo '<style>.view.tracking::after { font-family: woocommerce; content: "\e005" !important; }</style>';
}

Code come from this answer: Add custom URL link to admin order list page in WooCommerce

What did they change to prevent it from working in the new version?
How can I make it work in Woocommerce version 3.3+?

What's the issue? The button doesn't display or when you click it nothing happens? — Andrew Schultz, Feb 24 '18 at 04:06
I took a look at you haven't defined the variable $actions. What's it meant to be? — Andrew Schultz, Feb 24 '18 at 04:11
The button no longer displays. They relocated the buttons to the center from the right, and for some reason that broke it. — Disquy, Feb 24 '18 at 05:13
Possible duplicate of [Add custom URL link to admin order list page in WooCommerce](https://stackoverflow.com/questions/47886025/add-custom-url-link-to-admin-order-list-page-in-woocommerce) — Andrew Schultz, Feb 24 '18 at 10:13
@AndrewSchultz **Not a duplicate** as since WC version 3.3 Admin Order list has been changed with some enhancements… The actions buttons are now different and are involved by fresh new functions in Woocommerce source code. So this question issue is directly related to that changes… — LoicTheAztec, Feb 25 '18 at 11:26

LoicTheAztec · Accepted Answer · 2018-02-25T11:31:08.983

Here is the correct way to get this working, as this was the code from one of my answers, that will load in a separate browser window (or tab) the corresponding tracking page.

hook woocommerce_admin_order_actions_end still exist and works. What has changed in vesion 3.3+ is the function that displays the buttons wc_render_action_buttons() and so the displayed buttons html structure and classes too.
Why? … Because that order list display has been enhanced in version 3.3+.

The code:

// Add your custom order action button
add_action( 'woocommerce_admin_order_actions_end', 'add_custom_order_actions_button', 100, 1 );
function add_custom_order_actions_button( $order ) {

    // Get the tracking number
    $traking_number = get_post_meta( $order->get_id(), '_aftership_tracking_number', true );
    if( empty($traking_number) ) return;

    // Prepare the button data
    $url    = esc_url('https://track.aftership.com/'.$traking_number.'?');
    $name   = esc_attr( __('Tracking', 'woocommerce' ) );
    $class  = esc_attr( 'tracking' );

    // Custom action button (with a target='_blank' opening a new browser window)
    printf( '<a class="button wc-action-button wc-action-button-%s %s" href="%s" title="%s" target="_blank">%s</a>', $class, $class, $url, $name, $name );
}

// The icon of your action button (CSS)
add_action( 'admin_head', 'add_custom_order_actions_button_css' );
function add_custom_order_actions_button_css() {
    echo '<style>.wc-action-button-tracking::after { font-family: woocommerce !important; content: "\e01a" !important; }</style>';
}

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

Tested and works only for woocommerce version 3.3+

Here I don't use woocommerce_admin_order_actions usual action hook, but instead I use an unusual hook, to allow displaying the tracking page in a separate browser window (or tab)

Thank you that worked. Also I realized they hid the actions in the newest version. I had to choose screen options and enable it. Silly me, I'm a goose. — Disquy, Feb 25 '18 at 06:48
@Disquy No problem… the important is that it works again **and with a better icon** than before. — LoicTheAztec, Feb 25 '18 at 07:13
This is great thanks - if, instead, I didn't want to just generate a href to another site, but rather have some PHP code execute (maybe an API call or update some metadata on the order) when you click the button, where does that code belong? — NullHypothesis, Jul 16 '18 at 03:15
@NullHypothesis Thanks. If you find this great, you could please upvote it if you like/want. To answer your question, yes it's possible to execute an API call using CURL for example and then update something in your order when you get the correct response… Now this can not be answered in a comment as you should need other things. The best thing will be to ask a new related question on StackOverFlow and to notify me here. Is better to include some customized code in your question. — LoicTheAztec, Jul 16 '18 at 03:48

Andrew Schultz · Answer 2 · 2018-02-24T05:48:42.950

They must have changed a lot because that hook you have used doesn't exist. Here is a modified version of your code. I changed the way you enqueued the inline CSS for best practices.

// Add your custom order action button
add_filter( 'woocommerce_admin_order_actions', 'add_custom_order_actions_button', 10, 2 );

function add_custom_order_actions_button( $actions, $order ) {

    // Get the tracking number
    $tracking_number = get_post_meta( $order->get_id(), '_aftership_tracking_number', true );

    if( empty( $tracking_number ) ) 
        return $actions;

    // Prepare the button data
    $url    = esc_url('https://track.aftership.com/'.$tracking_number.'?');
    $name   = esc_attr( __('Tracking', 'woocommerce' ) );
    $action = esc_attr( 'view tracking' ); // keep "view" class for a clean button CSS

    $actions['view-tracking'] = array( 'url' => $url, 'name' => $name, 'action' => $action );

    return $actions;
}

//Adding CSS inline style to an existing CSS stylesheet
function add_inline_css() {
    //All the user input CSS settings as set in the plugin settings
    $custom_css = '.view.tracking::after { font-family: woocommerce; content: "\e005" !important; }';

    //Add the above custom CSS via wp_add_inline_style
    wp_add_inline_style( 'woocommerce_admin_styles', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'add_inline_css' );

This is working on your 3.3.3 installation? This did not work for me unfortunately. — Disquy, Feb 24 '18 at 06:02
Hmm I am using version 3.3.1, I didn't realise I didn't have the latest version installed. I'll upgrade and see what the difference is. — Andrew Schultz, Feb 24 '18 at 10:01
I want to trigger this wp_remote_post API call when the button is pressed, How can i bind this action into action? — NaFi, Mar 03 '20 at 02:27

Backend orders list custom action buttons in Woocommerce 3.3+

2 Answers2

Linked