WooCommerce: Show or hide checkout fields and sections based on chosen shipping method

Question

I have a woocommerce checkout page and I have managed to find and manipulate the code below where based on the shipping method selected, it will hide/display delivery fields, pickup fields, billing fields and a whole shipping section via toggling the class:

/* This piece of code will hide fields for the chosen method.
.hide_pickup {
    display: none !important;
}
*/
 
// Hide Local Pickup shipping method
add_filter( 'woocommerce_checkout_fields', 'hide_local_pickup_method' );
function hide_local_pickup_method( $fields_pickup ) {
    // change below for the method
    $shipping_method_pickup ='local_pickup:2';
    // change below for the list of fields. Add (or delete) the field name you want (or don’t want) to use
    $hide_fields_pickup = array( 'billing_company', 'billing_state');
 
    $chosen_methods_pickup = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping_pickup = $chosen_methods_pickup[0];
 
    foreach($hide_fields_pickup as $field_pickup ) {
        if ($chosen_shipping_pickup == $shipping_method_pickup) {
            $fields_pickup['billing'][$field_pickup]['required'] = false;
            $fields_pickup['billing'][$field_pickup]['class'][] = 'hide_pickup';
        }
        $fields_pickup['billing'][$field_pickup]['class'][] = 'billing-dynamic_pickup';
    }
    return $fields_pickup;
}
// Local Pickup - hide fields
add_action( 'wp_head', 'local_pickup_fields', 999 );
function local_pickup_fields() {
    if (is_checkout()) :
    ?>
    <style>
        .hide_pickup {display: none!important;}
        .hide_shipping {display: none!important;}
        .hide_delivery_date_field {display: none!important;}
        .hide_delivery_time_field {display: none!important;}
        .hide_pickup_date_field {display: none!important;}
        .hide_pickup_time_field {display: none!important;}
    </style>
    <script>
        jQuery( function( $ ) {
            if ( typeof woocommerce_params === 'undefined' ) {
                return false;
            }
            $(document).on( 'change', '#shipping_method input[type="radio"]', function() {
                // change local_pickup:4 accordingly
            $('.billing-dynamic_pickup').toggleClass('hide_pickup', this.value == 'local_pickup:2');
            $('.woocommerce-shipping-fields').toggleClass('hide_shipping', this.value == 'local_pickup:2');
            $('#coderockz_woo_delivery_delivery_date_section').toggleClass('hide_delivery_date_field', this.value == 'local_pickup:2'); 
            $('#coderockz_woo_delivery_delivery_time_section').toggleClass('hide_delivery_time_field', this.value == 'local_pickup:2'); 
            $('#coderockz_woo_delivery_pickup_date_section').toggleClass('hide_pickup_date_field', this.value == 'flat_rate:1' || this.value == 'free_shipping:3'); 
            $('#coderockz_woo_delivery_pickup_time_section').toggleClass('hide_pickup_time_field', this.value == 'flat_rate:1' || this.value == 'free_shipping:3'); 
            });
        });
    </script>
    <?php
    endif;
}

Now this works fine if I am on the page and toggle the shipping method. The only issue is that it doesn't work when I select a shipping method on the previous page and then proceed to the checkout page. Below is what I added to try to fix this but it doesn't hide the sections I was hoping.

  add_filter('woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields');

function xa_remove_billing_checkout_fields($fields) {
$shipping_flat_rate ='flat_rate:1'; // Set the desired shipping method to hide the checkout field(s).
$shipping_pickup ='local_pickup:2'; // Set the desired shipping method to hide the checkout field(s).
$shipping_free ='free_shipping:3'; // Set the desired shipping method to hide the checkout field(s).
global $woocommerce;
    
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_state']);
    
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping = $chosen_methods[0];

if ($chosen_shipping == $shipping_flat_rate  || $chosen_shipping == $shipping_free) {
//hide local pickup date field
//hide local pickup time field  
unset($fields['order']['coderockz_woo_delivery_pickup_date_field']);
unset($fields['order']['coderockz_woo_delivery_pickup_time_field']);
    
    ?>
    <script type="text/javascript">
 
    jQuery('#coderockz_woo_delivery_pickup_date_section').hide();
    jQuery('#coderockz_woo_delivery_pickup_time_section').hide();
</script>
<?php
     
} else if ($chosen_shipping == $shipping_pickup) {
//hide delivery date field
//hide delivery time field
//hide shipping section 
    ?>
<script type="text/javascript">
jQuery('#coderockz_woo_delivery_delivery_date_section').hide();
jQuery('#coderockz_woo_delivery_delivery_time_section').hide(); 
jQuery('.woocommerce-shipping-fields').hide();  
</script>
<?php
}
return $fields;
    
}

LoicTheAztec LoicTheAztec · Accepted Answer · 2021-04-17T00:51:20

You just need some small changes in your jQuery code (removed some useless code):

<script>
jQuery( function($) {
    function toggleFieldsClasses( value ) {
        // change local_pickup:4 accordingly
        $('.billing-dynamic_pickup').toggleClass('hide_pickup', value == 'local_pickup:2');
        $('.woocommerce-shipping-fields').toggleClass('hide_shipping', value == 'local_pickup:2');
        $('#coderockz_woo_delivery_delivery_date_section').toggleClass('hide_delivery_date_field', value == 'local_pickup:2'); 
        $('#coderockz_woo_delivery_delivery_time_section').toggleClass('hide_delivery_time_field', value == 'local_pickup:2'); 
        $('#coderockz_woo_delivery_pickup_date_section').toggleClass('hide_pickup_date_field', value == 'flat_rate:1' || value == 'free_shipping:3'); 
        $('#coderockz_woo_delivery_pickup_time_section').toggleClass('hide_pickup_time_field', value == 'flat_rate:1' || value == 'free_shipping:3');
    }
    
    // Once DOM is loaded
    toggleFieldsClasses( $('#shipping_method input[type="radio"]:checked').val() );
    
    // On change
    $( document.body ).on( 'change', '#shipping_method input[type="radio"]', function() {
        toggleFieldsClasses( this.value );
    });
});
</script>

Untested, it should work now as expected when coming from cart to checkout page.

WooCommerce: Show or hide checkout fields and sections based on chosen shipping method

1 Answers