Show Or Hide WooCommerce Checkout Fields Based On Checked Radio Button
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
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.
Related Questions
- → "failed to open stream" error when executing "migrate:make"
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → October CMS - Conditionally Load a Different Page
- → How to disable assets combining on development in OctoberCMS
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → OctoberCms component: How to display all ID(items) instead of sorting only one ID?
- → In OctoberCMS how do you find the hint path?
- → How to register middlewares in OctoberCMS plugin?