HiroHito HiroHito - 6 months ago 80
Javascript Question

Conditionally unset checkout field in woocommerce

Solved: Updated code with conditionals.

How can i conditionally unset the other two fields from server side and remove the required validation from it?

Here is how the form looks like:
enter image description here

Here is the code:

function bs_filter_checkout_fields($fields){
$fields['billing'] = array(

'add_type' => array(
'type' => 'radio',
'label' => __( 'Address Type' ),
'options' => array( 'house' => __( 'House' ), 'building' => __( 'Building' ), 'office' => __( 'Office' ) ),
'required' => true
),
'add_house_name' => array(
'type' => 'text',
'required' => true,
'placeholder' => __( 'House Name/Number' ),
'label' => __( 'House Name/Number' )
),
'add_building_name' => array(
'type' => 'text',
'required' => true,
'placeholder' => __( 'Building Name/Number' ),
'label' => __( 'Building Name/Number' )
),
'add_office_name' => array(
'type' => 'text',
'required' => true,
'placeholder' => __( 'Office Name/Number' ),
'label' => __( 'Office Name/Number' )
),
);

$answer = $_POST['add_type'];

if($answer == "house"){
unset($fields['billing']['add_building_name']); // remove field
$fields['billing']['add_building_name']['required'] = false; // remove required validation

unset($fields['billing']['add_office_name']); // remove field
$fields['billing']['add_office_name']['required'] = false; // remove required validation
}

if($answer == "building"){
unset($fields['billing']['add_house_name']); // remove field
$fields['billing']['add_house_name']['required'] = false; // remove required validation

unset($fields['billing']['add_office_name']); // remove field
$fields['billing']['add_office_name']['required'] = false; // remove required validation
}

if($answer == "office"){
unset($fields['billing']['add_house_name']); // remove field
$fields['billing']['add_house_name']['required'] = false; // remove required validation

unset($fields['billing']['add_building_name']); // remove field
$fields['billing']['add_building_name']['required'] = false; // remove required validation
}

return $fields;


}
add_filter( 'woocommerce_checkout_fields', 'bs_filter_checkout_fields' );

function bs_conditional_scripts() {
wc_enqueue_js( "
$( '#add_type_house' ).change( function () {

if ( $( this ).is( ':checked' ) ) {
$('#add_building_name_field').hide();
$('#add_office_name_field').hide();
$( '#add_house_name_field' ).show();
}

} ).change();

$( '#add_type_building' ).change( function () {

if ( $( this ).is( ':checked' ) ) {
$( '#add_house_name_field' ).hide();
$('#add_office_name_field').hide();
$('#add_building_name_field').show();
}

} ).change();


$( '#add_type_office' ).change( function () {

if ( $( this ).is( ':checked' ) ) {
$( '#add_house_name_field' ).hide();
$('#add_building_name_field').hide();
$('#add_office_name_field').show();
}

} ).change();
" );
}
add_action( 'wp_enqueue_scripts', 'bs_conditional_scripts' );

Answer
 function bs_filter_checkout_fields($fields){ 
                     $fields['billing'] = array(
                          'add_type' => array(
                                'type' => 'radio',
                                'label' => __( 'Address Type' ),
                                'options' => array( 'house' => __( 'House' ), 'building' => __( 'Building' ), 'office' => __( 'Office' ) ),
                                'required' => true
                                ),
                            'add_house_name' => array(
                                'type' => 'text',
                                'required'      => true,
                                'placeholder' => __( 'House Name/Number' ),
                                'label' => __( 'House Name/Number' )
                                ),
                            'add_building_name' => array(
                                'type' => 'text',
                                'required'  => true,
                                'placeholder' => __( 'Building Name/Number' ),
                                'label' => __( 'Building Name/Number' )
                                ),
                            'add_office_name' => array(
                                'type' => 'text',
                                'required'  => true,
                                'placeholder' => __( 'Office Name/Number' ),
                                'label' => __( 'Office Name/Number' )
                                ),
                            );
        if( true ){ // pass conditional statement here
          unset($fields['billing']['add_house_name']);  //  remove field
          $fields['billing']['add_building_name']['required']   = false; // remove required validation
        }                   
        return $fields;
        }