Woocommerce 3.3+ 中的后端订单列表自定义操作按钮

Question

由于 WooCommerce 版本 3.3+，下面的代码在管理订单列表中显示自定义操作按钮，不再起作用。

// 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>';
}

代码来自这个答案：Add custom URL link to admin order list page in WooCommerce

为了阻止它在新版本中工作，他们做了哪些更改？
我怎样才能让它在 Woocommerce 3.3+ 版中工作？

Answer 1

这是实现此功能的正确方法，因为这是代码 from one of my answers，将在单独的浏览器窗口（或标签）中加载相应的跟踪页面。

挂钩woocommerce_admin_order_actions_end still exist and works。 vesion 3.3+ 中改变的是显示按钮wc_render_action_buttons() 的功能以及显示按钮的html 结构和类。
为什么？ ...因为订单列表显示在 3.3+ 版本中得到了增强。

代码：

// 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>';
}

代码进入您的活动子主题（或主题）的 function.php 文件中。

经过测试，仅适用于 woocommerce 3.3+ 版

这里我没有使用woocommerce_admin_order_actions 通常的动作钩子，而是使用了一个不寻常的钩子，允许在单独的浏览器窗口中显示跟踪页面（或标签）

Answer 2

它们一定发生了很大变化，因为您使用的那个钩子不存在。这是您的代码的修改版本。我更改了您将内联 CSS 加入队列以获得最佳实践的方式。

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