根据所选付款方式启用/禁用 WooCommerce 所需的结帐字段

Question

上述问题的答案对我有帮助，但我仍然有一个问题：根据所选付款方式显示隐藏自定义 Woocommerce 结账字段

我希望当客户选择cheque支付网关时显示电话字段（必填字段），如果选择其他支付网关，则不显示并禁用移动字段。

// Conditional Show hide checkout fields based on chosen payment methods
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    // Only on checkout page
     if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var a = 'input[name="payment_method"]',
                b = a + ':checked',
                c = '#billing_phone_field'; // The checkout field <p> container selector

            // Function that shows or hide checkout fields
            function showHide( selector = '', action = 'show' ){
                if( action == 'show' )
                    $(selector).show( 200, function(){
                        $(this).addClass("validate-required");
                    });
                else
                    $(selector).hide( 200, function(){
                        $(this).removeClass("validate-required");
                    });
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // Initialising: Hide if choosen payment method is "cheque"
            if( $(b).val() !== 'cheque' )
                showHide( c, 'hide' );
            else
                showHide( c );

            // Live event (When payment method is changed): Show or Hide based on "cheque"
            $( 'form.checkout' ).on( 'change', a, function() {
                if( $(b).val() !== 'cheque' )
                    showHide( c, 'hide' );
                else
                    showHide( c );
            });
        });
    </script>
    <?php
    endif;
}

问题是当我选择cheque之外的其他支付网关时，即使电话字段被隐藏，它仍然经过验证并显示错误（账单电话是必填字段） - 并且需要填写此字段，我不想要这个！

Answer 1

以下内容将完成这项工作，添加一个隐藏字段来在计费电话字段可见时处理计费电话验证。当计费电话字段隐藏且为空时，不会提示验证错误，允许静默下单：

// Your settings goes in here
function my_checkout_settings()
{
    return array(
        'payment_id'   => 'cheque', // The payment Id
        'field_key_id' => 'billing_phone', // The checkout field key ID
    );
}

// Add a hidden billing input field for phone validation purpose
add_action('woocommerce_billing_fields', 'add_an_hidden_billing_fields');
function add_an_hidden_billing_fields($billing_fields) {
    extract(my_checkout_settings()); // Load your settings

    // Add a hidden input field
    $billing_fields[$field_key_id . '_is_valid'] = array(
        'type' => 'hidden',
        'required' => false,
        'default' => '',
    );

    return $billing_fields;
}

// Disabling conditionally the Billing phone validation
add_action('woocommerce_after_checkout_validation', 'disable_specific_checkout_field_validation_conditionally', 20, 2);
function disable_specific_checkout_field_validation_conditionally($data, $errors) {
    extract(my_checkout_settings()); // Load your settings

    $validation_key =  $field_key_id . '_is_valid'; // The key Id of the hidden field

    if (empty($data[$field_key_id]) && isset($data[$validation_key]) && $data[$validation_key]) {
        $errors->remove($field_key_id . '_required'); // Remove unwanted error for this field
    }
}

// Conditional Show hide billing phone checkout fields based on chosen payment methods
add_action('woocommerce_checkout_init', 'enqueue_checkout_custom_script');
function enqueue_checkout_custom_script() {
    extract(my_checkout_settings()); // Load your settings

    wc_enqueue_js("const a = 'input[name=payment_method]',
        b = a + ':checked',
        c = '#{$field_key_id}',
        d = c + '_field',
        v = c + '_is_valid',
        p = '{$payment_id}';
    
    function triggerShowHide(b, d, p, v) {
        $(b).val() !== p ? $(d).show(200) : $(d).hide(200);
        $(b).val() !== p ? $(v).val('') : $(v).val('1');
    }
    
    // On the first load
     triggerShowHide(b, d, p, v);
    
    // On payment method 'change' live event
    $('form.checkout').on('change', a, function() {
        triggerShowHide(b, d, p, v);
    });");
}

代码位于活动子主题的

functions.php

文件中（或插件中）。已测试并有效。

Answer 2

您可以使用 jquery

.prop('disabled', true);

和

.prop('disabled', false);

作为输入选择器。尝试下面的代码。

add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    // Only on checkout page
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var a = 'input[name="payment_method"]',
                b = a + ':checked',
                c = '#billing_phone_field'; // The checkout field <p> container selector

            // Function that shows or hides checkout fields
            function showHide( selector = '', action = 'show' ){
                if( action == 'show' ) {
                    $(selector).show( 200, function(){
                        $(this).addClass("validate-required");
                    });
                    $(selector + ' input').prop('disabled', false);
                } else {
                    $(selector).hide( 200, function(){
                        $(this).removeClass("validate-required");
                    });
                    $(selector + ' input').prop('disabled', true);
                }
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // Initialising: Hide if chosen payment method is not "cheque"
            if( $(b).val() !== 'cheque' )
                showHide( c, 'hide' );
            else
                showHide( c );

            // Live event (When payment method is changed): Show or Hide based on "cheque"
            $( 'form.checkout' ).on( 'change', a, function() {
                if( $(b).val() !== 'cheque' )
                    showHide( c, 'hide' );
                else
                    showHide( c );
            });
        });
    </script>
    <?php
    endif;
}

要在未检查支付网关时删除

(Billing Phone is a required field)!

，则可以使用

woocommerce_checkout_fields

钩子。

add_filter( 'woocommerce_checkout_fields', 'conditionally_disable_phone_field_validation' );
function conditionally_disable_phone_field_validation( $fields ) {
    // Only on checkout page
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        $chosen_payment_method = WC()->session->get( 'chosen_payment_method' );

        // Hide and disable phone field if chosen payment method is not "cheque"
        if ( $chosen_payment_method !== 'cheque' ) {
            $fields['billing']['billing_phone']['required'] = false;
            $fields['billing']['billing_phone']['validate'] = array();
        }
    }

    return $fields;
}