How to Add a Conditional Field Using a Radio Field in Checkout

In this documentation, we will demonstrate how to utilize a Radio field to add a conditional field in checkout using FunnelKit. Depending on the option users select in the checkbox field, another field will be displayed.

Here are the steps you need to follow: 

Step 1: Create the radio field 

The first step is to create the radio field. The value selected in this field will determine when the conditional field is shown to the users.

To do so, click the Add New Field button and set up the following fields: 

• Field Type: Choose Field Type as “Radio”.
• Label: Enter the Field Label.  For example: Tax Exempt.
• Set the Field ID (Order Meta Key): This key determines where the value of this field is stored. Use underscores _ if the ID has multiple words (e.g., tax_exempt).
• Options (|) separated: Add Options, separated by a pipe |. Example: Yes|No.
• Default: Add a default Value, Example: No. 
• Show on Thank You Page: Enable to display of the field value on the order confirmation page.
• Show in Order Email: to include the field value in the customer’s order email.
• Required: Must make it required to collect the conditional data. 

Then hit Add to add the radio field. 

Next, drag and drop the field to your desired section on the checkout page. 

Step 2: Add the conditional field 

Now, follow the same process to add the conditional field. In our case Tax Number. Make sure to place it after the conditional field on the checkout form. 

Step 3: Copy Field IDs for Radio and Conditional Fields

We will use the Field IDs of both fields in a custom code snippet to make one field conditional based on the other.

To do this, open each field and copy its Field ID value. You’ll need these IDs in the next step when adding the custom code.

Do the same for both fields to copy the field IDs. 

Step 4: Create custom code to make the field conditional 

Now add the following custom code to your store using a code snippet plugin. 

Guide: For the full process of adding a custom code, check our documentation. 

Here is the code link: 

class WFACP_Conditional_field_tmp {

	private $conditional_field = [];

	public function __construct() {


		/* Conditional fields */
		$this->conditional_field = [
			'tax_exempt_yn' => [  /* tax_exempt_yn*/
				[
					'value'  => 'yes',          /* tax_exempt_yn*/
					'fields' => [ 'tax_exempt_yn_yes' ],  /*tax_exempt_yn_yes*/
					'enable' => true,
				],
				[
					'value'  => 'no',
					'fields' => [ '' ],
					'enable' => true,
				],

			]
		];
		add_action( 'wfacp_after_checkout_page_found', [ $this, 'wfacp_add_script' ] );
		add_filter( 'woocommerce_checkout_fields', [ $this, 'wfacp_remove_required' ], 10, 1 );

		add_filter( 'wfacp_custom_fields', [ $this, 'wfacp_remove_field' ], 10, 1 );

	}


	/* Conditional field Logic*/

	function wfacp_remove_required( $fields ) {

		foreach ( $this->conditional_field as $field => $conditional_fields ) {
			foreach ( $conditional_fields as $conditional_field ) {
				if ( 'checked' == $conditional_field['value'] ) {
					$conditional_field['value'] = 1;
				}

				if ( ! isset( $_REQUEST[ $field ] ) ) {
					continue;
				}
				if ( isset( $_REQUEST[ $field ] ) && ( false == $conditional_field['enable'] || $_REQUEST[ $field ] == $conditional_field['value'] ) ) {
					continue;
				}
				foreach ( $conditional_field['fields'] as $field_id ) {
					$section = '';
					if ( isset( $fields['billing'][ $field_id ] ) ) {
						$section = 'billing';
					} elseif ( isset( $fields['shipping'][ $field_id ] ) ) {
						$section = 'shipping';
					} elseif ( isset( $fields['advanced'][ $field_id ] ) ) {
						$section = 'advanced';
					} else {
						if ( strpos( $field_id, 'billing' ) ) {
							$section = 'billing';
						} elseif ( strpos( $field_id, 'shipping' ) ) {
							$section = 'shipping';
						}
						if ( isset( $fields[ $section ] ) ) {
							$billing_fields = $fields[ $section ];
							foreach ( $billing_fields as $key => $field ) {
								unset( $fields[ $section ][ $key ]['required'] );
							}
						}
					}
					if ( ! empty( $section ) ) {
						unset( $fields[ $section ][ $field_id ]['required'] );
					}
				}
			}
		}

		return $fields;
	}

	function wfacp_remove_field( $fields ) {
		foreach ( $this->conditional_field as $field => $conditional_fields ) {
			foreach ( $conditional_fields as $conditional_field ) {

				if ( ! isset( $_REQUEST[ $field ] ) || ( false == $conditional_field['enable'] || $_REQUEST[ $field ] == $conditional_field['value'] ) ) {
					continue;
				}
				foreach ( $conditional_field['fields'] as $field_id ) {
					if ( ! empty( $fields['advanced'][ $field_id ] ) ) {
						unset( $fields['advanced'][ $field_id ] );
					}
				}
			}
		}

		return $fields;
	}

	function wfacp_add_script() {
		add_action( 'wp_footer', [ $this, 'wfacp_conditional_field_script' ] );
	}

	function wfacp_conditional_field_script() {

		$fields = json_encode( $this->conditional_field );
		?>
        <style>
            div.conditional_field, p.conditional_field {
                display: none !important;
            }

            .wfacp_dropdown option, .wfacp_dropdown select {
                text-transform: capitalize;
            }
        </style>
        <script>
            jQuery(document).ready(function ($) {
                var conditional_fields =<?php echo $fields;?>;

                $.each(conditional_fields, function (field, values) {

                    check_fiel(values,field);

                    $(document.body).on('change', "input[name='" + field + "']", function () {
                        check_fiel(values,field);
                    });


                });
                function check_fiel(values,field){
                    $.each(values, function (key, value) {
                        displayConditionalField(field, value, 'null');
                    });
                }

                function displayConditionalField(id, values, val) {

                    $.each(values.fields, function (index, field) {
                        var show = false;
                        if (val == 'null') {

                            val = $("input[name='" + id + "']:checked").val();
                        }

                        if (val == values.value) {
                            show = true;
                        }

                        if (show == true) {
                            $('#' + field + '_field').removeClass('conditional_field');
                        } else {

                            $('#' + field + '_field').addClass('conditional_field');
                        }
                    });
                }
            });
        </script>
		<?php
	}


}

new WFACP_Conditional_field_tmp();

In this code snippet, you’ll need to make two changes:

1. Replace tax_exempt_yn with your radio field ID. In our case, “tax_exempt”
   
2. Replace tax_exempt_yn_yes with your conditional field ID. In our case, “tax-number”. 

After making the changes, save the code. 

Step 5: Test the conditional checkout field using a radio field 

Try placing a test order, and on the checkout for, you will only see the Radio field and no conditional field since the default value is No. 

If you choose “Yes”, you will see the conditional field. 

You can follow this process to create any conditional field using a Radio field and add it to your checkout form.