Backend orders list custom action buttons in Woocommerce 3.3+

3
votes

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+?

2
phpwordpressbuttonwoocommerceorders
What's the issue? The button doesn't display or when you click it nothing happens? – Andrew Schultz
I took a look at you haven't defined the variable $actions. What's it meant to be? – Andrew Schultz
The button no longer displays. They relocated the buttons to the center from the right, and for some reason that broke it. – Disquy
Possible duplicate of Add custom URL link to admin order list page in WooCommerce – Andrew Schultz
@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

2 Answers

1
votes

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+

enter image description here

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)

0
votes

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' );