How to Show/Hide Element Based on Shortcode Value Using Elementor Display Conditions

Elementor Display Conditions global addon in Premium Addons for Elementor plugin allows you to show or hide any Elementor container or widget based on a set of conditions.

In this tutorial, we will show how to show/hide Elementor elements based on the value returned by a PHP function through a shortcode. For a better understanding of WordPress shortcodes, we suggest checking this article that clarifies how a shortcode works and how to create your own shortcode.

Requirements

• You will need the Premium Addons Pro plugin installed and activated on your website.
• Premium Addons works only with Elementor Page Builder plugin, so you will need to have it installed and activated as well.
• Make sure to enable the Display Conditions feature. Check this article to know how to do that.

Enable Display Conditions Feature

Navigate to your Elementor element settings > Advanced tab > Display Conditions and switch the “Enable Display Conditions” switcher.

Add The Dynamic Display Conditions

• Action: Select whether you want to show or hide the element based on the selected display conditions.
• Conditions: Here we will set the condition and set the values to compare to.
  • Type: Set the condition to Shortcode.
  • Shortcode: Add the shortcode that you want to . For example “[check_today_date]“
  • Is or Is Not: Choose the condition type.
  • Value: The value which you want to compare with.

A. Date Rang Example Using Shortcode Display Condition

In this example, we will show how to set Display Conditions to show a sale banner using Premium Modal Box in the duration between Dec 1, 2025 and Dec 31, 2025.

1. We start with adding the shortcode that checks today’s date and return true if it’s between Dec 1, 2025 and Dec 31, 2025 and false other wise. To do that, you need to add the shortcode in child theme’s functions.php file, or you can use any PHP code snippets WordPress plugin you want.

add_shortcode( 'check_today_date', 'check_date' );

function check_date() {
     // Here, we add the PHP function that check for the condition we want and return a true/false

    //Get today's date
    $today = strtotime( date('Y-m-d') );

    //These specifies the start and end dates.
    $start = strtotime( '2025-12-01' );
    $end   = strtotime( '2025-12-31' );

    // Return true if today's date is between the start and end dates.
         return ( $today >= $start && $today <= $end );
}

2. To make the modal box shows on page load, we navigate to Premium Modal Box widget settings > Content tab and set Trigger option to On Page Load.
3. Now, we set the display conditions by navigating to Modal Box settings > Advanced tab > Display Conditions and set the condition type to Shortcode.
4. Set the options as follow:
   • Shortcode: [check_today_date]
   • Value: 1
5. Now, every time the page loads, the shortcode will run, check today’s date and return true/false if it’s between between Dec 1, 2025 and Dec 31, 2025 or not.

B. Add Cookie Consent Bar Using Shortcode Condition

This example shows how to create a cookie consent bar in Elementor using Shortcode Display Condition from Premium Addons. It works by storing a cookie in the user’s browser when the accept button is clicked, then checking for that cookie to determine whether the bar should appear on future visits or not.

1. First, we add the shortcode that checks if the accept cookies button is clicked and return true or false depending on that. The shortcode can be added in child theme’s functions.php file, or any PHP code snippets WordPress plugin.

add_shortcode( 'check_cookie_consent', 'check_cookie' );

function check_cookie() {

    $consent = isset($_COOKIE['cookie_consent']) ? $_COOKIE['cookie_consent'] : null;

    return 1 == $consent;

}

2. Second, navigate to the settings of the Elementor container that will be used as the cookie consent bar -> Advanced tab -> CSS ID, add the ID cookie-bar.
3. Then, we set the display conditions for the Elementor container which will be used as the cookie consent bar by navigating to its settings -> Advanced tab -> Display Conditions and set the condition type to Shortcode.
4. Set the options as follow:
   • Shortcode: [check_cookie_consent]
   • Value: 1
5. To add the accept cookies button, we will use our Premium Button widget which allows you to add JS functions to be triggered on button click.
6. To do that, navigate to widget settings -> Content tab -> Button, enable onclick Event and add the code below:

jQuery('#cookie-bar').css('display', 'none');

var today = new Date(),
    expire = new Date();

var cookieValue = 1;
var isSecured = location.protocol === 'https:' ? 'Secure;' : '';

expire.setTime(today.getTime() + 3600000 * 8760);

document.cookie = "cookie_consent=" + encodeURIComponent(cookieValue) +
    "; expires=" + expire.toGMTString() +
    "; path=/" +
    "; SameSite=Strict; " +
    isSecured;

That’s It!

Now you can control which elements to show or hide depending on the result of a shortcode.

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help!

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.