Conditional Elementor Controls

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.