WooCommerce : Hide shipping calculator depending on selected shipping method

Question

I'm trying to hide the shipping calculator on my cart page (using jQuery) depending on which shipping method is selected, first on page load, and then when a user selects another method or updates the cart, that would enable / disable new shipping methods but I can't seem to make it work.

My Javascript / jQuery is pretty rusty so I don't know what I'm doing wrong.

The code bellow is what I've tried so far. It does work like I want on page load (= if "free shipping" is selected OR if it's the only available shipping method, the shipping calculator will be hidden.

But then when I choose another shipping method, the shipping calculator won't show up again unless I manually reload the page.

It won't work either if the cart is updated with extra product quantities (by increasing the amount of products directly on the cart page) to reach the minimum amount to have free shipping.

jQuery(document).ready(function() {
    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
        jQuery(".woocommerce-shipping-calculator").css("display","none");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block");

    }
});


jQuery("input[type=radio]").click(function() {
    if(jQuery("*[id*=free_shipping]").is(':checked')){
        jQuery(".woocommerce-shipping-calculator").css("display","none !important");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block !important");

    }
})

Any help would be highly appreciated !

Thanks

Answer 1

Try the following script, it will work. In fact, on each radio box selection, shipping selector was reloading and whenever you reload an HTML element so .click() event requires a new binding with that. In jQuery we used to call it .live() earlier and now we use .on(). It keeps the binding intact with the new reloaded element with the same selector or identity.

jQuery(document).ready(function($) {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
    jQuery(".woocommerce-shipping-calculator").css("display","none");
}
else{
    jQuery(".woocommerce-shipping-calculator").css("display","block");

}    
jQuery('body').on('click', "input[type=radio]",function() {
 
  if(jQuery("*[id*=free_shipping]").is(':checked')){
    setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);          
  }
  else{
    setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
  }  
});
});

Answer 2

thanks a lot for your explanation and code.

It almost works perfectly except when I try to update my cart. If I have a cart worth enough to trigger free shipping (over 150€) and then I remove a product to have a cart bellow 150€ and click "update cart", then regular shipping methods will show but the shipping calculator won't be displayed again. To have it showing again I'll have to click on one of the shipping methods' radio button.

I've tried to tweek the code you gave me doing something like that but couldn't make it work :/

jQuery(document).ready(function($) {
    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
        jQuery(".woocommerce-shipping-calculator").css("display","none");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block");

    }

    jQuery('body').on('click', "input[type=radio]",function() {

      if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
        setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);
      }
      else{
        setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
      } 
    });
});


jQuery("input[type=submit]").on('click', function() {

    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
      setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);
    }
    else{
      setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
    } 
  });

I've tried with ".button" instead of "input[type=submit]" and also tried to put this piece of extra code inside the whole jQuery(document).ready(function($) {[...]}).

Also I do have another question : hidding / showing the shipping calculator won't mess with inner WooCommerce functionning right ? Because I've posted on wordpress.org too and someone from Woo Support told me it was fairly complex development topic. So i'm wondering if I should not do it ?

Thanks again !