Are you looking for a way to make your custom Elementor widget more dynamic and tailored to specific scenarios? Conditions enable you to control the visibility of controls within your custom Elementor widget. By setting specific conditions, you can determine when certain controls should be displayed and when they should be hidden. This level of control allows you to present only the relevant options to users, based on their specific needs or the context in which the widget is being used.
To check the complete feature overview documentation of The WDesignKit Widget Builder, click here.
Requirement – This feature is a part of The WDesignKit, make sure it’s installed & activated to enjoy all its powers.
For example, we have a Switcher control and a Text control, now, we want to show the Text control only when the Switcher control is enabled.
To do this, add the Switcher and Text controls on the layout and then add the Text control in the editor.
Select the Switcher control and copy its Name, and we’ll keep the Return Value to yes.
Note: Make sure to set the condition in the control that you want to show or hide.
Now, select the Text control and enable the Conditions toggle.
In the Relation of Condition dropdown you have to set the condition type, here you’ll find two options –
OR – This will show the control when any one of the listed condition is true.
AND – This will show the control when all the conditions are true.
Here we’ll keep it to OR.
Now, in the next section, you have set the condition, for each conditions, you’ll find three fields –
Name – Here, you need to add the unique name of the control that determines the visibility of the current control. So we’ll add the Switcher control name here.
Operator – Here, you can select the operator type, you can make it ==(equal) or !=(not equal). Here we’ll keep it to ==(equal).
Value – Here, you have to add the Return Value of the control that determines the visibility of the current control. So we’ll add the Return Value of the Switcher control i.e. yes.
You can add multiple conditions by clicking on the +Add button. But for our example, we don’t need multiple conditions.
So our condition is, when the Switcher control’s Return Value is equal to yes, then the Text control will be visible.
Once done, click on the Save button to save the widget.
Now, if we check the widget in the Elementor editor, the Text field will show when we turn on the toggle.
Following this process, you can set display conditions for any controls.
Also, check How to Use the Choose Control to Set Predefined Styling Options.