在 Woocommerce 结帐页面上显示运费计算器答案

【问题标题】：Display a shipping calculator on Woocommerce checkout page在 Woocommerce 结帐页面上显示运费计算器
【发布时间】：2018-08-28 19:54:53
【问题描述】：

我想在结帐页面上显示运费计算器，Woocommerce 默认运费计算器，当我们从 woocommerce->setting->shippings->shipping options-> 在购物车页面启用计算时，它会在购物车页面上显示计算，

如何显示任何人都可以分辨，

提前致谢。

【问题讨论】：

结帐页面上不需要（也不可能）。它会产生错误（或问题），因为运费计算器显示的字段已经作为结帐字段存在。所以你最好换个方式重新考虑。

标签： woocommerce shipping

【解决方案1】：

需要通过将该文件复制到您的子主题中来覆盖每个 woocommerce 文件。

此外，在 woocommerce 后端中，必须选中该选项，该选项告诉在购物车页面上显示运费计算器（因为这将显示计算器）

在第一个 tr 之前将以下代码添加到 woocommerce/cart/cart-shipping.php 文件中（您将在文件中找到）

if(is_checkout() && !$show_shipping_calculator && 'yes' === get_option( 'woocommerce_enable_shipping_calc' )  ) {
        $show_shipping_calculator = true;
}

将以下代码添加到您的子主题的 fuctions.php 中

add_action( 'wp_enqueue_scripts', 'test_test' );
        function test_test() {
            if( is_checkout() ) {
                if( wp_script_is( 'wc-cart', 'registered' ) && !wp_script_is( 'wc-cart', 'enqueued' ) ) {
                wp_enqueue_script( 'wc-cart' );
            }
        }
    }

现在我们需要在运费计算器的更新总计按钮中添加 id 标签，为此，在 woocommerce/cart/shipping-calculator.php 页面中找到具有 name="calc_shipping" 的按钮并在该按钮中添加 id 标签 ====> id="calc_shipping"

注意 ==> 这是我们在 jQuery 中绑定按钮单击事件完成的，您可以使用任何其他替代方式（如果您愿意）

现在是最后一步，

在您的子主题的 js 文件中添加以下 jquery 代码

 jQuery(document).on('click','#calc_shipping',function(e){

                    e.preventDefault();

                    var shipping_country_val    =    jQuery("#calc_shipping_country").val();
                    var shipping_state_val      =    jQuery("#calc_shipping_state").val();
                    var shipping_city_name      =    jQuery("#calc_shipping_city").val();
                    var shipping_postcode       =    jQuery("#calc_shipping_postcode").val();

                    jQuery("#billing_country").val(shipping_country_val);
                    jQuery("#billing_state").val(shipping_state_val);
                    jQuery('#billing_city').val(shipping_city_name);
                    jQuery('#billing_postcode').val(shipping_postcode);
                    jQuery("#shipping_country").val(shipping_country_val);
                    jQuery("#shipping_state").val(shipping_state_val);
                    jQuery('#shipping_city').val(shipping_city_name);
                    jQuery('#shipping_postcode').val(shipping_postcode);

                    $('#billing_country , #shipping_country').trigger('change');
                    $('#billing_state, #shipping_state').trigger('change');
            });

【讨论】：