Elementor Control Conditions

Elementor’s documentation regarding control visibility rules is not documented to date.
And since Elementor uses this feature extensively, so we offer you a few things that will help you deal with simple or advanced conditions with which you can apply them to specific controls.

The easiest way to use 'condition'

Simple condition: the control ‘ir_link_to‘ must return the value ‘custom‘ to show the control

$this->add_control('ir_link_url', 
...
'condition' => ['ir_link_to' => 'custom'],
);

Multiple conditions: the ‘ir_link_to‘ control must return the values ​​’custom‘ or ‘none‘ to show the control

$this->add_control('ir_link_url',
...
'condition' => ['ir_link_to' => ['custom', 'none']],
);

Multiple conditions: the control ‘ig_overlay_inout‘ must be positioned on ‘overlay-out‘ and the control ‘ig_layout_type‘ must be different from ‘justify‘ to show the control

$this->add_control('ig_image_lightbox',
...
'condition' => ['ig_overlay_inout' => 'overlay-out', 'ig_layout_type!' => 'justify'],
);

We have a ‘Group_Control_Background‘ with only two types ‘classic‘ and ‘gradient‘ and we want that the second control to be displayed when the ‘classic‘ type is selected.

$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'mb_modal_box_bg',
'types' => ['classic', 'gradient'],
...
]
);

We have to set the condition key with the name ‘mb_modal_box_bg+_background‘ and ‘classic‘ for the value.

$this->add_control(
'mb_modal_box_bg_opacity',
[
'label' => __("Opacity", 'eac-components'),
'type' => Controls_Manager::SLIDER,
...
'condition' => ['mb_modal_box_bg_background' => 'classic'],
]
);

Implementation of advanced 'conditions'

Multiple conditions: we set a ‘OR‘ relationship between the two controls ‘ir_icon_switcher and ir_lightbox
Add the operator === strictly equal and the expected value.
Result: One of the two ‘control’ must be equal to ‘yes
Note: Mind the ‘s‘ to conditions.

$this->add_control('ir_link_url',
...
'conditions' => [
    'relation' => 'or',
    'terms' => [
        ['name' => 'ir_icon_switcher', 'operator' => '===', 'value' => 'yes'],
        ['name' => 'ir_lightbox', 'operator' => '===', 'value' => 'yes'],
    ],
],
);

Multiple conditions: Same as the previous example. The expected values ​​are in a array. We use the operator ‘in‘.
Result: the first ‘control’ must be equal to ‘yes or noneOR the second must have the value ‘yes‘.

$this->add_control('ir_link_url',
...
'conditions' => [
    'relation' => 'or',
    'terms' => [
        ['name' => 'ir_icon_switcher', 'operator' => 'in', 'value' => ['yes', 'none']],
        ['name' => 'ir_lightbox', 'operator' => 'in', 'value' => ['yes']],
    ],
],
);

Multiple conditions: We use the operator !in‘ (not in) to exclude the associated values.

$this->add_control('ir_link_url',
...
'conditions' => [
    'relation' => 'or',
    'terms' => [
        ['name' => 'ir_icon_switcher', 'operator' => '!in', 'value' => ['yes', 'none']],
        ['name' => 'ir_lightbox', 'operator' => 'in', 'value' => ['yes']],
    ],
],
);

Multiple conditions: The members of each block of ‘terms‘ need to be present at once, but any group of ‘terms‘ will do.
The OR relation only applies to the two ‘terms‘ blocks.
Inside the first block of ‘terms’ the relation is equal at AND by default.
ig_layout_type‘ can be ‘masonry or fitRowsANDig_overlay_inout‘ must be equal at ‘overlay-in‘.
OR
ig_layout_type‘ shall be equal at ‘justify‘.

$this->add_control('ir_link_url',
...
'conditions' => [
    'relation' => 'or',
    'terms' => [
        [
        'terms' => [
                ['name' => 'ig_layout_type', 'operator' => 'in', 'value' => ['masonry', 'fitRows']],
                ['name' => 'ig_overlay_inout', 'operator' => '===', 'value' => 'overlay-in']
            ]
        ],
        [
        'terms' => [
                ['name' => 'ig_layout_type', 'operator' => '===', 'value' => 'justify']
            ]
        ],
    ]
],
);

Numerical condition: The control ‘al_link_url‘ will be visible if the value of the control ‘al_article_nombre‘ is different from 10.

$this->add_control('al_link_url',
...
'conditions' => [
	'terms' => [
		['name' => 'al_article_nombre', 'operator' => '!=', 'value' => 10],
	],
],
);

Leave a Comment