Documentation/Checkout Field Editor for WooCommerce/How to Set Conditional Rules For WooCommerce Checkout Fields?

How to Set Conditional Rules For WooCommerce Checkout Fields?

Last updated on October 18, 2022

Display rules are a set of conditions that can be set for sections & fields to control their display on the checkout page. This means you can set certain conditions for showing or hiding fields & sections on the checkout page.

This article will help you to understand display rules settings, and will also explain all the different types of conditions available for setting display rules.


General Instructions To Set Display Rules

This section will explain to you the common steps to set display rules.

To set display rules for checkout fields or sections:

  1. Navigate to the WooCommerce → Checkout Form → Checkout Fields page.
  2. Open the field/section property form popup.
    • Click on the Add Field button to open the popup form if you are setting display rules for a new field.
    • Click on the Edit Field button to open the popup form if you are setting display rules for an existing field.
    • Click on the Add New Section button to open the popup form if you are setting display rules for a new section that you are creating.
    • Click on the Edit Section button to open the popup form if you are setting display rules for an existing section.
  3. Navigate to the Display Rules tab from the popup.
  4. From this tab, you can define display rules. Here you can see two sets of rules, the first one will be validated before loading the checkout page. And the other one will be validated once the page is loaded. You can add multiple conditions to each rule.
  5. Click on the AND or OR operator button to add multiple conditions and use these operators properly based on your requirement.
  6. Once the required conditions are added, click on the Save Field button to save the settings.

Screenshot_2021-03-04_at_6.35.00_PM.png


Conditions Based On User Role

Show or hide fields & sections based on user role. Below is the list of conditions available to display fields & sections based on the user role.

  1. User role equal to
  2. User role not equal to

Example #1: Show field xyz only for “Shop Manager

user_role.png

Example #2: Hide field xyz for “Shop Manager” and “Administratoruser_role_or.png


Conditions Based On Cart Totals

Show or hide fields & sections based on cart totals. Below is the list of conditions available to display fields & sections based on the cart totals.

  1. Cart total equal to
  2. Cart total greater than
  3. Cart total less than
  4. Cart subtotal equal to
  5. Cart subtotal greater than
  6. Cart subtotal less than

Example #1: Show field xyz if the cart total amount is between $100 & $500

cart_total.png


Conditions Based On Shipping Weight

Display-Rule-_Shipping_Weight.png

Show or hide fields & sections based on shipping weight. Below is the list of conditions available to display fields & sections based on the shipping weight.

  • Shipping weight less than
  • Shipping weight equal to
  • Shipping weight greater than

Conditions Based On Products & Product Variations

Show or hide fields & sections based on products. Below is the list of conditions available to display fields & sections based on products in the cart.

  1. Cart contains
  2. Cart not contains
  3. Cart only contains

Example #1: Show field xyz if cart contains the product Cap

Screenshot_2021-03-04_at_6.42.43_PM.png


Conditions Based On Product Categories

Show or hide fields & sections based on product categories. Below is the list of conditions available to display fields & sections based on the categories of the products in the cart.

  1. Cart contains
  2. Cart not contains
  3. Cart only contains

Example #1: Show field xyz if the cart contains products only from the category Hoodies

categories.png


Conditions Based On Product Tags

Show or hide fields & sections based on product tags. Below is the list of conditions available to display fields & sections based on the tags of the products in the cart.

  1. Cart contains
  2. Cart not contains
  3. Cart only contains

Example #1: Show field xyz if the cart has a product under the tag caps

tags.png


Conditions Based On Product Types

Show or hide fields & sections based on product types. Fields or sections would be displayed based the type of product – Simple / Variable that is added in the cart.

Display_rule_-_prod_type.png


Conditions Based On Shipping Class

Show or hide fields & sections based on shipping class.

Shipping_class-_CFE.png


Conditions Based On Other Field’s Value

This option allows you to set conditions based on other field’s value. Below is the list of conditions available to display fields & sections based on other fields’ value.

  1. Is empty
  2. Is not empty
  3. Value equals to
  4. Value not equals to
  5. Value in
  6. Contains
  7. Not contains
  8. Value greater than
  9. Value less than
  10. Value starts with
  11. Value not starts with
  12. Date equals to
  13. Date not equals to
  14. Date after
  15. Date before
  16. Day equals to
  17. Day not equals to
  18. Is checked
  19. Is not checked
  20. Match expression

Conditions Based On Input Fields (Text, Hidden, Password, and Textarea)

Follow the below steps for the field types like text, textarea, password, and hidden.conditions_based_input_field.png

  1. Choose the Show/Hide option from the drop-down to display/hide the specific field.
  2. From the Select field textbox, choose a specific field based on which the rule needs to be set.
  3. Select the required condition from the next drop-down.
  4. Provide the conditional data that should be satisfied for that particular field.
  5. Save the changes made.

Conditions Based On Option Value

For Select and Radio

select_radio.png

  1. Choose Show/Hide option from the drop-down to display/hide the specific field.
  2. From the Select box, pick the specific field based on which the rule has to be set.
  3. Choose the required condition from the next drop-down.
  4. Enter the option value in the input field at the right.
  5. Use the OR function to set condition rules based on more than one option text.
  6. Save the changes made.

Based On The Checkbox

Set display rules using the option ‘Is checked/ Is not checked’. Follow the below steps to set a conditional field based on a checkbox.

checkbox__1_.png

  1. Choose Show/Hide from the drop-down to display or hide the field.
  2. From the Select box, pick the Checkbox field based on which the rule has to be set.
  3. Select the required condition Is Checked/Is not checked from the drop-down in the middle.
  4. Save the changes made.

Based On The Checkbox Group & Multi-Select

checkbox_group.png

  1. Choose Show/Hide from the drop-down to display or hide the field.
  2. From the Select box, pick the field based on which the rule has to be set.
  3. Select a suitable condition from the drop-down in the middle.
  4. Enter the option value which needs to be satisfied for the field (Enter the value in the final input field.)
  5. Use the OR function to set condition rules based on more than one option text.
  6. Save the changes made.

Conditions Based On Date Picker

To set a rule based on the Date picker field type,

date_picker.png

  1. Insert the date in the format ‘DD/MM/YYYY’.
  2. From the Select box, pick the field based on which the rule has to be set.
  3. Choose the required condition from the dropdown like ‘Day equals to/Day not equals to’.
  4. For setting a rule based on the day of a week enter the input values as the first three letters of the day after choosing the condition. (Example: MON instead of Monday).

Note: The date format set for the field/section in the field properties will not be validated while setting as the rule.


Conditions For Country Field

Setting display rules for the Country field is exactly the same as for other checkout fields. But this option is disabled by default, you have to enable it first.

To enable display rules for Country field:

  1. Navigate to Advanced Settings tab.
  2. Head to Other Settings section.
  3. Check the box Enable display of Country field based on Conditional rules.

wcfe-display-rules-for-country-field-1.png


Conditions For The State Field

Setting display rules for the State/ Province field is exactly the same as for other checkout fields. But this option is disabled by default, you have to enable it first.

To enable display rules for the State/ Province field:

  1. Navigate to Advanced Settings tab.
  2. Head to Other Settings section.
  3. Check the box Enable display of State/ Province field based on Conditional rules.

wcfe-display-rules-for-state-field-1.png


Conditions Based On The Country Field

Show or hide fields & sections based on the country field value. Below is the list of conditions available to display fields & sections based on the country field value.

  1. Value equals to
  2. Value not equals to

The option to set conditions based on Country Field value is disabled by default. To enable this option:

  1. Navigate to Advanced Settings tab.
  2. Head to Other Settings section.
  3. Check the box Enable conditional rules based on Country selected.

 

wcfe-display-rules-country-1.png

Note: Use the two-letter Country Code instead of Country Name for the conditions (Example: Use GB for United Kingdom)


Conditions Based On Payment & Shipping Methods

Show or hide fields & sections based on payment & shipping methods. Below is the list of conditions available to display fields & sections based on payment & shipping methods.

  1. Value equals to
  2. Value not equals to

The option to set conditions based on Payment & Shipping method is disabled by default. To enable this option:

  1. Navigate to Advanced Settings tab.
  2. Head to Other Settings section.
  3. Check the box Enable conditional rules based on Payment & Shipping methods.

wcfe-display-rules-payment-and-shipping-1.png

Example #1: Show field xyz only if the selected shipping method is Free Shipping

shipping_method.png

Tip: You can inspect the page and point on the required payment method or shipping method to find its corresponding value in the source code.

shipping_payments_details.png

Example # 2: Show field xyz only if the selected payment method is Direct Bank Transfer

payment_method.png

Tip: You can inspect the page and point on the required payment method or shipping method to find its corresponding value in the source code.

bank_transfer.png

paypal.png


Custom Conditions

When the above said out of the box options are not enough to set your required conditions, don’t worry you can set your own conditions using below hooks.

Filter hook to set custom display rules for checkout fields.

apply_filters('thwcfe_show_field', $show, $field_name);

Filter hook to set custom display rules for custom checkout sections.

apply_filters('thwcfe_show_section', $show, $section_name);