如何让WooCommerce我的账户订单页的Track按钮始终排在首位？

问题分析 #

你之前的jQuery代码失效原因有两个：

1. 选择器错误：按钮的类是ast_track，你写的.track匹配不到目标元素
2. 目标容器错误：你操作的是账户导航栏（.woocommerce-MyAccount-navigation），但Track按钮实际在订单操作按钮区域里

方案一：修正jQuery代码 #

确保选择正确的按钮和容器，同时考虑按钮可能是动态加载的（比如通过AJAX加载订单），可以用以下代码：

jQuery(document).ready(function($) {
    // 遍历每个订单的操作按钮容器，将Track按钮移到最前面
    $('.woocommerce-orders-table__cell-order-actions').each(function() {
        $(this).find('.ast_track').prependTo(this);
    });

    // 适配AJAX加载的订单（比如分页加载），监听DOM变化自动调整
    $(document).on('DOMNodeInserted', '.woocommerce-orders-table__cell-order-actions', function() {
        $(this).find('.ast_track').prependTo(this);
    });
});

方案二：CSS Flex布局调整（更简单） #

如果订单操作按钮容器是flex布局，直接通过order属性调整顺序即可：

/* 将Track按钮设为最前 */
.woocommerce-orders-table__cell-order-actions .ast_track {
    order: -1;
    /* 可选：调整按钮间距，和其他按钮保持一致 */
    margin-right: 0.5em;
}

方案三：PHP钩子修改（无JS依赖，更稳定） #

通过WooCommerce的钩子直接修改按钮输出顺序，找到插件添加Track按钮的钩子，调整优先级：

add_filter('woocommerce_my_account_my_orders_actions', 'move_track_button_to_first', 10, 2);
function move_track_button_to_first($actions, $order) {
    // 检查是否存在Track按钮
    if (isset($actions['track'])) {
        // 取出Track按钮
        $track_action = $actions['track'];
        // 删除原有位置的Track按钮
        unset($actions['track']);
        // 将Track按钮插入到数组开头
        $actions = array_merge(['track' => $track_action], $actions);
    }
    return $actions;
}

注意：这个方法需要确认插件添加的按钮key是track，如果不是，替换成页面源码中按钮的data-action属性值即可。

内容的提问来源于stack exchange，提问作者Shane Price