Show or hide WooCommerce checkout fields based on checked radio button

user_14000292 0
Viewed 806

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.

checkout woocommerce wordpress php jquery
1 Answers

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.

user_37307540
Related