Remove selected checkout fields with woocommerce depending on shipping method - wordpress

Question

Hello so I'm trying to figure out how to remove some billing fields using woocommerce checkout depending on the shipping method selected. So with this code I'm trying to unset the billing address, billing city, billing state and billing postcode when the customer selects local shipping but this code isn't working. Any help would be appreciated.
add_filter('woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields');
function xa_remove_billing_checkout_fields($fields) {
$shipping_method ='local_pickup:1'; // Set the desired shipping method to hide the checkout field(s).
global $woocommerce;
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping = $chosen_methods[0];
if ($chosen_shipping == $shipping_method) {
unset($fields['billing']['billing_address_1']); // Add/change filed name to be hide
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_postcode']);
}
return $fields;
}

Answer 1

Here's how I would go about solving this problem.
This will involve php, css, and javascript (jQuery).
PHP
add_filter( 'woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields' );
function xa_remove_billing_checkout_fields( $fields ) {
// change below for the method
$shipping_method ='local_pickup:1';
// change below for the list of fields
$hide_fields = array( 'billing_address_1', 'billing_address_2', 'billing_city', 'billing_state', 'billing_postcode' );
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
// uncomment below line and reload checkout page to check current $chosen_methods
// print_r($chosen_methods);
$chosen_shipping = $chosen_methods[0];
foreach($hide_fields as $field ) {
if ($chosen_shipping == $shipping_method) {
$fields['billing'][$field]['required'] = false;
$fields['billing'][$field]['class'][] = 'hide';
}
$fields['billing'][$field]['class'][] = 'billing-dynamic';
}
return $fields;
}
Instead of unsetting the fields, we will just alter it's requiredness.
That means, if the chosen method is the one we want to check, we will not make it required. Then we will add a hide class. With this, we can hide these fields using css. And woocommerce will not throw an error that it is required. Using jQuery, we can show/hide these fields. So if we unset it on the first run, there's nothing to show because the fields are not there in the first place and with that the page needs to reload.
So here's the javascript and the css part.
add_action( 'wp_footer', 'cart_update_script', 999 );
function cart_update_script() {
if (is_checkout()) :
?>
<style>
.hide {display: none!important;}
</style>
<script>
jQuery( function( $ ) {
// woocommerce_params is required to continue, ensure the object exists
if ( typeof woocommerce_params === 'undefined' ) {
return false;
}
$(document).on( 'change', '#shipping_method input[type="radio"]', function() {
// change local_pickup:1 accordingly
$('.billing-dynamic').toggleClass('hide', this.value == 'local_pickup:1');
});
});
</script>
<?php
endif;
}