Frontend-JS für Woocommerce Checkout überschreiben

Ich muss die Felder für Rechnungsadresse, Stadt, Bundesland und Postleitzahl ausblenden, wenn die Checkout-Seite geladen wird, um unser Adressvalidierungsskript verwenden zu können. Der folgende Code erreicht, was wir wollen, aber er tut es zu spät im Prozess. Sie sehen die Felder, bis es läuft updated_checkout Ereignis, das zu spät im Prozess ist. Läuft aber weiter init_checkout scheint zu früh zu sein, da etwas anderes die Anzeige dieser Felder erzwingt. Gibt es etwas dazwischen init_checkout und updated_checkout auf die ich achten sollte?

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

Da das DOM zum ersten Mal geladen wird, werden die Felder trotzdem angezeigt.

Ich habe es mit allen verfügbaren Javascript-Ereignissen versucht, die von “body” delegiert wurden: 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. Die Felder erscheinen immer ein wenig.

Die einzige Möglichkeit besteht darin, das Checkout-Formular beim Laden mit einigen CSS-Regeln auszublenden, die Sie Ihrem aktiven Design hinzufügen styles.css Datei:

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

Und ein bisschen jQuery, das zuerst Ihre Felder ausblendet, bevor das Checkout-Formular angezeigt wird:

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
}

Dieser Code geht in die function.php-Datei Ihres aktiven Child-Themes (oder Themes) oder auch in jede Plugin-Datei.

Der gesamte Code wurde auf Woocommerce 3+ getestet und funktioniert.