如何在WooCommerce结账区块中将支付选项移至右侧栏的订单摘要之前

嗨，作为同样折腾过WooCommerce结账布局的开发者，我太懂你想调整这个位置的需求了！之前我也查过不少社区方案，结合实际实操经验，给你分享两种靠谱的方法：

方法一：利用WooCommerce区块钩子调整位置 #

WooCommerce结账区块提供了专门的钩子来调整组件顺序，你可以在主题的functions.php文件里添加以下代码：

add_action( 'woocommerce_checkout_blocks_enqueue_assets', 'move_checkout_payment_block' );
function move_checkout_payment_block() {
    wp_add_inline_script(
        'wc-blocks-checkout',
        "
        const { registerCheckoutBlockExtension } = window.wc.blocksCheckout;
        registerCheckoutBlockExtension( 'woocommerce/checkout-payment-block', {
            position: 'before',
            target: 'woocommerce/checkout-order-summary-block',
        } );
        "
    );
}

这段代码的原理是通过注册结账区块扩展，把支付选项区块挂载到订单摘要区块的前面，保存代码后刷新结账页面就能看到效果啦。

方法二：自定义CSS调整布局（适合快速临时调整） #

如果不想改代码，也可以用CSS来调整位置，不过这种方法更适合布局结构比较固定的场景，在主题的自定义CSS里添加：

@media (min-width: 768px) {
    .wc-block-checkout__sidebar {
        display: flex;
        flex-direction: column;
    }
    .wc-block-checkout__payment-method {
        order: -1;
        margin-bottom: 20px;
    }
}

这段CSS会在屏幕宽度大于768px时，把右侧栏的支付选项模块调整到订单摘要的前面，记得根据自己的主题样式微调间距数值哦。

提醒一下，修改主题文件前最好先备份，或者用子主题来操作，避免主题更新后代码丢失~

备注：内容来源于stack exchange，提问作者karen