CODEWITHSUNDEEP
jquerywordpresswoocommercecheckoutshipping-method
Jonathan
Jonathan

Reputation: 13

Hide specific element based on shipping method in WooCommerce checkout

I'm adding a code snippet for the Woocommerce to hide a div on the checkout page when the shipping method pickup is selected.

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

I got this code from this link: jQuery on checkout page for change of shipping method - hide show div 50% works and I changed the div name by using the class of the div I want to hide.

However, I get an error when I try to save and activate this snippet.

Don't Panic

The code snippet you are trying to save produced a fatal error on line 3:

syntax error, unexpected 'var' (T_VAR)

The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

How do I fix this?

Upvotes: 1

Views: 622

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253869

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

Upvotes: 1

Related Questions