Display a shipping calculator on Woocommerce checkout page

Question

I want to show the shipping calculator on checkout page, Woocommerce default shipping calculator which was display the calculations on cart page when we enable from woocommerce->setting->shippings->shipping options-> Enable calculation on cart page,

How to display can any body tell,

Thanks in advance.

This is not needed (and not possible) on checkout page. It will make errors (or problems) as the shipping calculator displayed fields already exist as checkout fields. So you should better rethink that in an other way. — LoicTheAztec

eSparkBiz Team eSparkBiz Team · Accepted Answer · 2018-08-28T12:15:16

Every woocommerce file needs to be overridden by copying that file into your child theme.

Also, In woocommerce backend the option must be checked which tells to Show Shipping Calculator on cart page (As this will show calculator)

Add below code into woocommerce/cart/cart-shipping.php file before first tr (You will found in file)

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

Add below code into your child theme's 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' );
            }
        }
    }

Now we need to add id tag in shipping calculator's update totals button, For that in woocommerce/cart/shipping-calculator.php page find button which has name="calc_shipping" and add id tag in that button ====> id="calc_shipping"

Note ==> This is done by us to bind the button click event in jQuery, You can use your any other alternative way ( If you want )

Now last step,

Add below jquery code in your child theme's js file

 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');
            });

Display a shipping calculator on Woocommerce checkout page

1 Answers