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.
Note: Mind condition without ‘s‘.
$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'],
]
);The exercise is to determine if the document being edited is a template and then to apply the condition to a section to show/hide it.
First we have to create an Hidden control ‘aib_is_a_template‘ and set a function for the default value. This function return True or False.
After that we apply the condition (Line 20) to the considered section.
This example can be extended to other functions for other behavior.
Easy isn’t it…
/**
* Hidden field to determine if it's an Elementor template
* Used to show/hide certain sections
*/
$this->add_control('aib_is_a_template',
[
'label' => 'Template hidden',
'type' => Controls_Manager::HIDDEN,
'default' => get_post_type(get_the_ID()) === 'elementor_library', // Return true or false
]
);
...
// Show this section if we are editing a Template
$this->start_controls_section('aib_settings_integrate',
[
'label' => esc_html__('Intégration', 'eac-components'),
'tab' => Controls_Manager::TAB_CONTENT,
'condition' => ['aib_is_a_template' => true],
]
);
...
$this->end_controls_section();Implementation of advanced 'conditions'
By default the parameter ‘relation’ is equal at AND.
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 and we use the operator ‘in‘.
Result: the first ‘control’ must be equal to ‘yes or none‘ OR 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 fitRows‘ (Line 8) AND ‘ig_overlay_inout‘ must be equal at ‘overlay-in‘ (Line 9).
OR
‘ig_layout_type‘ shall be equal at ‘justify‘ (Line 14).
$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],
],
],
);
Thank you so much for the very helpful post.
Thanks, i appreciate your comment
Rgds