0

I used this answer to hide one specific checkout field (the postcode one) based on chosen shipping method, and it does hide it. However, the first function is supposed to make the field not required so that it doesn't send the empty validation error, and yet the field is still required even when it's not visible.

Here is the shipping method where it's shown, working properly. Checkout field Cédula SHOWN: working fine. Shipping method: flat_rate:5 in code

And here is the shipping method that doesn't show it but still requires it when placing order. Checkout field Cédula HIDDEN: works but still requires it and doesn't allow placing order without it.

Here is the coding that I used. I renamed the post code field as Cédula and that's the one being displayed in the pictures while it's named as postcode in the code, in case it gets confusing.

add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() {

$pickpoint = 'flat_rate:2';
$free_delivery = 'advanced_free_shipping';
$flat_rate = 'flat_rate:5';

$required = esc_attr__( 'required', 'woocommerce' );
?>
<script>
    jQuery(function($){

        var shippingMethod = $('input[name^="shipping_method"]:checked'),
            required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>',
            shippingChecked = $('input#ship-to-different-address-checkbox');

        shippingChecked.change( function(){
            console.log('Shipping Checked: '+shippingChecked.prop('checked'));
        });

        function showHide( actionToDo='show', selector='' ){
            if( actionToDo == 'show' )
                $(selector).show(function(){
                    $(this).addClass("validate-required");
                    $(this).removeClass("woocommerce-validated");
                    $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                    if( $(selector+' > label > abbr').html() == undefined )
                        $(selector+' label').append(required);
                });
            else
                $(selector).hide(function(){
                    $(this).removeClass("validate-required");
                    $(this).removeClass("woocommerce-validated");
                    $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                    if( $(selector+' > label > abbr').html() != undefined )
                        $(selector+' label > .required').remove();
                });
        }

        if( shippingMethod.val() == '<?php echo $pickpoint; ?>' )
        {
            showHide('hide','#billing_postcode_field' );
        }

        else if( shippingMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>')
        {
            showHide('show','#billing_postcode_field');
        }

        $( 'form.checkout' ).on( 'change', 'input[name^="shipping_method"]', function() {
            var shipMethod = $('input[name^="shipping_method"]:checked');
            if( shipMethod.val() == '<?php echo $pickpoint; ?>' )
            {
                showHide('hide','#billing_postcode_field');
            }

            else if( shipMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>')
            {
               showHide('show','#billing_postcode_field');
            }
            else
            {
                showHide('show','#billing_postcode_field');
            }
        });

        $( 'input#ship-to-different-address-checkbox' ).click( function() {
            var shipMethod = $('input[name^="shipping_method"]:checked');
            if( shipMethod.val() == '<?php echo $pickpoint; ?>' && shippingChecked.prop('checked') == true )
            {
                showHide('hide','#billing_postcode_field');

                showHide('hide','#shipping_postcode_field');

            }

            else if( shipMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>' && shippingChecked.prop('checked') == true )
            {
                showHide('show','#billing_postcode_field');

                showHide('show','#shipping_postcode_field');

            }

            else if( shippingChecked.prop('checked') == false )
            {

                showHide('hide','#shipping_postcode_field');

            }
        });
    });
</script>
<?php
}

// Checkout conditional fields validation
add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
function wps_select_checkout_field_process() {
    // HERE your shipping methods rate IDs
    $local_pickup = 'flat_rate:2';
    $pickpoint    = 'flat_rate:5';


    $chosen_shipping_method = WC()->session->get( 'chosen_shipping_methods' )[0];
    $billing                = '<strong> ' . __('', 'woocommerce') . ' ';
    $shipping               = '<strong> ' . __('Shipping', 'woocommerce') . ' ';
    $country                = __('Country.', 'woocommerce');
    $address1               = __('Dirección.', 'woocommerce');
    $postcode               = __('Cédula', 'woocommerce');
    $state                  = __('state.', 'woocommerce');
    $end_text               = '</strong> '. __('es un campo requerido.', 'woocommerce');


    if( $chosen_shipping_method == $pickpoint ) {
        if( empty($_POST['billing_postcode']) )
            wc_add_notice( $billing . $postcode . $end_text, 'error' );

    }
    else {

        if( empty($_POST['billing_postcode']) )
            wc_add_notice( $billing . $postcode . $end_text, 'error' );


    }
}

I know this code worked in previous Woocommerce versions, and the code not working might have to do with that. But I'm hoping there's a way to make it work for the current version and some arrangements to the code. Any help? Thanks in advance.

  • Here is a nice tutorial how to hide, add or make not required defualt fields - https://www.businessbloomer.com/woocommerce-checkout-customization/ – Snuffy Mar 24 '23 at 08:10

0 Answers0