Override frontend JS for Woocommerce Checkout

Question

I need to hide the billing address, city, state and zip fields when the checkout page is loaded in order to use our address validation script. The code below accomplishes what we want but it does it too late in the process. You see the fields until it runs the updated_checkout event which is too late in the process. However running it on init_checkout seems to be too early as there is something else forcing those fields to be displayed. Is there something in between init_checkout and updated_checkout that I should be watching for?

jQuery( "body" ).on( "updated_checkout", function() { jQuery("#billing_country_field, #billing_address_1_field #billing_address_2_field, #billing_city_field, #billing_state_field, #billing_postcode_field").css("display", "none"); });

Invoke your functionality on both events? jQuery( "body" ).on( "init_checkout updated_checkout", function(){ ... — George
– George, Commented Oct 13, 2017 at 15:07
The problem is that it won't work on init_checkout as there seems to be something else that displays the fields afterwards. — Josh Rives
– Josh Rives, Commented Oct 13, 2017 at 15:30
Here is a demo on page load. dropbox.com/s/f0b6ec7v3meje67/checkout.gif?dl=0 — Josh Rives
– Josh Rives, Commented Oct 13, 2017 at 15:36
Why not just load the script via wp_enqueue_scripts? I've seen other address plugins do this and it works to hide the fields. — Andrew Schultz
– Andrew Schultz, Commented Oct 14, 2017 at 6:33

LoicTheAztec · Accepted Answer · 2017-10-14 07:32:13Z

As the DOM is first loaded, the fields will appear anyway.

I have tried with all available javascript events delegated from "body": added_to_cart adding_to_cart change click country_to_state_changed country_to_state_changing init_checkout update_checkout updated_wc_div wc_fragment_refresh wc_fragment_refreshed. The fields will always appear a bit.

The only way is to hide checkout form when loading with some CSS rules that you will add to your active theme styles.css file:

form.checkout.woocommerce-checkout{ visibility:hidden; opacity:0; }

And a bit of jQuery that will first hide your fields, before displaying the checkout form:

add_filter( 'wp_footer', 'custom_checkout_script' ); function custom_checkout_script( ){ if( ! is_checkout() ) return; ?> <script type="text/javascript"> jQuery(function($){ var events = 'update_checkout', billingFields = '#billing_country_field,#billing_address_1_field,#billing_address_2_field'; billingFields += ',#billing_city_field,#billing_state_field,#billing_postcode_field'; $('body').on( events, function(){ $(billingFields).hide( 0,function(){ $('form.checkout.woocommerce-checkout').css('visibility','visible').fadeIn({ duration: 1000 }); }); }); }); </script> <?php }

This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

All code is tested on Woocommerce 3+ and works.

While this doesn't solve the issue, it seems to be the best option at the moment. Thanks

Collectives™ on Stack Overflow

Override frontend JS for Woocommerce Checkout

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related