CODEWITHSUNDEEP
phpwordpresswoocommerce
pankaj
pankaj

Reputation: 74

Shipping calculator Button at Checkout page

I am new to woocommerce and I do not have much knowledge about that. In a project I want to hide shipping calculation button from cart page.but want to show the same configuration with button on checkout page.

I want help regarding how to add shipping button on checkout.

Upvotes: 0

Views: 3489

Answers (3)

Carlos Tornadijo
Carlos Tornadijo

Reputation: 185

you can fire an event after calc_shipping buton is clicked, but you need to wait native calc_shipping method to end. I used jQuery(document).ajaxComplete to wait that execution:

jQuery('[name="calc_shipping"]').click(function () {
jQuery(document).ajaxComplete(function () {
    your_pretty_code;
});

Upvotes: 1

eSparkBiz Team
eSparkBiz Team

Reputation: 110

All the woocommerce files 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');
            });

Upvotes: 0

Alice
Alice

Reputation: 1433

Go to WooCommerce->Settings->Shipping->Shipping Options

and make sure you have unchecked 'Enable the shipping calculator on the cart page'.

Upvotes: 0

Related Questions