WooCommerce 结账页面布局调整：订单核对模块移至账单信息前实现方法

WooCommerce 结账页的模块默认通过钩子挂载加载，不需要修改核心模板，调整钩子优先级即可实现需求，修改不会被后续版本更新覆盖。

操作步骤 #

• 第一步：移除默认的模块挂载规则
  将以下代码添加到子主题的functions.php文件或者自定义功能插件中：

  // 移除默认的订单核对+支付组合挂载
  remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
  remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
  

• 第二步：按需求顺序重新挂载模块
  继续添加如下代码实现排序：

  // 将订单核对表（<table class="shop_table woocommerce-checkout-review-order-table">）挂载到账单信息之前
  add_action( 'woocommerce_before_checkout_billing_form', 'woocommerce_order_review', 10 );
  
  // 将支付模块（<div id="payment" class="woocommerce-checkout-payment">）挂载到账单信息之后
  add_action( 'woocommerce_after_checkout_billing_form', 'woocommerce_checkout_payment', 10 );
  

• 第三步：样式适配（可选）
  如果调整位置后出现样式错位，可以在主题自定义CSS面板添加样式修正，示例如下：

  .woocommerce-checkout-review-order-table {
    margin-bottom: 30px;
  }
  

注意事项 #

• 不要直接修改父主题、WooCommerce核心文件的代码，避免版本更新后修改内容被覆盖
• 修改完成后清空网站缓存、浏览器缓存再预览效果
• 如果当前主题自定义过结账页钩子，对应调整挂载的钩子名称匹配主题结构即可

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