Hide specific element based on shipping method in WooCommerce checkout

Solution:

As you are setting in the code a specific shipping method rate Id local_pickup:2 and not targeting all Local pickup shipping methods, you should replace:

if ( val.match( "^local_pickup:2" ) ) {

with:

if ( 'local_pickup:2' === val ) {

It will solve your issue…


Now your code should be better set as follows:

jQuery(document.body).on('change', 'input[name^="shipping_method"]', function() {
    if ( 'local_pickup:2' === jQuery(this).val() ) {
        jQuery('.lds_plugin').slideUp(); // hide shipping address
    } else {
        jQuery('.lds_plugin').slideDown(); // show shipping address
        // scroll to top of shipping address
        jQuery(document.body).animate({
            scrollTop: jQuery('.lds_plugin').offset().top - 120
        }, 1500);
    }
});

or in an external javascript file like:

jQuery( function($){
    $(document.body).on('change', 'input[name^="shipping_method"]', function() {
        if ( 'local_pickup:2' === $(this).val() ) {
            $('.lds_plugin').slideUp(); // hide shipping address
        } else {
            $('.lds_plugin').slideDown(); // show shipping address
            // scroll to top of shipping address
            $(document.body).animate({
                scrollTop: $('.lds_plugin').offset().top - 120
            }, 1500);
        }
    });
});