wordpress - Radio Buttons to select specific text inputs during checkout in WooCommerce -

i adding custom fields checkout area in woocommerce through child theme's functions.php. have added text inputs, need add 2 radio buttons select/ activate 2 seperate "sets" of text inputs.

basically need way customers able select button a: enter payment info or select button b: , enter po number. need make sure button not selected not write database , hold / produce errors during checkout.

if go products page , add product, navigate checkout area can see have done. code below:

add_action('woocommerce_after_order_notes', 'custom_checkout_field'); function custom_checkout_field( $checkout ) {  echo '<div id="payment_info"><h3>'.__('payment information').'</h3>';  woocommerce_form_field( 'credit_card_name', array(     'type'          => 'text',     'class'         => array('form-row-wide'),     'label'         => __('name on credit card'),     'required'    => true,     'placeholder'       => __(''),     ), $checkout->get_value( 'credit_card_name' ));  woocommerce_form_field( 'card_type', array(     'type'          => 'select',     'class'         => array(''),     'label'         => __('card type'),     'required'    => true,     'placeholder'       => __(''),     'options'     => array(     'american express' => __('american express'),     'discover' => __('discover'),     'mastercard' => __('mastercard'),     'visa' => __('visa')     )), $checkout->get_value( 'card_type' ));  woocommerce_form_field( 'card_number', array(     'type'          => 'text',     'class'         => array(''),     'label'         => __('card number'),     'required'    => true,     'placeholder'       => __('xxxx-xxxx-xxxx-xxxx'),     ), $checkout->get_value( 'card_number' ));  woocommerce_form_field( 'card_expiration_month', array(     'type'          => 'select',     'class'         => array('form-row-first'),     'label'         => __('expiration month'),     'required'    => true,     'placeholder'       => __('- select month -'),     'options'     => array(     '1' => __('1'),     '2' => __('2'),     '3' => __('3'),     '4' => __('4'),     '5' => __('5'),     '6' => __('6'),     '7' => __('7'),     '8' => __('8'),     '9' => __('9'),     '10' => __('10'),     '11' => __('11'),     '12' => __('12')     )), $checkout->get_value( 'card_expiration_month' ));  woocommerce_form_field( 'card_expiration_year', array(     'type'          => 'select',     'class'         => array('form-row-last'),     'label'         => __('expiration year'),     'required'    => true,     'placeholder'       => __('- select year -'),     'options'     => array(     '2013' => __('2013'),     '2014' => __('2014'),     '2015' => __('2015'),     '2016' => __('2016'),     '2017' => __('2017'),     '2018' => __('2018'),     '2019' => __('2019'),     '2020' => __('2020')     )), $checkout->get_value( 'card_expiration_year' ));  woocommerce_form_field( 'security_code', array(     'type'          => 'text',     'class'         => array('form-row-first'),     'label'         => __('security code'),     'required'    => true,     'placeholder'       => __(''),     ), $checkout->get_value( 'security_code' ));  woocommerce_form_field( 'order_number', array(     'type'          => 'text',     'class'         => array('form-row-wide'),     'label'         => __('po number (if required)'),     'placeholder'       => __(''),     ), $checkout->get_value( 'order_number' ));  echo '</div>'; 

so needs this:

payment information

[x] credit card
name [ __ active input area __ ]
card number [ __ active input area __ ] etc.

[ _ ] po number
enter number [ __ inactive input area __ ]

in woocommerce no hook change form in way.

1. have add fields form-billing.php (copy woocommerce/templates/chechout/form-billing.php {yourtheme}/checkout/form-billing.php). file contains foreach-loop add fields form. add custom fields in or after loop. example:

<?php foreach ($checkout->checkout_fields['billing'] $key => $field) : ?>      <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>  <? if($key=='billing_first_name') { ?> <input type="radio" name="gender" value="female">female <input type="radio" name="gender" value="male">male <? } ?>   <?php endforeach; ?> 

you can add jquery here (after foreach loop) show / hide fields based on selecting of user. example:

 <script type="text/javascript">  jquery('input[name="gender"]').live('change', function(){ alert('gender checked');});  </script> 

2 check input of custom field(s) after submit. add functions.php example:

/**  * process checkout  **/ add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');  function my_custom_checkout_field_process() {     global $woocommerce;     if($_post['gender']=='male')          {         $woocommerce->add_error( 'you female' );         }    } 

3 add input database, example:

/**  * update order meta field value  **/ add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');  function my_custom_checkout_field_update_order_meta( $order_id ) {     if ($_post['gender']) update_post_meta( $order_id, 'gender', esc_attr($_post['gender'])); } 

see also: https://gist.github.com/mikejolley/1604009 more example code