Отменить интерфейс JS для Woocommerce Checkout

Question

Мне нужно скрыть поля адреса выставления счета, города, штата и почтового индекса при загрузке страницы оформления заказа, чтобы использовать наш скрипт проверки адреса. Код ниже выполняет то, что мы хотим, но делает это слишком поздно в процессе. Вы видите поля, пока он не запускает updated_checkout событие, которое слишком поздно в процессе. Однако работает на init_checkout кажется, слишком рано, потому что есть что-то еще, заставляющее эти поля отображаться. Есть ли что-то между init_checkout а также updated_checkout что я должен следить?

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

Поскольку DOM загружен впервые, поля появятся в любом случае.

Я пытался со всеми доступными событиями JavaScript, делегированными из "тела": added_to_cartadding_to_cartchangeclickcountry_to_state_changedcountry_to_state_changinginit_checkoutupdate_checkoutupdated_wc_divwc_fragment_refreshwc_fragment_refreshed, Поля всегда будут появляться немного.

Единственный способ - скрыть форму проверки при загрузке с некоторыми правилами CSS, которые вы добавите в свою активную тему. styles.css файл:

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

И немного jQuery, который сначала скроет ваши поля перед отображением формы оформления заказа:

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
}

Этот код находится в файле function.php вашей активной дочерней темы (или темы), а также в любом файле плагина.

Весь код протестирован на Woocommerce 3+ и работает.