The below is my extremely simple plugin code. I'm trying to hook into the Advanced tab of every Elementor widget to show my plugin's configuration options. The plugin shows/hides widgets on the front end based upon URL parameter value. On the Advanced tab of any widget, there should be a section "Conditional Visibility" with my options below that, but no matter what I can't seem to get it working.
What am I missing here? I've checked Elementor's docs and am obviously missing something big.
<?php
/**
* Plugin Name: Elementor Conditional Visibility
* Description: Extends Elementor to add conditional visibility functionality to every widget.
* Version: 1.0.0
* Text Domain: elementor-conditional-visibility
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Inject our custom controls into the Advanced tab of all widgets.
*
* Hook documentation for my reference: /
*/
add_action( 'elementor/element/common/section_attributes/before_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
function ecv_add_conditional_visibility_controls( $element, $section_id, $args ) {
// Make sure we are injecting right after 'section_attributes' in the Advanced tab.
if ( 'section_attributes' !== $section_id ) {
return;
}
$element->start_controls_section(
'ecv_conditional_visibility_section',
[
'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
'label' => __( 'Conditional Visibility', 'elementor-conditional-visibility' ),
]
);
// URL Parameter Name
$element->add_control(
'ecv_url_param_name',
[
'label' => __( 'URL Parameter Name', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'e.g. promo', 'elementor-conditional-visibility' ),
'description' => __( 'Specify the query parameter to check, e.g. "promo" in ?promo=summer.', 'elementor-conditional-visibility' ),
]
);
// URL Parameter Value
$element->add_control(
'ecv_url_param_value',
[
'label' => __( 'URL Parameter Value', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'e.g. summer', 'elementor-conditional-visibility' ),
'description' => __( 'Widget will match this value. Leave empty if any value should match.', 'elementor-conditional-visibility' ),
]
);
// If Parameter Matches
$element->add_control(
'ecv_action_on_match',
[
'label' => __( 'If Parameter Matches', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'show',
'label_block' => true,
'options' => [
'show' => __( 'Show', 'elementor-conditional-visibility' ),
'hide' => __( 'Hide', 'elementor-conditional-visibility' ),
],
]
);
// If Parameter Is Not Provided Or Doesn’t Match
$element->add_control(
'ecv_action_on_not_match',
[
'label' => __( 'If Parameter Is Not Provided Or Doesn’t Match', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'show',
'label_block' => true,
'options' => [
'show' => __( 'Show', 'elementor-conditional-visibility' ),
'hide' => __( 'Hide', 'elementor-conditional-visibility' ),
],
]
);
$element->end_controls_section();
}
/**
* Decide whether to render the widget based on the user's Conditional Visibility settings.
*
* You can also use the 'elementor/widget/before_render_content' hook if you prefer.
*/
add_action( 'elementor/frontend/widget/before_render', 'ecv_apply_conditional_visibility' );
function ecv_apply_conditional_visibility( $widget ) {
$settings = $widget->get_settings_for_display();
$param_name = isset( $settings['ecv_url_param_name'] ) ? trim( $settings['ecv_url_param_name'] ) : '';
$param_value = isset( $settings['ecv_url_param_value'] ) ? trim( $settings['ecv_url_param_value'] ) : '';
$action_match = isset( $settings['ecv_action_on_match'] ) ? $settings['ecv_action_on_match'] : 'show';
$action_no = isset( $settings['ecv_action_on_not_match'] ) ? $settings['ecv_action_on_not_match'] : 'show';
// If there's no parameter name, we do nothing.
if ( ! $param_name ) {
return;
}
// Retrieve the current value in the URL (?param_name=...).
$current_value = isset( $_GET[ $param_name ] ) ? sanitize_text_field( $_GET[ $param_name ] ) : '';
// Determine if it is a "match."
$has_match = false;
if ( $current_value !== '' ) {
// If 'value to match' is empty, any non-empty URL value is considered a match.
if ( '' === $param_value ) {
$has_match = true;
} else {
$has_match = ( $current_value === $param_value );
}
}
// Hide/show logic.
if ( $has_match ) {
// Parameter matches.
if ( 'hide' === $action_match ) {
$widget->set_settings( '_render_widget', false );
}
} else {
// Parameter missing or doesn't match.
if ( 'hide' === $action_no ) {
$widget->set_settings( '_render_widget', false );
}
}
}
The below is my extremely simple plugin code. I'm trying to hook into the Advanced tab of every Elementor widget to show my plugin's configuration options. The plugin shows/hides widgets on the front end based upon URL parameter value. On the Advanced tab of any widget, there should be a section "Conditional Visibility" with my options below that, but no matter what I can't seem to get it working.
What am I missing here? I've checked Elementor's docs and am obviously missing something big.
<?php
/**
* Plugin Name: Elementor Conditional Visibility
* Description: Extends Elementor to add conditional visibility functionality to every widget.
* Version: 1.0.0
* Text Domain: elementor-conditional-visibility
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Inject our custom controls into the Advanced tab of all widgets.
*
* Hook documentation for my reference: https://developers.elementor/docs/hooks/injecting-controls/
*/
add_action( 'elementor/element/common/section_attributes/before_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
function ecv_add_conditional_visibility_controls( $element, $section_id, $args ) {
// Make sure we are injecting right after 'section_attributes' in the Advanced tab.
if ( 'section_attributes' !== $section_id ) {
return;
}
$element->start_controls_section(
'ecv_conditional_visibility_section',
[
'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
'label' => __( 'Conditional Visibility', 'elementor-conditional-visibility' ),
]
);
// URL Parameter Name
$element->add_control(
'ecv_url_param_name',
[
'label' => __( 'URL Parameter Name', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'e.g. promo', 'elementor-conditional-visibility' ),
'description' => __( 'Specify the query parameter to check, e.g. "promo" in ?promo=summer.', 'elementor-conditional-visibility' ),
]
);
// URL Parameter Value
$element->add_control(
'ecv_url_param_value',
[
'label' => __( 'URL Parameter Value', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'e.g. summer', 'elementor-conditional-visibility' ),
'description' => __( 'Widget will match this value. Leave empty if any value should match.', 'elementor-conditional-visibility' ),
]
);
// If Parameter Matches
$element->add_control(
'ecv_action_on_match',
[
'label' => __( 'If Parameter Matches', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'show',
'label_block' => true,
'options' => [
'show' => __( 'Show', 'elementor-conditional-visibility' ),
'hide' => __( 'Hide', 'elementor-conditional-visibility' ),
],
]
);
// If Parameter Is Not Provided Or Doesn’t Match
$element->add_control(
'ecv_action_on_not_match',
[
'label' => __( 'If Parameter Is Not Provided Or Doesn’t Match', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'show',
'label_block' => true,
'options' => [
'show' => __( 'Show', 'elementor-conditional-visibility' ),
'hide' => __( 'Hide', 'elementor-conditional-visibility' ),
],
]
);
$element->end_controls_section();
}
/**
* Decide whether to render the widget based on the user's Conditional Visibility settings.
*
* You can also use the 'elementor/widget/before_render_content' hook if you prefer.
*/
add_action( 'elementor/frontend/widget/before_render', 'ecv_apply_conditional_visibility' );
function ecv_apply_conditional_visibility( $widget ) {
$settings = $widget->get_settings_for_display();
$param_name = isset( $settings['ecv_url_param_name'] ) ? trim( $settings['ecv_url_param_name'] ) : '';
$param_value = isset( $settings['ecv_url_param_value'] ) ? trim( $settings['ecv_url_param_value'] ) : '';
$action_match = isset( $settings['ecv_action_on_match'] ) ? $settings['ecv_action_on_match'] : 'show';
$action_no = isset( $settings['ecv_action_on_not_match'] ) ? $settings['ecv_action_on_not_match'] : 'show';
// If there's no parameter name, we do nothing.
if ( ! $param_name ) {
return;
}
// Retrieve the current value in the URL (?param_name=...).
$current_value = isset( $_GET[ $param_name ] ) ? sanitize_text_field( $_GET[ $param_name ] ) : '';
// Determine if it is a "match."
$has_match = false;
if ( $current_value !== '' ) {
// If 'value to match' is empty, any non-empty URL value is considered a match.
if ( '' === $param_value ) {
$has_match = true;
} else {
$has_match = ( $current_value === $param_value );
}
}
// Hide/show logic.
if ( $has_match ) {
// Parameter matches.
if ( 'hide' === $action_match ) {
$widget->set_settings( '_render_widget', false );
}
} else {
// Parameter missing or doesn't match.
if ( 'hide' === $action_no ) {
$widget->set_settings( '_render_widget', false );
}
}
}
1 Answer
Reset to default 0attributes Only for Elementor Pro, it will not appear without Elementor Pro.
Instead if you only want to display the option on all existing Elementor widgets, you can use.
add_action( 'elementor/element/common/_section_style/after_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
and this function
function ecv_add_conditional_visibility_controls( $element,$args ) {
// code
}
Here is the complete corrected code, it will display the Options in the Advanced Tab
<?php
/**
* Plugin Name: Elementor Conditional Visibility
* Description: Extends Elementor to add conditional visibility functionality to every widget.
* Version: 1.0.0
* Text Domain: elementor-conditional-visibility
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
* Inject our custom controls into the Advanced tab of all widgets.
*
* Hook documentation for my reference: https://developers.elementor/docs/hooks/injecting-controls/
*/
add_action( 'elementor/element/common/_section_style/after_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
function ecv_add_conditional_visibility_controls( $element,$args ) {
$element->start_controls_section(
'ecv_conditional_visibility_section',
[
'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
'label' => __( 'Conditional Visibility', 'elementor-conditional-visibility' ),
]
);
// URL Parameter Name
$element->add_control(
'ecv_url_param_name',
[
'label' => __( 'URL Parameter Name', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'e.g. promo', 'elementor-conditional-visibility' ),
'description' => __( 'Specify the query parameter to check, e.g. "promo" in ?promo=summer.', 'elementor-conditional-visibility' ),
]
);
// URL Parameter Value
$element->add_control(
'ecv_url_param_value',
[
'label' => __( 'URL Parameter Value', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'e.g. summer', 'elementor-conditional-visibility' ),
'description' => __( 'Widget will match this value. Leave empty if any value should match.', 'elementor-conditional-visibility' ),
]
);
// If Parameter Matches
$element->add_control(
'ecv_action_on_match',
[
'label' => __( 'If Parameter Matches', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'show',
'label_block' => true,
'options' => [
'show' => __( 'Show', 'elementor-conditional-visibility' ),
'hide' => __( 'Hide', 'elementor-conditional-visibility' ),
],
]
);
// If Parameter Is Not Provided Or Doesn’t Match
$element->add_control(
'ecv_action_on_not_match',
[
'label' => __( 'If Parameter Is Not Provided Or Doesn’t Match', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'show',
'label_block' => true,
'options' => [
'show' => __( 'Show', 'elementor-conditional-visibility' ),
'hide' => __( 'Hide', 'elementor-conditional-visibility' ),
],
]
);
$element->end_controls_section();
}
/**
* Decide whether to render the widget based on the user's Conditional Visibility settings.
*
* You can also use the 'elementor/widget/before_render_content' hook if you prefer.
*/
add_action( 'elementor/frontend/widget/before_render', 'ecv_apply_conditional_visibility' );
function ecv_apply_conditional_visibility( $widget ) {
$settings = $widget->get_settings_for_display();
$param_name = isset( $settings['ecv_url_param_name'] ) ? trim( $settings['ecv_url_param_name'] ) : '';
$param_value = isset( $settings['ecv_url_param_value'] ) ? trim( $settings['ecv_url_param_value'] ) : '';
$action_match = isset( $settings['ecv_action_on_match'] ) ? $settings['ecv_action_on_match'] : 'show';
$action_no = isset( $settings['ecv_action_on_not_match'] ) ? $settings['ecv_action_on_not_match'] : 'show';
// If there's no parameter name, we do nothing.
if ( ! $param_name ) {
return;
}
// Retrieve the current value in the URL (?param_name=...).
$current_value = isset( $_GET[ $param_name ] ) ? sanitize_text_field( $_GET[ $param_name ] ) : '';
// Determine if it is a "match."
$has_match = false;
if ( $current_value !== '' ) {
// If 'value to match' is empty, any non-empty URL value is considered a match.
if ( '' === $param_value ) {
$has_match = true;
} else {
$has_match = ( $current_value === $param_value );
}
}
// Hide/show logic.
if ( $has_match ) {
// Parameter matches.
if ( 'hide' === $action_match ) {
$widget->set_settings( '_render_widget', false );
}
} else {
// Parameter missing or doesn't match.
if ( 'hide' === $action_no ) {
$widget->set_settings( '_render_widget', false );
}
}
}
Hope this helps you.