Conditional rules for displaying Fields and Sections

The Display Rules conditionally displays Extra Product Options fields/sections by setting rules. These rules can be defined based on the product/category in the cart, User roles and value of other Product fields. The article below explains how to set a display rule for conditionally displaying a field and sections.

How to set up a Display Rule?

Goto Add/Edit field pop up from the Product options tab. In the pop-up window, There are three different tabs: General properties, Display styles, Display rules. In the Display rules tab, the rules can be set up. The rule types are:

  1. Show/ hide based on Product/ Category/ User role
  2. Show/ hide based on other field values

Below you can get more information on Conditionally Displaying Fields/Sections base on specific criteria,

Conditional Display Fields & Section based on Product/Categories

Display rules based on Product/Category allows setting a rule based on the Product/Category of Product which is opened from the Products page. Steps to set up a display rule based on Product/Category

  1. Choose Show to display the field or Hide to not display the field from the drop down.
  2. Choose Product/Category from the initial drop-down.
  3. Select Equals to/In or Not Equals to/Not In from the next drop-down.
  4. Click on the select box to pick the Product name or Category name.

Conditional Display of Fields & Section based on User Role

By setting a Display rule based on a User role, the fields/sections will be visible only while logged in as the user role defined in the rule. Steps to set rules based on User role:

  1. Choose Show/Hide to display or not the field from the 1st drop-down displayed on Display rules tab.
  2. Select ‘User Role’ from the initial drop-down.
  3. Decide the condition as per your requirement, ie, Equals to/In.
  4. Choose the User role from the Multiselect field.

Conditional Display Fields & Section based on Input fields (Text, Hidden, Password & Textarea)

For the field types Text, Textarea, Password and hidden the steps to be followed are the same. The steps are given below:

  1. Choose Show/Hide from the drop-down (shown above) 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. Select a suitable condition from the next drop-down.
  4. Enter the conditional data that needs to be satisfied for the specified field.
  5. Update Field to save the changes.

Conditional Display Fields & Section based on Option Value

Conditional rules based on option values can be defined for the field types Select, Multi-Select, Radio, and Checkbox.

  • Based on Select, Radio, and Checkbox

    Steps to set-up the rules:

    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 available list.
    4. Enter the option value which needs to be satisfied for the field in the input field at the right.
    5. Use the OR function to set condition rule based on more than one option text.
    6. Save changes by clicking on Update field.
  • Based on Checkbox

    Display rules based on the Checkbox is set using the options 'Is checked/ Is not checked'. Follow the below steps while setting up a conditional field based on a Checkbox.

    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 condition Is Checked/Is not checked from the drop-down in the middle.
    4. Click on Update field to save changes.
  • Based on Checkbox Group and Multi-Select

    Steps to set up rules:

    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 text which needs to be satisfied for the field in the input field at the right.
    5. Use the OR function to set condition rule based on more than one option text.
    6. Use comma separator to connect the option text with AND function.

Conditional Display Fields & Section based on Date picker

While setting a rule based on the Date Picker field type, insert the date in the format 'DD/MM/YYYY'. The date format set for the field/section in the field properties will not be validated while setting as the rule.

For setting a rule based on a day of Week, enter the input values as the first three letters of the day after choosing the condition ‘Day equals to/ Day not equals to’. (Example ‘Mon’ instead of Monday)

Conditional Display of Fields & Section based on Time picker

For setting a conditional rule based on the value of a time picker, the format should be ‘HH:MM AM/PM’.

P.S: only "equal" and "not equal" will work. Note: The time picker value entered in 24-hour format will not be validated.

Conditionally Displaying Fields Based on Product Variations

You can add/show/hide extra fields on a product page based on product variations with the help of WooCommerce Extra Product Options Pro.

  • Product Attributes

    Variable products are grouped using product attributes function. Product attributes are briefly divided into two:

    1. Global Attributes
    2. Local Attributes

  • Global Attributes

    Once defined, these attributes will be available to add to all the products. They will be listed in the attributes section of the product from where you can choose them from the dropdown.

  • Local Attributes

    While global attributes are available to select throughout for all products, local attributes are those which are custom added to a particular product from the attributes section inside the product details.

  • Conditionally display fields based on Product Variations for Global Attribute

    Follow the below steps to conditionally display a field or section based on a global attribute:

    1. Go to Products → Extra Product Options.
    2. Add/ Edit a Product field.
    3. From the Display rules tab on the pop-up, Select Product from the first drop-down. After choosing a suitable option from the second drop-down, choose the Variable product from the third drop-down.
    4. From the second section, Select Product variation option from the first drop-down.
    5. After choosing a suitable option from the second drop-down, Enter the Attribute slug name prefixed with pa_ and the Term slug name colon separated in the text-box.
    6. Update the changes by clicking on the Update field button.

      For eg, Color is set as a Global Attribute, then prefix ‘pa_’ before giving the attribute slug and variable slug.

      In the below example, to display Field A only when color Red is chosen, we should give value equals to pa_color:red in the column.

  • Conditionally display fields based on Product Variations for a Local Attribute

    Follow the below steps to conditionally display fields/sections based on a local attribute.

    1. Navigate to Products → Extra Product Options tab.
    2. Add/ Edit a Product field.
    3. From the Display rules tab on the pop-up, Select Product from the first drop-down. After choosing a suitable option from the second drop-down, choose the Variable product from the third drop-down.
    4. From the second section, Select Product variation option from the first drop-down.
    5. After choosing a suitable option from the second drop-down, Enter the local attribute name and the corresponding Term name colon separated in the textbox.
    6. Update the changes by clicking on the Update field button.

      The slug values of the attribute and variable in the required column. In this example, it is Size:M. As size is a local attribute, the ‘pa_’ prefix is not required.

Conditional Display of Fields & Section based on Product Quantity

Follow the below steps while setting up a conditional rule based on the product quantity chosen:

  1. Go to Display rules, Choose Show/Hide from the display action drop down.
  2. From the Select box, select Product Quantity.
  3. Select a suitable condition from the drop-down in the middle.
  4. Enter the quantity required for setting the conditional rule in the input field at the right.
  5. Save changes by clicking on the Update field.