[Developer] Toggle Fields Based On Customer Response

This document is intended for users with some PHP and JavaScript coding knowledge.

Toggling fields based on a customer's prior response is not a supported feature of Conditional Checkout Fields, but it is possible with a little bit of code. For an example of how this works, please take a look at the sample plugin that can be found here: https://github.com/ScottDeLuzio/Conditional-Field-Display

That sample plugin is not designed to be installed and used as-is. Rather, it is best to fork the plugin, make the necessary changes, then use your modified version.

The sample plugin has the ability to check for whether or not a:

  • checkbox was checked
  • radio button was selected
  • select or drop down menu choice was made

The code in the sample plugin will need to be modified in the following ways:

  • Field IDs: Each example uses field IDs, which will most likely not match the field IDs you are using. This is described in further detail in the plugin's README.md file.
  • Values for Radio and Select Fields: You can conditionally display an additional field(s) based on the selection made in a radio button or select menu. For example if your select menu asks the customer for a meal choice, you may want to know how they want their steak cooked, but wouldn't need to ask that if they were ordering the vegetarian option. In this case you can only show a new field to ask how they want their meal cooked if they choose the Steak option from the radio or select menu list.
  • Additional Fields: In the sample plugin, we are assuming that the response to one field will trigger a single other field to be displayed. If you have multiple fields, you may need to add them to the code as well.

Toggling Fields

All of the fields that could possibly be shown on the checkout page must be configured in the field's settings so that they display with the correct products in the cart. This plugin doesn't pull new fields in. All fields are always there - some are just hidden.

For example, if you are selling registrations for a summer camp, you might have a radio button field "Does your child have allergies?" with a Yes and No option. If the customer selects "Yes", you would want a second field to open that asks for the specifics of that allergy.

In this case you will need to create two fields - one radio button and another a textarea. Both fields should have the "product" set to the summer camp in the field setting.

Required Fields

You may want some of these fields to be required, which is fine to do, but you can't make a field required if it is possible the customer won't answer it.

In the summer camp example above, you could make the yes/no radio button field required (the customer must answer whether or not their child has allergies), but you can't make the second textarea field be required. If the customer answers "no" to whether or not their child has allergies, they will never see the textarea field. However, the plugin is still expecting a response to that field since it was set to be required in the field's settings.