WooCommerce：如何修改感谢页的银行信息显示布局？

核心思路 #

避免直接修改WooCommerce核心文件（防止更新后丢失修改），通过钩子替换默认的BACS感谢页输出逻辑，调整二维码与银行信息的顺序，再用CSS实现同行排列。

具体步骤 #

1. 通过钩子替换默认输出（推荐方案）
   在主题的functions.php中添加以下代码，接管BACS支付的感谢页内容输出：

// 移除BACS网关默认的感谢页输出动作
remove_action( 'woocommerce_thankyou_bacs', array( WC_Gateway_BACS::instance(), 'thankyou_page' ) );

// 自定义BACS感谢页布局
add_action( 'woocommerce_thankyou_bacs', 'custom_bacs_thankyou_layout' );
function custom_bacs_thankyou_layout( $order_id ) {
    $order = wc_get_order( $order_id );
    if ( ! $order ) return;

    // --- 1. 先输出支付二维码（替换成你已有的二维码生成代码） ---
    // 示例代码，替换为你自己的二维码生成逻辑
    $payment_qr_html = '<div class="payment-qrcode">
        <img src="你的二维码图片地址" alt="扫码支付" style="max-width:150px;">
    </div>';
    echo $payment_qr_html;

    // --- 2. 再输出默认的银行信息列表 ---
    $bacs_gateway = WC_Gateway_BACS::instance();
    ob_start(); // 捕获默认银行信息的输出内容
    $bacs_gateway->thankyou_page( $order_id );
    $bank_content = ob_get_clean();
    // 给银行信息容器添加自定义类，方便CSS控制
    $bank_content = str_replace( '<div class="woocommerce-bacs-bank-details">', '<div class="woocommerce-bacs-bank-details bank-info-wrap">', $bank_content );
    echo $bank_content;
}

2. 添加CSS实现同行显示
   在主题自定义CSS面板（或style.css文件）中添加样式：

/* 让二维码与银行信息横向排列 */
.woocommerce-order-received .payment-qrcode,
.woocommerce-order-received .bank-info-wrap {
    display: inline-block;
    vertical-align: top;
    margin-right: 30px; /* 调整两者间距 */
}

/* 移动端适配：小屏幕自动换行 */
@media (max-width: 768px) {
    .woocommerce-order-received .payment-qrcode,
    .woocommerce-order-received .bank-info-wrap {
        display: block;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

备选方案：直接修改核心文件（不推荐） #

若一定要修改/includes/gateways/bacs/class-wc-gateway-bacs.php，找到public function thankyou_page( $order_id )方法，将你的二维码生成代码移至银行信息列表输出代码的前方，再添加上述CSS样式即可。注意：WooCommerce版本更新后，核心文件的修改会被覆盖，因此优先使用钩子方案。

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