php - Displaying custom checkout fields based on a selector choice -

based on working answer:
custom dropdown selector showing or hiding other checkout custom fields

in woocommerce checkout page use code below create additional custom fields , reorder checkout fields. use jquery script show/hide fields based on selector choice.

here new code:

// registering external jquery/js file function cfields_scripts() {  /* important note: child theme replace get_template_directory_uri() get_stylesheet_directory_uri()                    external cfields.js file goes in subfolder "js" of active child theme or theme.*/  wp_enqueue_script( 'checkout_script', get_template_directory_uri().'/js/cfields.js', array('jquery'), '1.0', true ); } add_action( 'wp_enqueue_scripts', 'cfields_scripts' );   add_filter( 'woocommerce_checkout_fields', 'custom_checkout_billing_fields' ); function custom_checkout_billing_fields( $fields ) {  // 1. creating additional custom billing fields  // "status" selector $fields['billing']['billing_status']['type'] = 'select'; $fields['billing']['billing_status']['class'] = array('form-row-wide, status-select'); $fields['billing']['billing_status']['required'] = true; $fields['billing']['billing_status']['label'] = __('statut juridic', 'my_theme_slug'); $fields['billing']['billing_status']['placeholder'] = __('alege statutul', 'my_theme_slug'); $fields['billing']['billing_status']['options'] = array(     '1' => __( 'persoana fizica', '' ),     '2' => __( 'persoana juridica', '' ) );  // customizing 'billing_company' field ['required'] $fields['billing']['billing_company']['required'] = false; $fields['billing']['billing_company']['class'] = array('form-row-wide', 'status-group2');  // "nr. registrul comertului" text field $fields['billing']['billing_ser_id']['type'] = 'text'; $fields['billing']['billing_ser_id']['class'] = array('form-row-wide', 'status-group2'); $fields['billing']['billing_ser_id']['required'] = false; $fields['billing']['billing_ser_id']['label'] = __('nr. reg. comert', 'my_theme_slug'); $fields['billing']['billing_ser_id']['placeholder'] = __('introdu numarul', 'my_theme_slug');  // "banca" text field $fields['billing']['billing_bt_id']['type'] = 'text'; $fields['billing']['billing_bt_id']['class'] = array('form-row-wide', 'status-group2'); $fields['billing']['billing_bt_id']['required'] = false; $fields['billing']['billing_bt_id']['label'] = __('banca', 'my_theme_slug'); $fields['billing']['billing_bt_id']['placeholder'] = __('adauga banca', 'my_theme_slug');  // "iban" text field $fields['billing']['billing_ib_id']['type'] = 'text'; $fields['billing']['billing_ib_id']['class'] = array('form-row-wide', 'status-group2'); $fields['billing']['billing_ib_id']['required'] = false; $fields['billing']['billing_ib_id']['label'] = __('iban', 'my_theme_slug'); $fields['billing']['billing_ib_id']['placeholder'] = __('adauga iban-ul', 'my_theme_slug');  // "cif" text field $fields['billing']['billing_cf_id']['type'] = 'text'; $fields['billing']['billing_cf_id']['class'] = array('form-row-wide', 'status-group2'); $fields['billing']['billing_cf_id']['required'] = false; $fields['billing']['billing_cf_id']['label'] = __('cod fiscal', 'my_theme_slug'); $fields['billing']['billing_cf_id']['placeholder'] = __('adauga cif-ul', 'my_theme_slug');   // 3. ordering billing fields  $fields_order = array(     'billing_first_name', 'billing_last_name', 'billing_email',     'billing_phone',      'billing_address_1', 'billing_address_2',     'billing_postcode',   'billing_city',      'billing_country',     'billing_status',     'billing_company',  'billing_ser_id',       'billing_bt_id',     'billing_ib_id', 'billing_cf_id'     ); foreach($fields_order $field) $ordered_fields[$field] = $fields['billing'][$field];  $fields['billing'] = $ordered_fields;   // returning checkout customized billing fields  return $fields;  }   // process checkout add_action('woocommerce_checkout_process',     'my_custom_checkout_field_process'); function custom_checkout_field_process() { // check if set, if not set add error. if ( ! $_post['billing_ser_id'] )     wc_add_notice( __( 'please enter serial id.' , 'my_theme_slug' ), 'error' ); if ( ! $_post['billing_bt_id'] )     wc_add_notice( __( 'please enter serial id.' , 'my_theme_slug' ), 'error' ); if ( ! $_post['billing_ib_id'] )     wc_add_notice( __( 'please enter serial id.' , 'my_theme_slug' ), 'error' ); if ( ! $_post['billing_cf_id'] )     wc_add_notice( __( 'please enter serial id.' , 'my_theme_slug' ), 'error' );    }  // update order meta field value add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta' ); function custom_checkout_field_update_order_meta( $order_id ) { if ( ! empty( $_post['billing_ser_id'] ) )     update_post_meta( $order_id, 'billing_ser_id', sanitize_text_field( $_post['billing_ser_id'] ) ); if ( ! empty( $_post['billing_bt_id'] ) )     update_post_meta( $order_id, 'billing_bt_id', sanitize_text_field( $_post['billing_bt_id'] ) ); if ( ! empty( $_post['billing_ib_id'] ) )     update_post_meta( $order_id, 'billing_ib_id', sanitize_text_field( $_post['billing_ib_id'] ) ); if ( ! empty( $_post['billing_cf_id'] ) )     update_post_meta( $order_id, 'billing_cf_id', sanitize_text_field( $_post['billing_cf_id'] ) );  }   // display field value on order edit page add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1 ); function custom_checkout_field_display_admin_order_meta($order){ echo '<p><strong>'.__('my serial identification').':</strong> ' . get_post_meta( $order->id, 'billing_ser_id', true ) . '</p>'; echo '<p><strong>'.__('my serial identification').':</strong> ' . get_post_meta( $order->id, 'billing_bt_id', true ) . '</p>'; echo '<p><strong>'.__('my serial identification').':</strong> ' . get_post_meta( $order->id, 'billing_ib_id', true ) . '</p>'; echo '<p><strong>'.__('my serial identification').':</strong> ' . get_post_meta( $order->id, 'billing_cf_id', true ) . '</p>'; } 

javascript cfields.js code (incomplete external file):

// file named "cfields.js" goes in subfolder "js" of active child theme or theme  jquery(document).ready(function($){      $('#billing_company_field').hide(function(){         $(this).removeclass("validate-required");     });     $('#billing_ser_id_field').hide(function(){         $(this).removeclass("validate-required");     });     $("#billing_number_id_field").addclass("validate-required");      $("#billing_status").change(function(){         if($("#billing_status option:selected").val() == "2"){             $('#billing_company_field').show(function(){                 $(this).addclass("validate-required");             });             $('#billing_ser_id_field').show(function(){                 $(this).addclass("validate-required");             });         } else if($("#billing_status option:selected").val() == "1"){             $('#billing_company_field').hide(function(){                 $(this).removeclass("validate-required");             });             $('#billing_ser_id_field').hide(function(){                 $(this).removeclass("validate-required");             });         }      });  }); 

as have additional fields , need when billing_status selector on:

1. persoana fizica option value (individual): showing billing_serial custom field.

2. persoana juridica option value (company), 4 more fields appear:

   • billing_company existing field (at first, before billing_serial)
   • billing_registration_id custom field (this field shown, in both cases)
   • billing_bank_id custom field
   • billing_bankno_id custom field
   • billing_cif_id custom field

also display data on thankyou oder receive page , on email notifications.

i haven't find way working. how can make work properly?

thanks in advance.

update here reordering checkout fields in wc 3+

as have add others customs fields , make changes, find below necessary code make work properly. this becoming real development , shouldn't asked in here. try finish have began, answer it.

the difficult thing here avoid woocommerce alert notice on hidden required fields when selector on individual. obliged (with of jquery) imput "no" value in hidden fields.

so when order submitted, custom fields values in order meta data (for individual hidden fields have "no" value. it's possible way.
but can process displayed data , update afterwards, not problem, see…

here php code (which goes in function.php):

 // registering external jquery/js file function cfields_scripts() {      // important note:     // child theme replace get_template_directory_uri() get_stylesheet_directory_uri()     // external cfields.js file goes in subfolder "js" of active child theme or theme.     wp_enqueue_script( 'checkout_script', get_template_directory_uri().'/js/cfields.js', array('jquery'), '1.0', true );  } add_action( 'wp_enqueue_scripts', 'cfields_scripts' );   add_filter( 'woocommerce_checkout_fields', 'ba_custom_checkout_billing_fields' ); function ba_custom_checkout_billing_fields( $fields ) {      // 1. creating additional custom billing fields      // "status" selector     $fields['billing']['billing_status']['type'] = 'select';     $fields['billing']['billing_status']['class'] = array('form-row-wide, status-select');     $fields['billing']['billing_status']['required'] = true;     $fields['billing']['billing_status']['label'] = __('statut juridic', 'theme_domain');     $fields['billing']['billing_status']['placeholder'] = __('alege statutul', 'theme_domain');     $fields['billing']['billing_status']['options'] = array(         '1' => __( 'persoana fizica', 'theme_domain' ),         '2' => __( 'persoana juridica', 'theme_domain' )     );      // "nr. registrul comertului" text field (this field common)     $fields['billing']['billing_ser_id']['type'] = 'text';     $fields['billing']['billing_ser_id']['class'] = array('form-row-wide', 'status-group2');     $fields['billing']['billing_ser_id']['required'] = true; // <== here has "true" shown , need validation     $fields['billing']['billing_ser_id']['label'] = __('nr. reg. comert', 'theme_domain');     $fields['billing']['billing_ser_id']['placeholder'] = __('introdu numarul', 'theme_domain');      // "banca" text field     $fields['billing']['billing_bt_id']['type'] = 'text';     $fields['billing']['billing_bt_id']['class'] = array('form-row-wide', 'status-group2');     $fields['billing']['billing_bt_id']['required'] = false;     $fields['billing']['billing_bt_id']['label'] = __('banca', 'theme_domain');     $fields['billing']['billing_bt_id']['placeholder'] = __('adauga banca', 'theme_domain');      // "iban" text field     $fields['billing']['billing_ib_id']['type'] = 'text';     $fields['billing']['billing_ib_id']['class'] = array('form-row-wide', 'status-group2');     $fields['billing']['billing_ib_id']['required'] = false;     $fields['billing']['billing_ib_id']['label'] = __('iban', 'theme_domain');     $fields['billing']['billing_ib_id']['placeholder'] = __('adauga iban-ul', 'theme_domain');      // "cif" text field     $fields['billing']['billing_cf_id']['type'] = 'text';     $fields['billing']['billing_cf_id']['class'] = array('form-row-wide', 'status-group2');     $fields['billing']['billing_cf_id']['required'] = false;     $fields['billing']['billing_cf_id']['label'] = __('cod fiscal', 'theme_domain');     $fields['billing']['billing_cf_id']['placeholder'] = __('adauga cif-ul', 'theme_domain');       // 2. ordering billing fields      $fields_order = array(         'billing_first_name', 'billing_last_name', 'billing_email',         'billing_phone',      'billing_address_1', 'billing_address_2',         'billing_postcode',   'billing_city',      'billing_country',         'billing_status',     'billing_company',   'billing_ser_id',         'billing_bt_id',      'billing_ib_id',     'billing_cf_id'     );      foreach($fields_order $field)         $ordered_fields[$field] = $fields['billing'][$field];      $fields['billing'] = $ordered_fields;       // 4. returning checkout customized billing fields     return $fields;  }   // process checkout (checking if required fields not empty) add_action('woocommerce_checkout_process', 'ba_custom_checkout_field_process'); function ba_custom_checkout_field_process() {      if ( ! $_post['billing_ser_id'] )         wc_add_notice( __( '<strong>nr. reg. comert</strong> required field.', 'theme_domain' ), 'error' );      if ( ! $_post['billing_bt_id'] )         wc_add_notice( __( '<strong>banca</strong> required field.', 'theme_domain' ), 'error' );      if ( ! $_post['billing_ib_id'] )         wc_add_notice( __( '<strong>iban</strong> required field.', 'theme_domain' ), 'error' );      if ( ! $_post['billing_cf_id'] )         wc_add_notice( __( '<strong>cod fiscal</strong> required field.', 'theme_domain' ), 'error' ); }  // adding/updating meta data order custom-fields values add_action( 'woocommerce_checkout_update_order_meta', 'ba_custom_checkout_field_update_order_meta' ); function ba_custom_checkout_field_update_order_meta( $order_id ) {      $billing_company = $_post['billing_company'];     $billing_ser_id  = $_post['billing_ser_id'];     $billing_bt_id   = $_post['billing_bt_id'];     $billing_ib_id   = $_post['billing_ib_id'];     $billing_cf_id   = $_post['billing_cf_id'];      // individual resetting billing company "" (no value) instead of 'no'     if ( !empty($billing_company) && 'no' == $billing_company )         update_post_meta( $order_id, '_billing_company', '' );      if ( !empty($billing_ser_id) )         update_post_meta( $order_id, '_billing_ser_id', sanitize_text_field( $billing_ser_id ) );      // adding/updating data companies     if ( !empty($billing_bt_id) && 'no' != $billing_bt_id )         update_post_meta( $order_id, '_billing_bt_id', sanitize_text_field( $billing_bt_id ) );      // adding/updating data companies     if ( !empty($billing_ib_id) && 'no' != $billing_ib_id )         update_post_meta( $order_id, '_billing_ib_id', sanitize_text_field( $billing_ib_id ) );      // adding/updating data companies     if ( !empty($billing_cf_id) && 'no' != $billing_cf_id )         update_post_meta( $order_id, '_billing_cf_id', sanitize_text_field( $billing_cf_id ) ); }   // display custom-field title/values on order edit page add_action( 'woocommerce_admin_order_data_after_billing_address', 'ba_custom_checkout_field_display_admin_order_meta', 10, 1 ); function ba_custom_checkout_field_display_admin_order_meta( $order ){      $output = '';     $billing_ser_id = get_post_meta( $order->id, '_billing_ser_id', true );     $billing_bt_id  = get_post_meta( $order->id, '_billing_bt_id',  true );     $billing_ib_id  = get_post_meta( $order->id, '_billing_ib_id',  true );     $billing_cf_id  = get_post_meta( $order->id, '_billing_cf_id',  true );      if ( !empty($billing_ser_id) ){         $output .= '<p><strong>' . __( 'nr. reg. comert', 'theme_domain' ) . ':</strong> ' . $billing_ser_id . '</p>';     }      if ( !empty($billing_bt_id) && 'no' != $billing_bt_id ){         $output .= '<p><strong>' . __( 'banca', 'theme_domain' ) . ':</strong> ' . $billing_bt_id . '</p>';     }      if ( !empty($billing_ib_id) && 'no' != $billing_ib_id ){         $output .= '<p><strong>' . __( 'iban', 'theme_domain' ) . ':</strong> ' . $billing_ib_id . '</p>';     }      if ( !empty($billing_cf_id) && 'no' != $billing_cf_id ){         $output .= '<p><strong>' . __( 'cod fiscal', 'theme_domain' ) . ':</strong> ' . $billing_cf_id . '</p>';     }      echo $output; } 

to display data on customer order view, on thankyou page, my account order view , on email notifications, add 2 code snippets in function.php file:

// displaying data on order view in "customer details" zone add_action('woocommerce_order_details_after_customer_details','ba_add_values_to_order_item_meta', 10, 1 ); function ba_add_values_to_order_item_meta( $order ) {      $output = '';     $billing_ser_id = get_post_meta( $order->id, '_billing_ser_id', true );     $billing_bt_id  = get_post_meta( $order->id, '_billing_bt_id',  true );     $billing_ib_id  = get_post_meta( $order->id, '_billing_ib_id',  true );     $billing_cf_id  = get_post_meta( $order->id, '_billing_cf_id',  true );      if ( !empty($billing_ser_id) )         $output .= '         <tr>             <th>' . __( "nr. reg. comert:", "woocommerce" ) . '</th>             <td>' . $billing_ser_id . '</td>         </tr>';      if ( !empty($billing_bt_id) && 'no' != $billing_bt_id )         $output .= '         <tr>             <th>' . __( "banca:", "woocommerce" ) . '</th>             <td>' . $billing_bt_id . '</td>         </tr>';      if ( !empty($billing_ib_id) && 'no' != $billing_ib_id )         $output .= '         <tr>             <th>' . __( "iban:", "woocommerce" ) . '</th>             <td>' . $billing_ib_id . '</td>         </tr>';      if ( !empty($billing_cf_id) && 'no' != $billing_cf_id )         $output .= '         <tr>             <th>' . __( "cod fiscal:", "woocommerce" ) . '</th>             <td>' . $billing_cf_id . '</td>         </tr>';      echo $output; }   // displaying data on email notifications add_action('woocommerce_email_customer_details','ba_add_values_to_emails_notifications', 15, 4 ); function ba_add_values_to_emails_notifications( $order, $sent_to_admin, $plain_text, $email ) {      $output = '<ul>';     $billing_ser_id = get_post_meta( $order->id, '_billing_ser_id', true );     $billing_bt_id  = get_post_meta( $order->id, '_billing_bt_id',  true );     $billing_ib_id  = get_post_meta( $order->id, '_billing_ib_id',  true );     $billing_cf_id  = get_post_meta( $order->id, '_billing_cf_id',  true );      if ( !empty($billing_ser_id) )         $output .= '<li><strong>' . __( "nr. reg. comert:", "woocommerce" ) . '</strong> <span class="text">' . $billing_ser_id . '</span></li>';      if ( !empty($billing_bt_id) && 'no' != $billing_bt_id )         $output .= '<li><strong>' . __( "banca:", "woocommerce" ) . '</strong> <span class="text">' . $billing_bt_id . '</span></li>';      if ( !empty($billing_ib_id) && 'no' != $billing_ib_id )         $output .= '<li><strong>' . __( "iban:", "woocommerce" ) . '</strong> <span class="text">' . $billing_ib_id . '</span></li>';      if ( !empty($billing_cf_id) && 'no' != $billing_cf_id )         $output .= '<li><strong>' . __( "cod fiscal:", "woocommerce" ) . '</strong> <span class="text">' . $billing_cf_id . '</span></li>';         $output .= '</ul>';      echo $output; } 

javascript cfields.js code (external file):

// file named "cfields.js" goes in subfolder "js" of active child theme or theme  jquery(document).ready(function($){      // common serial id field     if(! $("#billing_ser_id_field").hasclass("validate-required") ){         $("#billing_ser_id_field").addclass("validate-required");     }       // 4 fields hide @ start (if not "persoana juridica")     if($("#billing_status option:selected").val() == "1"){         $('#billing_company_field').hide(function(){             $(this).removeclass("validate-required");             $(this).removeclass("woocommerce-validated");             $('#billing_company').val("no");         });         $('#billing_bt_id_field').hide(function(){             $(this).removeclass("validate-required");             $(this).removeclass("woocommerce-validated");             $('#billing_bt_id').val("no");         });         $('#billing_ib_id_field').hide(function(){             $(this).removeclass("validate-required");             $(this).removeclass("woocommerce-validated");             $('#billing_ib_id').val("no");         });         $('#billing_cf_id_field').hide(function(){             $(this).removeclass("validate-required");             $(this).removeclass("woocommerce-validated");             $('#billing_cf_id').val("no");         });      }      // action selector (showing/hiding , adding/removing classes)     $("#billing_status").change(function(){         // "persoana juridica"         if($("#billing_status option:selected").val() == "2")         {             $('#billing_company_field').show(function(){                 $(this).addclass("validate-required");                 $('#billing_company').val("");             });             $('#billing_bt_id_field').show(function(){                 $(this).children('label').append( ' <abbr class="required" title="required">*</abbr>' );                 $(this).addclass("validate-required");                 $('#billing_bt_id').val("");             });             $('#billing_ib_id_field').show(function(){                 $(this).children('label').append( ' <abbr class="required" title="required">*</abbr>' );                 $(this).addclass("validate-required");                 $('#billing_ib_id').val("");             });             $('#billing_cf_id_field').show(function(){                 $(this).children('label').append( ' <abbr class="required" title="required">*</abbr>' );                 $(this).addclass("validate-required");                 $('#billing_cf_id').val("");             });         }         // "persoana fizica"         else if($("#billing_status option:selected").val() == "1")         {             $('#billing_company_field').hide(function(){                 $(this).removeclass("validate-required");                 $(this).removeclass("woocommerce-validated");                 $('#billing_company').val("no");             });             $('#billing_bt_id_field').hide(function(){                 $(this).children("abbr.required").remove();                 $(this).removeclass("validate-required");                 $(this).removeclass("woocommerce-validated");                 $('#billing_bt_id').val("no");             });             $('#billing_ib_id_field').hide(function(){                 $(this).children("abbr.required").remove();                 $(this).removeclass("validate-required");                 $(this).removeclass("woocommerce-validated");                 $('#billing_ib_id').val("no");             });             $('#billing_cf_id_field').hide(function(){                 $(this).children("abbr.required").remove();                 $(this).removeclass("validate-required");                 $(this).removeclass("woocommerce-validated");                 $('#billing_cf_id').val("no");             });         }      });  }); 

all code has been tested , works

wiki