为 Woocommerce Checkout 覆盖前端 JS

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 是第一次加载，所以字段无论如何都会出现。

我已经尝试了从 "body" 委派的所有可用 javascript 事件：added_to_cart adding_to_cart change click country_to_state_changed country_to_state_changinginit_checkoutupdate_checkoutupdated_wc_divwc_fragment_refreshwc_fragment_refreshed。字段总是会出现一点。

唯一的方法是在加载一些要添加到活动主题 styles.css 文件的 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+ 上测试并且有效。

为 Woocommerce Checkout 覆盖前端 JS

Override frontend JS for Woocommerce Checkout

php

jquery

wordpress

woocommerce

checkout