Conditionally display Fields & Sections based on other fields value

You can show/hide fields based on other fields value in checkout page using WooCommerce Checkout Field Editor plugin's conditional rules feature. These conditions can be defined based on the product in the cart and its category and variations, different user roles and based on different values of other fields in checkout.  

How and where to set up a Conditional rule in displaying fields?

Go to Checkout Field Editor from the Dashboard. In the Add/Edit Field pop up of a field, there are two tabs: General Properties and Conditional Rules. In the Conditional Rules tab, you can set rules according to the conditions you require. In the Conditional rules tab, there are two different sections to:
  1. Show or Hide fields based on Product/ Category/ User role/Cart total/Cart Subtotal.
  2. Show or Hide fields based on other field values.

How and where to set up a Conditional rule in displaying section?

Go to Checkout Field Editor from the Dashboard. In the Add/Edit Section pop up of a section, there are two tabs: General Properties and Display Rules. In the Display Rules tab, you can set rules according to the conditions you require. In the Display Rules tab, there are two different sections to:
  1. Show or Hide sections based on Product/ Category/ User role/Cart total/Cart Subtotal.
  2. Show or Hide sections based on field values.

The AND Function and OR Function The AND function can be applied to conditional rules by multi-selecting the options. When we want to define two different conditions, both of which are mandatory, we can use the AND connector. Whereas, the OR functions need to be defined by using the OR connector. When Conditions are set for Products/Categories using AND function, all Products according to the rule should be present in the Cart. Only then will the field/section be shown/hidden. For OR function, any one of the Products which is set in the rule needs to be present in the cart to display/hide the field/section.

Example settings

  1. Example 1: Show text field Field B only if the checkbox Checkbox A is checked.
  2. Example 2: Hide text field Field B only if the value of radio button field Radio A is 'yes'.
Example 1: Show text field Field B only if the checkbox Checkbox A is checked.
  1. Create the checkbox field Field A.
  2. Create the text field Field B.
  3. Click on the Conditional Rules tab of the field Field B.
  4. Choose "Show" from the display action drop-down. Then set the conditions to show the field Field B only when Field A is checked.
  5. Done.
Example 2: Hide text field Field B if the value of radio button field Radio A is 'yes'.
  1. Create the radio button field Field A with options "Yes" and "No".
  2. Create the text field Field B.
  3. Click on the Conditional Rules tab of the field Field B.
  4. Choose "Hide" from the display action drop-down. Then set the conditions to hide the field Field B if the chosen value of radio field Field A is "yes".
  5. Done.