根据提货和送货按钮显示或隐藏 WooCommerce 结帐字段

Question

我正在使用代码片段插件将我的代码添加到我的电子商务项目中，我的送货选项中有取货和送货插件，我想做的是，一旦我选择取货选项，客户地址信息字段将被隐藏如果选择从餐厅取货，则保持其显示和强制性是不合逻辑的。

我尝试添加一些其他变量，其中一些工作正常，其他变量在加载页面后仍然出现（在加载和选择皮卡之前，它们消失了（例如街道），在加载街道返回后仍然出现

https://www.order.ramadaencorekuwait.com/checkout-2/

如果代码有任何问题，请告诉我

add_action('wp_footer', 'custom_checkout_js_script');

function custom_checkout_js_script() {

    if( is_checkout() && ! is_wc_endpoint_url() ) :

    ?>

    <script language="javascript">

    jQuery( function($){

        var a = 'input[name="pi_delivery_type"]:checked',

            b = 'input[name="billing_address_4"]';

        var d = 'input[name="billing_address_3"]';

        var f = 'input[name="billing_avenue"]';

        var z = 'input[name="billing_address_2"]';

        var s = 'input[name="select2-billing_state-container"]';

        

        

        // Custom function that show hide specific field, based on radio input value

        function showHideField( value, field ){

            if ( value === 'pickup' ) {

                $(field).parent().parent().hide();

            } else {

                $(field).parent().parent().show();

            }

        }

        // On start after DOM is loaded

        showHideField( $(a).val(), b );

        showHideField( $(a).val(), d );

        showHideField( $(a).val(), f );

        showHideField( $(a).val(), z );

        showHideField( $(a).val(), s );

        // On radio button change live event

        $('form.woocommerce-checkout').on('change', a, function() {

            showHideField( $(this).val(), b );

            

            showHideField( $(this).val(), d );

            showHideField( $(this).val(), f );

            showHideField( $(this).val(), z );

            showHideField( $(this).val(), s );

        });

        

    });

    </script>

    <?php

    endif;

}

Answer 1

将类分配给 b、d、f、z 和 s 可能会更简单。如果您已经定义了“a”，那么您可以执行以下操作：$(a).change(function() {&nbsp; &nbsp;if ($(a).val() == 'pickup') {&nbsp; &nbsp; &nbsp; $(".special").hide();&nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; $(".special").show();&nbsp; &nbsp;}});

Answer 2

尝试使用以下代码，当交付方式为本地取货时，该代码会在任何地方禁用提交表单。您应该将 (28): "local_pickup:28" 替换为您的送货方式的 ID。add_action( 'woocommerce_after_checkout_form', 'disable_shipping_local_pickup' );function disable_shipping_local_pickup( $available_gateways ) {&nbsp; &nbsp;// Part 1: Hide shipping based on the static choice @ Cart&nbsp; &nbsp;// Note: "#customer_details .woocommerce-shipping-fields" (formerly "#customer_details .col-2", but was too broad & was also hidding additional fields that aren't shipping related that just happened to be in the second column) strictly depends on your theme&nbsp; &nbsp;$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );&nbsp; &nbsp;$chosen_shipping = $chosen_methods[0];&nbsp; &nbsp;if ( 0 === strpos( $chosen_shipping, 'local_pickup:28' ) ) {&nbsp; &nbsp;?>&nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();&nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp;<?php&nbsp; &nbsp;}&nbsp; &nbsp;// Part 2: Hide shipping based on the dynamic choice @ Checkout&nbsp; &nbsp;// Note: "#customer_details .woocommerce-shipping-fields" (formerly "#customer_details .col-2", but was too broad & was also hidding additional fields that aren't shipping related that just happened to be in the second column) strictly depends on your theme&nbsp; &nbsp;?>&nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;jQuery('form.checkout').on('change','input[name^="shipping_method"]',function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var val = jQuery('input[name^="shipping_method"]:checked').val(); // If it changed, then it must be the radio options so check the one that's selected&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (val.match("^local_pickup:28")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery('#customer_details .woocommerce-shipping-fields').fadeIn();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Also check if the zipcode switched to something where local pickup is the only option (similar to what's done in part 1 above, but happen based on what's currently being entered on the page [watch via ajaxComplete since the options that are available/selected might not be present when the zipcode change happens & it needs to load those in via AJAX])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;jQuery(document).ajaxComplete(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(jQuery('input[name^="shipping_method"]').attr('type') === 'hidden'){ // There's only one option so check the hidden input field with the value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var val = jQuery('input[name^="shipping_method"]').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{ // Otherwise, it must be the radio options so check the one that's selected&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var val = jQuery('input[name^="shipping_method"]:checked').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (val.match("^local_pickup:28")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery('#customer_details .woocommerce-shipping-fields').fadeIn();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp;<?php}