Fields dependency

Overview of the Fields Dependency

This option serves to define the dependency of different fields. It shows the connections of various fields and indicates the changes in the values of options.

It’s critical to understand the work of the dependencies. Let's break the process down with an example.

The fields won’t be displayed unless a particular setting is enabled or selected.

1. For example, there is a field for skin color setup. By default, the theme color are applied and there are no additional settings. But if you select the Custom Color option, the new fields (color picker) will be displayed. These fields depend on the Custom Color option.

'dependency' => array(
    'key' => 'footer_custom_settings',
    'value' => 'not_empty'
)

The 'value' => 'not_empty' indicates that if the setting is enabled, the field will be displayed.

2. Another example of dependency usage. There are three option fields, two of them depend on the third one. When you select Hide Footer (enable the option) other two settings will be automatically disabled and hidden.

'dependency' => array(
    'key' => '‘footer_show_hide',
    'value' => 'empty'
)

The 'value' => 'empty' indicates that if the setting is disabled (or not selected) the field won’t be displayed

3. There is also another way of dependency management when some of the fields depend on two options at once.

'dependency' => array(
    array(
        'key' => 'footer_custom_settings',
        'value' => 'not_empty'
    ),
    array(
        'key' => 'footer_show_hide',
        'value' => 'empty'
    )
),
'dependencies' => '&&'

Pay attention to the “dependencies” option. It shows that a particular field depends on multiple options.

The value of '&&' means “and” here, and the option depends on fields 1 and 2.

You can also use “||” - to indicate “or” - for example, if the field depends on several options, and if only one of them is selected (enabled).

NOTE: if dependency field located in another section, you have to add section name parameter to dependency array:

'dependency' => array(
    array(
        'key' => 'footer_custom_settings',
        'value' => 'not_empty',
        'section' => 'my_section_name'
    ),
),

🚩 🚩🚩Sometimes you need to show that the setting is not available in certain cases, just add

'dependency_mode' => 'disabled',

and setting will be disabled.

For example, we need to show, that the WooCommerce cart is disabled for Header style 6:

Sorted Field Dependency Mode

Sorted field dependency mode works with an interactive sorted two-column drag-and-drop interface.

• Enable Layouts — fields in this block (column) will be available to modify. Users can enter texts, select options, or make any changes based on the field type.

• Disable Layouts — fields in this block (column) will be unavailable for modification. They will be disabled which means users can not make any changes to these fields.

Enabled Field

Disabled Field

Here is the example code to implement the feature:

'group'      => 'started'
'dependency' => array(
    array(
        'key' => 'sorted_steps',
        'value' => 'item_gallery',
    ),
    'dependency_mode' => 'sorted',
),