Conditional field using a Checkbox

Funnelkit Checkout provides the conditional fields using a custom code snippet. Follow the process to create a conditional field using a Checkbox which shows 2 fields under it.

Step 1 - Create a custom field using a checkbox option and fill the appropriate label and field ID 

• Field type - Checkbox
• Label - Want to wrap as a Gift?
• Field ID - parent_field
• Default - False
• Required - No

Step 2 - Create other fields to show when this checkbox is clicked. For example, we are creating input field below it 

• Field type - Single Line text
• Field label - Message in wrapper 
• Field ID  - child_field 
• Required - Yes

If needed, create more fields by following the same

Step 3 - Place the fields on the checkout page in the desired section 

Step 4 - Add this code snippet to your child theme’s functions.php file or use the code snippet plugin.

class Temp02_WFACP_Conditional_field { 
	
	private $conditional_field = [
		'parent_field' => [        //your checkbox field id //
			[
			'value'  => 'checked',
			'fields' => [ 'child_field', 'child_field_2'],  //child fields will show on click parent field//
			'enable' => true,
			]
		]
	];

	public function __construct() {

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

	function add_field_description( $key, $field, $field_value ) {
		$descri = $this->description;
		echo "<span class='wfacp-field-descri'>$descri</span>";
	}

	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: none;
            }

            span.wfacp-field-descri {
                margin-left: 1%;
                color: #737373;
            }

            p#cegesvasarlas_field {
                margin-bottom: 2px !important;
            }

		</style>

		<script>
            jQuery(document).ready(function ($) {
                var conditional_fields =<?php echo $fields;?>;
                $.each(conditional_fields, function (field, values) {
                    $.each(values, function (key, value) {
                        displayConditionalField(field, value, 'null');
                        $(document.body).on('change', '#' + field, function () {
                            var id = $(this).attr('id');
                            var val = $(this).val();
                            if ($(this).parent('checkbox')) {
                                if ($(this).prop("checked")) {
                                    val = 'checked';
                                }
                            }
                            displayConditionalField(id, value, val);
                        });
                        console.log(values);
                    });
                });

                function displayConditionalField(id, values, val) {
                    $.each(values.fields, function (index, field) {
                        var show = false;
                        if (val == 'null') {
                            val = $('#' + id).val();
                        }
                        // console.log(field,val,values.value,values.enable);
                        if (val == values.value) {
                            var show = true;
                        }
                        if (show && values.enable) {
                            $('.' + field).removeClass('conditional_field');
                            $('#' + field + '_field').removeClass('conditional_field');
                        } else {
                            $('#' + field).val('');
                            $('.' + field).addClass('conditional_field');
                            $('#' + field + '_field').addClass('conditional_field');
                        }
                    });
                }
            });
		</script>


		<?php
	}

	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 ] ) && ( 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';
					}
					if ( ! empty( $section ) ) {
						unset( $fields[ $section ][ $field_id ]['required'] );
					}
				}
			}
		}

		return $fields;
	}

}

new Temp02_WFACP_Conditional_field();

Final Output