如何在WooCommerce结账页面显示默认运费计算器？

没问题，要把购物车页的默认运费计算器搬到结账页，咱们可以通过WooCommerce的钩子和模板调用轻松实现，具体步骤如下：

第一步：确认基础设置已开启 #

首先确保你已经在 WooCommerce → 设置 → 配送 → 配送选项 里勾选了「启用购物车页面运费计算」——这是前提，只有开启这个，运费计算器的模板和功能才会被系统加载。

第二步：添加自定义代码实现迁移 #

你可以把下面的代码添加到子主题的functions.php文件中，或者使用自定义功能插件（更推荐后者，避免主题更新导致代码丢失）：

// 在结账页面插入默认运费计算器
add_action('woocommerce_before_checkout_shipping_form', 'display_shipping_calculator_on_checkout');
function display_shipping_calculator_on_checkout() {
    // 直接调用系统自带的购物车运费计算器模板
    wc_get_template('cart/shipping-calculator.php');
}

// 可选：如果不需要购物车页再显示计算器，取消下面的注释
// remove_action('woocommerce_cart_totals_before_shipping', 'woocommerce_shipping_calculator');

代码说明： #

• woocommerce_before_checkout_shipping_form是WooCommerce提供的结账页钩子，会在配送信息表单前插入内容，位置刚好适合放置运费计算器。
• wc_get_template('cart/shipping-calculator.php')直接复用系统自带的运费计算器模板，不用自己重新开发逻辑，完美保留原有功能。
• 如果想隐藏购物车页的计算器，只需取消注释最后一行代码，移除对应钩子即可。

第三步：调整样式适配结账页布局 #

因为运费计算器原本是为购物车页设计的，放到结账页可能会有布局错乱的问题，你可以添加一些自定义CSS来调整：

/* 结账页运费计算器样式适配示例 */
.woocommerce-checkout .shipping-calculator-form {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.woocommerce-checkout .shipping-calculator-form .form-row {
    margin-bottom: 10px;
}

把这段CSS添加到子主题的style.css或者WooCommerce后台的「自定义CSS」面板里即可。

完成以上操作后，结账页就会显示和购物车页完全一致的默认运费计算器，用户输入地址后就能实时计算运费啦~

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