Show or hide WooCommerce registration fields based on a selected field value

I added 2 custom fields to the registration form, and I need to hide them depending on the user's chosen "agent" role, but I can't do it, here are my code examples, I will be glad of any help. //that's how I added the fields that need to be hidden if the agent user role is selected add_action('woocommerce_register_form_start', 'text_domain_woo_reg_form_fields'); function text_domain_woo_reg_form_fields() { ?> <p class="form-row form-row-first"> <label for="billing_company"><?php _e('Name Company', 'text_domain'); ?><span class="required">*</span></label> <input type="text" class="input-text" name="billing_company" id="billing_company" value="<?php if (!empty($_POST['billing_company'])) esc_attr_e($_POST['billing_company']); ?>" /> </p> <p class="form-row form-row-last"> <label for="billing_product"><?php _e('Company Product', 'text_domain'); ?><span class="required">*</span></label> <input type="text" class="input-text" name="billing_product" id="billing_product" value="<?php if (!empty($_POST['billing_product'])) esc_attr_e($_POST['billing_product']); ?>" /> </p> <div class="clear"></div> <?php } //Thats how I tried to hide the fields add_action( 'woocommerce_register_form', 'hide_show_field', 9999 ); function hide_show_field() { wc_enqueue_js( " $('#reg_role').keyup(function() { if ($(this).val().length == 'subscriber') { $('#billing_company').hide(); } else { $('#billing_product').hide(); } }); " ); } //adding a role selection field add_action( 'woocommerce_register_form', 'wc_extra_registation_fields' ); function wc_extra_registation_fields() { ?> <p class="form-row form-row-first"> <label for="reg_role"><?php _e( 'Agent?', 'woocommerce' ); ?></label> <select class="input-text" name="role" id="reg_role"> <option <?php if ( ! empty( $_POST['role'] ) && $_POST['role'] == 'customer') esc_attr_e( 'selected' ); ?> value="customer">Client</option> <option <?php if ( ! empty( $_POST['role'] ) && $_POST['role'] == 'subscriber') esc_attr_e( 'selected' ); ?> value="subscriber">Agent</option> </select> </p> <?php }

Try the following revisited code that handle show/hide fields based on selected user role, validate the correct field (optional) and save the field value to database. // Display fields in registration account form add_action('woocommerce_register_form_start', 'display_account_registration_field'); function display_account_registration_field() { wc_enqueue_js("var role = $('select[name=role]').val(); function showHideRegFields( role ) { if ( role == 'subscriber') { $('#billing_company_field').hide(); $('#billing_product_field').show(); } else { $('#billing_company_field').show(); $('#billing_product_field').hide(); } console.log(role); // For testing, to be removed } showHideRegFields( role ); $(document.body).on('change', 'select[name=role]', function() { showHideRegFields( $(this).val() ); });"); $role = isset($_POST['role']) && ! empty($_POST['role']) ? $_POST['role'] : 'customer'; ?> <p class="form-row form-row-first"> <label for="reg_role"><?php _e( 'Agent?', 'woocommerce' ); ?></label> <select class="input-text" name="role" id="reg_role"> <option value="customer"<?php echo $role === 'customer' ? ' selected' : '';?> ><?php _e( 'Client', 'woocommerce' ); ?></option> <option value="subscriber"<?php echo $role === 'subscriber' ? ' selected' : '';?> ><?php _e( 'Agent', 'woocommerce' ); ?></option> </select> </p> <p class="form-row form-row-last" id="billing_company_field" style="display:none;"> <label for="billing_company"><?php _e('Name Company', 'text_domain'); ?><span class="required">*</span></label> <input type="text" class="input-text" name="billing_company" id="billing_company" value="<?php if (!empty($_POST['billing_company'])) esc_attr_e($_POST['billing_company']); ?>" /> </p> <p class="form-row form-row-last" id="billing_product_field" style="display:none;"> <label for="billing_product"><?php _e('Company Product', 'text_domain'); ?><span class="required">*</span></label> <input type="text" class="input-text" name="billing_product" id="billing_product" value="<?php if (!empty($_POST['billing_product'])) esc_attr_e($_POST['billing_product']); ?>" /> </p> <div class="clear"></div> <?php } // registration Field validation add_filter( 'woocommerce_registration_errors', 'account_registration_field_validation', 10, 3 ); function account_registration_field_validation( $errors, $username, $email ) { if ( $_POST['role'] === 'customer' && isset($_POST['billing_company']) && empty($_POST['billing_company']) ) { $errors->add( 'billing_company_error', __( 'Name Company is a required field', 'woocommerce' ) ); } if ( $_POST['role'] === 'subscriber' && isset($_POST['billing_product']) && empty($_POST['billing_product']) ) { $errors->add( 'billing_product_error', __( 'Company Product is a required field', 'woocommerce' ) ); } return $errors; } // Save registration Field value add_action( 'woocommerce_created_customer', 'save_account_registration_field' ); function save_account_registration_field( $customer_id ) { if ( $_POST['role'] === 'customer' && isset($_POST['billing_company']) && ! empty($_POST['billing_company']) ) { update_user_meta( $customer_id, 'billing_company', sanitize_text_field( $_POST['billing_company'] ) ); } if ( $_POST['role'] === 'subscriber' && isset($_POST['billing_product']) && ! empty($_POST['billing_product']) ) { update_user_meta( $customer_id, 'billing_product', sanitize_text_field( $_POST['billing_product'] ) ); } } Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

December 29, 2023