How to Use Display Conditions to Show or Hide Controls?
On this page
What It Does
Display Conditions let you show or hide any control inside a WDesignKit custom widget, based on the value of another control in the same widget. You define one or more rules and choose whether ANY (OR) or ALL (AND) of them must be true for the control to appear.
Why It Matters
Without conditions, every control you add to a widget is always visible in the panel, whether or not it applies. A widget with a dozen style options for a feature someone has switched off just adds noise. Conditions let one widget panel adapt itself, so the person editing it only ever sees controls that are relevant to the choices they have already made.
What You Get
- A per-control Conditions toggle in the widget builder editor
- An AND / OR relation type for combining multiple rules
- Unlimited stacked rules, added with the +Add button
- Each rule defined by three fields: the source control’s Name, an Operator, and the Value to match
Benefits
- Fewer widgets to build and maintain — one widget’s panel can adapt to a setting instead of you shipping a second, near-identical widget for a different configuration
- A cleaner editing experience for whoever uses the widget, since irrelevant controls stay hidden until they are relevant
Capabilities
- Toggle Conditions on for any control in the Layout panel
- Choose a Relation of Condition: OR (any listed condition true) or AND (all conditions true)
- Reference any other control on the same widget by its unique Name
- Match on Operator
==(equal) or!=(not equal) - Add multiple stacked conditions per control via +Add
How It Works
Every control has a unique Name and a Return Value it outputs when set (for example, a Switcher’s Return Value defaults to yes when it is on). A Conditions rule points at another control’s Name and compares its current Return Value against the Value you type in, using the Operator you chose. If the comparison is true (and, for AND, every other rule on that control is also true), the control renders in the editor and on the front end; otherwise it stays hidden.
How to Use It
Example: show a Text control only when a Switcher control is enabled.
- Add both the Switcher and Text controls to the widget’s Layout panel, then insert the Text control in the HTML editor.
- Select the Switcher control and copy its Name. Leave its Return Value at yes (the default).
- Select the Text control and enable its Conditions toggle.
- Set the Relation of Condition dropdown — OR if any rule should be enough, AND if every rule must hold. For a single rule, either works; here we use OR.
- In the condition row, paste the Switcher’s Name into Name, set Operator to
==(equal), and enter yes in Value — matching the Switcher’s Return Value. - Add more conditions with +Add if needed, then click Save on the widget.
Note: set the condition on the control you want to show or hide, not on the control that drives the condition.
Open the widget in the Elementor (or Bricks / Nexter Gutenberg) editor and toggle the Switcher — the Text field now appears only when the Switcher is on. The same steps apply to any other control pair.
See also: How to Use the Choose Control to Set Predefined Styling Options.
Use Cases
Workflow-derived, not sourced from a specific support ticket — this feature applies inside the widget builder itself, distinct from the front-end Display Conditions widget covered by unrelated support tickets.
- A multi-step form widget that only shows extra fields once a “Show advanced options” switcher is turned on
- Simplifying a style panel, for example hiding a Border Color control until Border Type is set to anything other than None
Limitations
- Operator only supports equal (
==) and not-equal (!=) comparisons — there is no greater-than, contains, or range matching - The Value you type must exactly match the source control’s raw Return Value; a mismatch hides the control with no on-screen error explaining why
- This is a widget-builder feature that controls what appears inside your OWN custom widget’s panel and output — it is not the same as a page-level or section-level front-end visibility widget
Troubleshooting
Workflow-derived guidance, not sourced from a specific support ticket.
- Control stays hidden even though the condition should be true — re-check that the Value field is an exact, case-sensitive match for the source control’s actual Return Value, and that you copied the Name from the correct control.
- Condition works while editing but not after reload — confirm you clicked Save on the widget itself; closing the Conditions popover alone does not persist the rule.
- Multiple OR conditions still hide the control — check the Relation of Condition dropdown is actually set to OR; it is easy to leave it on the default and add rules that only work under AND.