Show or hide WooCommerce checkout fields based on checked radio button - php

Question

Dears,
i'm using snippet plugin to add my code to my ecommerace project , i have pickup and delivery plugin in my delivery option , what i'm trying to do is , once i select pickup option , customer address information fields will be hide which it is not logical to keep it appear and mandatory if pickup from restaurant selected.
snippet return error syntax error, unexpected '(', expecting variable (T_VARIABLE) or '{' or '$'
which it related for replacing <?php > with but thats not working also , sorry for confusing i'm new with programming and looking forward to have your support
my project checkout page.
https://www.order.ramadaencorekuwait.com/checkout-2/
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="pickup"]').is(':checked') && $('input[value="delivery"]').is(':unchecked')) {
$('input[value="billing_address_4"]').hide();
}
else {
$('input[value="billing_address_4"]').show();
}
});
});
Thank you.

Answer 1

There are some mistakes in your code. Use the following to show / hide a custom checkout field based on radio button choice:
add_action('wp_footer', 'custom_checkout_js_script');
function custom_checkout_js_script() {
if( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script language="javascript">
jQuery( function($){
var a = 'input[name="pi_delivery_type"]:checked',
b = 'input[name="billing_address_4"]';
// Custom function that show hide specific field, based on radio input value
function showHideField( value, field ){
if ( value === 'pickup' ) {
$(field).parent().parent().hide();
} else {
$(field).parent().parent().show();
}
}
// On start after DOM is loaded
showHideField( $(a).val(), b );
// On radio button change live event
$('form.woocommerce-checkout').on('change', a, function() {
showHideField( $(this).val(), b );
});
});
</script>
<?php
endif;
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.