WooCommerce我的账户订单页面发票按钮位置调整问题

嘿，我完全懂你现在的头疼——想把发票按钮挪到我的账户订单页面的指定位置，结果改了<section class="woocommerce-order-details">的内容完全没用，对吧？这问题我碰到过好多次，其实根源不是改section标签，而是你没用到正确的WooCommerce钩子，还硬套了自带的区块类，导致位置被锁死了。

先给你拆解下问题：你之前硬写的<section class="woocommerce-order-details">是WooCommerce自带的订单详情区块，这个区块在模板里有固定的渲染位置，你直接把按钮套进去，自然没法自由调整位置。而且你可能还把函数挂在了错误的钩子上，导致怎么改都没反应。

下面给你分两种场景（单个订单详情页/订单列表页）给出具体的解决办法：

场景1：想把按钮放在「单个订单详情页面」的指定位置 #

比如你想放在订单表格之后、订单详情区块之前，或者页面最开头，都可以用WooCommerce提供的动作钩子来控制：

第一步：修改你的show_public_invoice函数

去掉硬写的woocommerce-order-details区块，让按钮成为独立的内容，这样才能通过钩子自由定位：

public function show_public_invoice( $order_id ) {
    $admin_settings = new Smartbill_Woocommerce_Admin_Settings_Fields();
    // 先检查后台是否开启了公开发票功能
    if ( $admin_settings->get_public_invoice() ) {
        // 直接取自定义字段的数组，不用再取[0]，更简洁
        $invoice_meta = get_post_meta( $order_id, 'smartbill_invoice_log', true );
        
        // 确认发票链接存在
        if ( $invoice_meta && isset( $invoice_meta['smartbill_view_document_url'] ) ) {
            // 输出独立的按钮容器，你可以自己加类名控制样式和位置
            echo '<div class="custom-invoice-button-wrapper">';
            echo '<h2 class="woocommerce-column__title">' . esc_html__( 'DOWNLOAD INVOICE', 'smartbill_woocommerce' ) . '</h2>';
            echo '<a target="_blank" href="' . esc_url( $invoice_meta['smartbill_view_document_url'] ) . '" class="woocommerce-button button view">';
            echo esc_html( $admin_settings->get_view_invoice_text() );
            echo '</a>';
            echo '</div>';
        }
    }
}

第二步：把函数挂到正确的钩子上

根据你想要的位置，选择对应的钩子，同时可以通过优先级数字控制前后顺序（数字越小，位置越靠前）：

// 示例1：放在订单详情表格之后
add_action( 'woocommerce_order_details_after_order_table', array( $this, 'show_public_invoice' ), 10, 1 );

// 示例2：放在整个订单页面的最开头
// add_action( 'woocommerce_before_view_order', array( $this, 'show_public_invoice' ), 10, 1 );

// 示例3：放在订单详情区块之后
// add_action( 'woocommerce_view_order_after_order_details', array( $this, 'show_public_invoice' ), 10, 1 );

场景2：想把按钮放在「我的账户-订单列表页面」（每条订单后面加操作按钮） #

如果是想在订单列表里给每条订单加发票按钮，那不能用之前的函数，要改用专门的过滤器钩子：

第一步：新增适配订单列表的函数

public function add_invoice_button_to_order_list( $actions, $order ) {
    $admin_settings = new Smartbill_Woocommerce_Admin_Settings_Fields();
    if ( $admin_settings->get_public_invoice() ) {
        $invoice_meta = get_post_meta( $order->get_id(), 'smartbill_invoice_log', true );
        if ( $invoice_meta && isset( $invoice_meta['smartbill_view_document_url'] ) ) {
            // 把发票按钮加入订单操作按钮数组
            $actions['view_invoice'] = array(
                'url'    => esc_url( $invoice_meta['smartbill_view_document_url'] ),
                'name'   => esc_html( $admin_settings->get_view_invoice_text() ),
                'target' => '_blank' // 可选：新窗口打开
            );
        }
    }
    return $actions;
}

第二步：挂到订单列表的过滤器钩子上

add_filter( 'woocommerce_my_account_my_orders_actions', array( $this, 'add_invoice_button_to_order_list' ), 10, 2 );

为什么你之前改section没用？ #

你硬写的<section class="woocommerce-order-details">是WooCommerce模板里固定的订单详情区块，它的位置是由WooCommerce的模板结构决定的，你直接输出这个section，就等于把按钮塞进了这个固定位置的区块里，自然没法自由调整。正确的做法是用WooCommerce官方提供的钩子，把按钮挂载到你想要的位置，而不是硬套自带的区块类。

最后提醒 #

1. 改完代码后一定要清一下WooCommerce的缓存（如果开了缓存插件也要清），还有浏览器缓存，不然可能看不到变化；
2. 可以通过调整钩子的优先级数字来微调位置：比如把10改成20，按钮就会在默认优先级的内容之后显示；
3. 确认后台的「公开发票」选项是开启的，还有订单的smartbill_invoice_log自定义字段确实存在且有有效的链接。

内容来源于stack exchange