Hide shipping calculator depending on selected shipping method

  • Resolved alexis888

    (@alexis888)


    4 years, 2 months ago

    Hello,
    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 ammount 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

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support RK a11n

    (@riaanknoetze)

    Hi there,

    This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

    You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

    Thread Starter alexis888

    (@alexis888)

    Hello @riaanknoetze ,

    can doing what i’m trying to achieve mess with WooCommerce inner functionning ( I mean mess things up when someone places an order) ?

    I’ve posted on Stack Overflow too and someone got me on the right way with just some “basic” Javascript / jQuery : https://stackoverflow.com/questions/64004661/woocommerce-hide-shipping-calculator-depending-on-selected-shipping-method/

    Thanks !

    Plugin Support Damianne P (a11n)

    (@drwpcom)

    Hi @alexis888. Without analyzing your code, I’m going to answer generally here. WooCommerce has many hooks and filters specifically to allow customization. The system is quite robust. It sounds like you’re keeping the elements of an order but modifying what shows on the front end. I don’t anticipate that causing any issues, but it’s a good idea to stress test any customizations that you add to your site.

    I hope that helps! I’m going to go ahead and mark this thread as resolved, but please start a new thread if you have any other questions.

    Thread Starter alexis888

    (@alexis888)

    Hey @drwpcom , thanks for your answer.
    I gave the code from Stack Overflow a try and it seems to work without messing with Woo !

    Best regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hide shipping calculator depending on selected shipping method’ is closed to new replies.