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 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‘ AND ‘ig_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