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;
}