覆盖前端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");
});

Answer 1

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.