Show or hide registration fields based on selected value in Woocommerce

Question

I am trying to customize the registration form for my site. I\'ve been using this guide and have successfully created/stored additional fields for my registration form. Gui

Answer 1

The only way to show hide fields is to use Javascript/jQuery as it's a event on client side.

So I have made some small changes to your code adding the necessary jQuery to handle Showing and hiding school_name text field depending on the account_type select field live event choice.

Here are the Two functions that I have changed in your code:

// Get custom fields
if(!function_exists('get_custom_fields')){
    function get_custom_fields(){
        return apply_filters('custom_fields', array(
            'verified_education_acct' => array(
                'type' => 'checkbox',
                'label' => __('Verified?'),
                'required' => false,
                'hide_in_account' => true,
                'hide_in_admin' => false,
                'hide_in_registration' => true,
                'hide_in_checkout' => true
            ),
            'customer_id_num' => array(
                'type' => 'text',
                'label' => __('Customer ID# (Acumatica)'),
                'placeholder' => __('e.g. 1234567890'),
                'required' => false,
                'hide_in_account' => true,
                'hide_in_admin' => false,
                'hide_in_checkout' => true,
                'hide_in_registration' => true
            ),
            'account_type' => array(
                'type' => 'select',
                'label' => __('What type of account will this be?'),
                'class' => array('form-row-wide'),
                'options' => array(
                    '' => __('Select an option...'),
                    1 => __('Education'),
                    2 => __('Standard')
                ),
                'required' => true,
                'hide_in_account' => true,
                'hide_in_admin' => false,
                'hide_in_checkout' => false,
                'hide_in_registration' => false,
                'js_trigger' => true, // <===  <=== Enabling Javascript 
            ),
            'school_name' => array(
                'type' => 'text',
                'label' => __('School Name'),
                'class' => array('form-row-wide off'), // <===  <===  Hidden field
                'placeholder' => __('e.g. North Middle School'),
                'required' => true,
                'hide_in_account' => false,
                'hide_in_admin' => false,
                'hide_in_checkout' => false,
                'hide_in_registration' => false,
                'js_triggered_by' => 'account_type', // <===  JS: field that trigger show/hide
                'js_show_val' => '1', // <===  <=== JS: selected field value that show this field 
            ),
        ));
    }
}

//Add them to User Area
if(!function_exists('print_user_frontend_fields')){
    function print_user_frontend_fields(){
        $fields = get_custom_fields();
        $user_logged_in = is_user_logged_in();
        $enable_js = false; // Initializing
        $data_js = []; // Initializing

        // Hiding conditional field (with "off" class)
        echo '<style>p.form-row.off{display:none;}</style>';

        foreach ($fields as $key => $field_args) {
            if($user_logged_in && !empty($field_args['hide_in_account'])){
                continue;
            }
            if(! $user_logged_in && ! empty($field_args['hide_in_registration'])){
                continue;
            }
            if( isset($field_args['js_trigger']) && $field_args['js_trigger'] ){
                $enable_js = true;
            }
            if( isset($field_args['js_triggered_by']) && $field_args['js_show_val'] ){
                $data_js[$key] = [ $field_args['js_triggered_by'] => $field_args['js_show_val'] ];
            }
            // Form fields output
            woocommerce_form_field($key, $field_args);
        }
        if( $user_logged_in || ! $enable_js ) return; // Exit

        // JQuery code
        ?>
        <script type="text/javascript">
        jQuery( function($){
            var a = <?php echo json_encode($data_js) ?>;
            $.each(a, function(b,o){
                $.each(o, function(k,v){
                    $('#'+k).on('change', function(){
                        var cf = '#'+b+'_field';
                        if ( $(this).val() == v && $(cf).hasClass('off') ) {
                            $(cf).removeClass('off');
                        } else if ( $(this).val() != v && ! $(cf).hasClass('off') ) {
                            $(cf).addClass('off');
                        }
                    });
                });
            });
        });
        </script>
        <?php
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and work.

1) On load, field is hidden.

2) On select "Education", the field is shown.

3) On select "Standard" (or nothing), the field is hidden.

to handle multiple fields you will need to make some changes, as this example is for one field.