woocommerce checkout conditional fields based on radio buttons choices

Question

In my wordpress website I need to add some conditional fields in the woocommerce checkout page.

I have already created the 2 fields and I now I need one field to show up based on the choices made on the other one.

Field one's name (the parent field): billing_checkbox_cf
Field two's name: billing_cf_in

Based on "WooCommerce conditional custom checkout fields" answer thread, here's my code:

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
    // if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
    $required = esc_attr__( 'required', 'woocommerce' );
    ?>
    <script type="text/javascript">
        (function($){
            var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

            $('#billing_cf_in_field').hide();

            $('input#billing_checkbox_cf').change(function(){
                if (this.checked) {
                    $('#billing_cf_in_field').fadeIn("fast", function(){
                        $(this).addClass("validate-required");
                        $('#billing_cf_in_field > label').append(required);
                    });
                } else {
                    $('#billing_cf_in_field').fadeOut("fast", function(){
                        $(this).removeClass("validate-required");
                        $('#billing_cf_in_field > label > .required').remove();
                    });
                }
                $('#billing_cf_in_field').val('');
                $('#billing_cf_in_field').removeClass("woocommerce-validated");
                $('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            });
        })(jQuery);
    </script>
    <?php
}

So far, I am able to make it work if Field1 "billing_checkbox_cf" is a checkbox. When Field1 is checked, I can make Field2 show up.

I'd like to make it work with Field1 being a radio button(option1|option2|option3) and make the Field2 show up only when the user's choice is option2.

But I am not a programmer and I am not able to deal with radio button conditions. How can I modify my code in order to make it work?

Rubx Rubx · Accepted Answer · 2018-10-22T14:23:45

I've managed to make it work. I'm posting here in case it could be useful to others

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
    // if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
    $required = esc_attr__( 'required', 'woocommerce' );
    ?>
    <script type="text/javascript">
        (function($){
            var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

            $('#billing_cf_in_field').hide();

            $('input[type=radio][name=billing_radiobox_cf]').change(function(){
                if (this.value === 'option2') {
                    $('#billing_cf_in_field').fadeIn("fast", function(){
                        $(this).addClass("validate-required");
                        $('#billing_cf_in_field > label').append(required);
                    });
                } else {
                    $('#billing_cf_in_field').fadeOut("fast", function(){
                        $(this).removeClass("validate-required");
                        $('#billing_cf_in_field > label > .required').remove();
                    });
                }
                $('#billing_cf_in_field').val('');
                $('#billing_cf_in_field').removeClass("woocommerce-validated");
                $('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            });
        })(jQuery);
    </script>
    <?php
}

Unfortunately, validation is not completely working, since when sending the form, in case billing_cf_in_field is not filled, the field becomes correctly red but the error message does not mention billing_cf_in_field in the list of fields to be fullfilled. I'll open another thread for this.

woocommerce checkout conditional fields based on radio buttons choices

1 Answers