Elementor control conditions

Set the ‘Show / Hide’ condition of a control

I want to shown you, how you can create simple or advanced conditions to applie some rules for specific controls.

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

$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

$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‘.

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

Multiple conditions: we set a ‘OR‘ relationship between the two controls ‘ir_icon_switcher and ir_lightbox‘ and 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 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 relationship between the two ‘controls’ is established with ‘and‘.
Result: ‘ir_icon_switcher‘ must be set to ‘yes or none‘ AND ‘ir_lightbox‘ must have the value ‘yes‘.

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

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