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:
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' )
),
);
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' );
1 comment
Comments are closed.