Conditional Elementor Controls

Shared by
Published
Find your next web developer job
Associate Web Developer at Tokio Marine HCC (Houston, TX)

Learn how to create conditional Elementor controls for your custom widgets using the little-known (and undocumented) condition parameter. Show or hide fields based on other field values.

tl;dr

Elementor’s documentation is super useful, but not always complete. One of the missing pieces is how to create conditional Elementor controls — it’s a cinch using the condition parameter:

$this->add_control(
  array(
    'label'         => __( 'Button URL', 'text-domain' ),
    'type'          => \Elementor\Controls_Manager::URL,
    'placeholder'   => __( 'Paste URL or type', 'text-domain' ),
    'show_external' => true,
    'dynamic'       => array(
      'active' => true,
    ),
    'condition' => array(
      'has_button' => 'yes',
    ),
  )
);

There’s a more advanced why to accomplish using the conditions parameter:

'conditions' => array(
  'relation' => 'and',
  'terms'    => array(
    array(
      'name'     => 'shape',
      'operator' => '==',
       'value'   => 'classic',
    ),
    array(
      'name'     => 'classic_middle_element',
      'operator' => '==',
      'value'    => 'icon',
    ),
  )
),

Looks familiar doesn’t it? Well it should if you’ve ever used meta queries in WordPress. It as the same structure for creating complex conditional fields.

Firsh over at Let’s WP wrote a great article about Elementor conditional fields, how to use them, and examples of complex implementations.

Did you find Conditional Elementor Controls useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'Conditional Elementor Controls' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.