Show or hide checkout postcode field based on chosen city in WooCommerce

paiz92
May 31, 2020
166 views
0 votes
2 Answers

In Woocommerce, I am trying to hide the checkout postcode field if a specific city field is selected. I found a working code that hides the billing phone if company field is empty:

add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_checkout_field', 9999 );
function conditionally_hide_show_checkout_field() {
wc_enqueue_js( "
  jQuery('#billing_company').keyup(function() {
     if (jQuery(this).val().length == 0) {
        jQuery('#billing_phone').hide();
     } else {
        jQuery('#billing_phone').show();
     }
  }).keyup();
");
}

I don’t know how to alter this code to make the required postcode field to be hidden when a specific billing city is selected. Any help is appreciated.

Answers

You can do it like this:

$("#billing_city").on("change", function() {
  if ($(this).val() != "") {
    $("#postcode").removeAttr('required');
  } else {
    $("#postcode").prop("required", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="billing_city">
  <option value="">Select City</option>
  <option value="losangeles">LosAngeles</option>
  <option value="newyork">New York</option>
</select>
<input type="text" id="postcode" placeholder="Postcode" required />

It’s a bit much more complicated and you will need to define the city in the last function.

The following code handles multiple necessary tasks to show / hide the postcode field based on a specific defined selected city:

// Make postcode field optional
add_filter( 'woocommerce_default_address_fields',  'customizing_checkout_fields' );
function customizing_checkout_fields( $fields ) {
    if( is_checkout() ) {
        $fields['postcode']['required'] = false;
    }
    return $fields;
}

// Replace "(optional)" text by required "*"
add_filter( 'woocommerce_form_field' , 'replace_checkout_optional_by_required', 10, 4 );
function replace_checkout_optional_by_required( $field, $key, $args, $value ) {
    // Only on checkout page for postcode field
    if( is_checkout() && ! is_wc_endpoint_url() && in_array($key, ['billing_postcode', 'shipping_postcode']) ) {
        $optional = '<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        $required = '<abbr class="required" title="required">*</abbr>';
        $field = str_replace( $optional, $required, $field );
    }
    return $field;
}

// Hidden input fields for Postcode validation when it's visible
add_action( 'woocommerce_after_order_notes', 'checkout_hidden_field_for_validation', 10, 1 );
function checkout_hidden_field_for_validation( $checkout ) {
    // Hidden field for the phone number validation
    echo '<input type="hidden" name="billing_postcode_check" id="billing_postcode_check" value="">
          <input type="hidden" name="shipping_postcode_check" id="shipping_postcode_check" value="">';
}

// Postcode field validation when it's visible
add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
function wps_select_checkout_field_process() {
    if( isset($_POST['billing_postcode_check']) && $_POST['billing_postcode_check'] === 'yes' 
    && isset($_POST['billing_postcode']) && empty($_POST['billing_postcode']) ) {
        wc_add_notice( __("The billing postcode field is a required field.", "woocommerce"), 'error' );
    }

    if( isset($_POST['shipping_postcode_check']) && $_POST['shipping_postcode_check'] === 'yes' 
    && isset($_POST['shipping_postcode']) && empty($_POST['shipping_postcode']) ) {
        wc_add_notice( __("The shipping postcode is a required field.", "woocommerce"), 'error' );
    }
}

// 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() ) :

     // HERE define the city that will hide postcode field
     $city = 'Paris';

     $required = '&nbsp;<abbr class="required" title="required">*</abbr>';
    ?>
    <script>
        jQuery(function($){
            var bc   = '#billing_city_field input',
                sc   = '#shipping_city_field input',
                bp   = '#billing_postcode_field',
                sp   = '#shipping_postcode_field',
                bpc  = '#billing_postcode_check',
                spc  = '#shipping_postcode_check',
                city = '<?php echo $city; ?>',
                req  = '<?php echo $required; ?>';

            // On "update" checkout form event, replace "(optional)" by required "*"
            $(document.body).on('update_checkout', function(){
                $('#billing_postcode_field label > .optional').replaceWith(req);
            });

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

            // 1. Initialising (on load): Show/hide based on customer city

            // Billing field
            if( $(bc).val() === city || $(bc).val() == '' )
                showHide( bp, 'hide' );
            else
                showHide( bp );

            // Shipping field
            if( $(sc).val() === city || $(sc).val() == '' )
                showHide( sp, 'hide' );
            else
                showHide( sp );

            // 2. Change live event:  Show/hide based on city change

            $( 'form.checkout' ).on( 'change input', bc, function() { // Billing field
                if( $(bc).val() === city )
                    showHide( bp, 'hide' );
                else
                    showHide( bp );
            });

            $( 'form.checkout' ).on( 'change input', sc, function() { // Shipping field
                if( $(sc).val() === city )
                    showHide( sp, 'hide' );
                else
                    showHide( sp );
            });
        });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

Some related answers:

Hidding billing and shipping postcode on load:

Replace:

            // 1. Initialising (on load): Show/hide based on customer city

            // Billing field
            if( $(bc).val() === city || $(bc).val() == '' )
                showHide( bp, 'hide' );
            else
                showHide( bp );

            // Shipping field
            if( $(sc).val() === city || $(sc).val() == '' )
                showHide( sp, 'hide' );
            else
                showHide( sp );

by:

            // 1. Initialising (on load): Hide postcode

            showHide( bp, 'hide' ); // Billing field
            showHide( sp, 'hide' ); // Shipping field

Please signup or login to give your own answer.

Click here to cancel reply.