Elementor: Feature Request: Configure conditions to show or hide blocks or sections.

Created on 25 Apr 2018  Â·  152Comments  Â·  Source: elementor/elementor

Your dynamic content on Elementor pro 2.0 is amazing!
the option to design and style content from custom post types and custom fields is really gold!
(Pods, ACF, Types)

...But the only missing feature is to make some blocks, or elements to be conditional based on custom field or custom php.

For example:
I'm creating an affiliate niche website, with books. Every book have some custom fields based on where can I buy it, so I have maybe 3 or 4 custom fields to show a button for each link,

I would like to show the button only if this custom field is not empty.

Another example:
I have a blog, but sometimes I put an special gift as attached PDF, if I use Elementor and create a beautiful design with custom fields, then it will appears on every post, even if the PDF custom fields is empty.

Does it make sense to you?
thank you so much!

I'm a new Elementor lover, coming from Divi. ;)

requesfeature

Most helpful comment

We have now finished and released the DynamicConditions-Plugin:
https://wordpress.org/plugins/dynamicconditions

It can hide/show widgets/sections if a condition met, based on dynamic tags (so it will work for post-thumbnails, acf and everything which use dynamic tags).

Options to show/hide for user-roles and login-state are already planned.

All 152 comments

Yes I agree! The ACF integration is kind of useless unless you can at minimum make sure the field actually has something in it.

+1

+1

Elementor widgets and sections already have a UI on conditional displays: Advanced > Responsive. The place with the "hide from mobile" & "hide from desktop" switches.

That UI could be expanded to "Hide when value X is empty (or unchecked…)" and the X would be the Elementors ACF dynamic dropdown selector.

+1
ACF plugin + Elementor 2 is an amazing combination. Actually, it is one of a few options to make a decent site where editors don't need to go into Elementor builder for editing blog posts with a slightly more advanced content. If one of the custom fields stay empty, Elementor still renders an empty block dedicated to that field in the template. This is a bug by all means, not a feature ))) Multiplying templates is also not an option. There should be a default validation if the value is set and if not, the field wrapping elements should not appear.

Edit: The code I originally posted works rarely since get_fields does not get info about custom fields that haven't been filled. In order for this "lame hack" to work, I have to do it the other way:

    <?php
$all_acf_fields = get_fields(get_the_ID());
echo '<style>';
    echo 'body:not(.elementor-editor-active) [class*="acf__"] { display: none; }';
    foreach($all_acf_fields as $acf_field_slug => $acf_field_value) {
        if ($acf_field_value != ''){
            $acf_field_slug = preg_replace('/\W+/','',strtolower(strip_tags($acf_field_slug)));

            echo 'body:not(.elementor-editor-active) .acf__'.$acf_field_slug.' { display: block; }';
        }
    };
    unset($value);
echo '</style>';
    ?>

This is a kind of lame hack for this feature since it's CSS based but at least it's simple:

Insert the following in header.php after the body. The loop generates .acf__field_slug { display:none; } for each empty acf field in the current page. To hide a section or element, just throw the desired class acf__field_slug into the advanced > classes input field.

<?php
// Hide Elementor sections / elements when acf field is empty. Everything is shown when editor is active
// Usage: Add acf__[field_slug] classname into the desired element (for example acf__caption, acf__map-section)
$all_acf_fields = get_fields();
echo '<style>';
    foreach($all_acf_fields as $acf_field_slug => $acf_field_value) {
        if ($acf_field_value == ''){
            echo 'body:not(.elementor-editor-active) .acf__'.$acf_field_slug.' { display: none; }';
        }
    };
    unset($value);
echo '</style>';
?>

+1 This feature would be great for using the dynamic fields with templates!

The before PHP code broke my site with the next message:

Fatal error: Uncaught Error: Call to undefined function get_fields() in /home/X/public_html/wp-content/plugins/gp-premium/hooks/functions/hooks.php(22) : eval()'d code:17 Stack trace: #0 /home/X/public_html/wp-content/plugins/gp-premium/hooks/functions/hooks.php(22): eval() #1 /home/X/public_html/wp-content/plugins/gp-premium/hooks/functions/hooks.php(33): generate_execute_hooks('generate_wp_hea...') #2 /home/X/public_html/wp-includes/class-wp-hook.php(286): generate_hooks_wp_head('') #3 /home/X/public_html/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #4 /home/X/public_html/wp-includes/plugin.php(453): WP_Hook->do_action(Array) #5 /home/X/public_html/wp-includes/general-template.php(2614): do_action('wp_head') #6 /home/X/public_html/wp-content/themes/generatepress/header.php(18): wp_head() #7 /home/X/public_html/wp-includes/template.php(688): require_once('/home/X/...') #8 /home/X/public_html/wp-includes/template.php(64 in /home/X/public_html/wp-content/plugins/gp-premium/hooks/functions/hooks.php(22) : eval()'d code on line 17

Hey guys, I'm in the midst of designing a website and for the life of me cannot hide particular text that should not appear in mobile. It should only show on desktop and tablet. I have followed the examples: Click edit icon to the right, then select advanced and responsive followed by sliding hide function to the right. Seems simple, but it's not hiding the text sentence in mobile or tablet. It just seems to stay there.

Does anyone have any suggestions or is this just a glitch? Really love the Elementor plugin, but before diving into the pro version I have to be sure. It's truly frustrating and time consuming. I've thought about trying the DIVI program to see how that works out. Thanks in advance.

I wholeheartedly support this feature request.
This is needed especially for dynamic content templates where there are numerous scenarios where content simply isn't there and dynamic content templates display litter because there is no way to hide it.

Some examples:

  • You have a product post with images section made of images pulled from ACF. There is a header saying Product Gallery and below are images. If images are not uploaded by admin for a given product then whole section could be hidden. Instead the header is just littering the space.
    Right now hiding the unnecessary bits is achievable only by programming custom widget or expanding section controls.

A great example:
This plugin is amazing but only for menus. I think elementor should not only create these toggle switches for menus in elementor but also for elementor widgets, and elementor sections!
https://wordpress.org/plugins/if-menu/

I made a video for you to see how it works and how you could do something similar in elementor.

https://www.useloom.com/share/fb56e0fb4f1b4d8e94060eb2bf196207

You can SHOW or HIDE the menu based on if a customer is:
USER:
-logged in or logged out
-a certain type of user

MEMBERSHIP TYPE:
-has a certain type of subscription (woocommerce subscriptions for example)

GROUP TYPE:
-is in a certain group

LOCATION TYPE:
-has a certain ipaddress
-is from a certain country (Great for stores selling different things per region

Page Type:
-page type (front page, single page, page

Device:
on a mobile device

Language:
-language TRL

Thanks in advance! :)

+1

+1

+1

New to elementor.. I'm surprised & disappointed that this isn't already a feature.

I'll share a CSS snippet to hide Buttons without Links. In my case I have an ACF File field, returning the file_url (using it for PDF's). I added the dynamic ACF field to the button Link and gave the button an ID: event-prog-btn. The reason this works is because all buttons with a link gets an extra CSS class: elementor-button-link.

It only hides the button from view, but since it is empty it should not matter much if someone can un-hide it.
*
This will hide the button when you are editing your template! I recommend using a page/post with a file uploaded to the field as the Preview post.

/*Hides button without link*/
#event-prog-btn .elementor-button-wrapper .elementor-button.elementor-size-sm {
    display: none;
}
/*Displays buttons with link*/
#event-prog-btn .elementor-button-wrapper .elementor-button-link.elementor-button.elementor-size-sm {
    display: inline;
}

This issue is now solved for elementor widgets by using the free plugin https://widget-options.com/widget-options-elementor-widgets-beta/. Check out this video for an overview,

https://www.youtube.com/watch?v=yASuwt6i_30

@apphutdev well, nice plugin. but it must include in Elementor pro as an embedded feature

+1
Something like responsive section ... enable/disable for logged in users ... hide form normal visitors ...
A MUST HAVE!

+1 We REALLY need this feature to take advantage of ACF with Elementor

So, let me get this straight.

We pay for a professional theme framework which is supposed to be a developer friendly product.
This framework lacks basic conditional statements support (which is bread and butter for every developer and website creator out there).
Third party created incomplete solution and is charging money for that, and you consider the problem solved?
The only word that comes to my mind is "disgrace". This should be part of core Elementor features. It will sway thousands of developers to your side.

I hope you guys don't go the same route Divi went and failed (they forgot the main audience which was supporting their own clients for them for free - developers, and now they struggle to keep their clients with them).

I was a bit too quick to say solved. But it is certainly a step in the right direction. Also the elementor features that I mention are in the free version. So whilst I agree it should be in the core product it shouldn't cost you any extra whilst they hopefully solve the issue. An alternative which I have had a lot of success with is http://dynamic.ooo they take the approach to hide if no value is set. This one does cost but its got some awesome features that I would love to see in Elementor. Let's not forgot that you can always right you own plugins as they open sourced the code base and wrote some great documentation. I've been very impressed with where they have come in 2 years.

Thanks David for understanding.
My apologies to devs. for jumping high on this. I've dealt great deal of torn nerves with developers' negligence recently and this issue got ricocheted by my emotional momentum.

Anybody can help to find a hack or something for this issue?

isn't it possible to do this with current features?

1-add a custom field to each element (possible)
2-enter a target field (like ACF field)
3-compare, if result is true, show element

Yes please it's a must have!

@amindiary Nope.
First two steps are implemented but not the third one. For now you either need use one of the referenced plugins or implement your own way to check conditions which are relevant in your project.

I believe the challenge here is on deciding which visibility conditions should be checked for.
Every project is different. You might need to hide widget, column, section. In one project you need hide text when image is not given, in another you need hide sell button when product date is expired, in another you need show / hide child widgets based on selected section option and so on.

As for the hack it depends on your needs. There are several documented action hooks you can use to influence section, column and widget output:

elementor/widget/render_content
elementor/frontend/widget/before_render
elementor/frontend/column/before_render
elementor/frontend/widget/before_render
elementor/frontend/section/after_render
elementor/frontend/column/after_render
elementor/frontend/widget/after_render

Link: https://code.elementor.com/php-hooks/

I am currently working on this and have gotten a working solution that is not simply commenting the HTML out, or adding a CSS tag to display:none the field. The only issue I have had is that the page source shows the full code as it shows it before javascript has run. The current options for Responsive changes use strictly CSS to alter the content, but the code is still there, which for logged-in content, is a serious security flaw. I would love to start a branch and work on this with some of you. I am currently using the PHP hooks, but again, that only affects the visible content, not the source code.

Anyone know how this was implemented already for builders like the Beaver Builder? Did they simply use CSS, or Javascript to remove the field?

Elaborating on the above message that I posted, I added the toggle on each of the sections. In each of the sections, I could simply stop the content from posting in terms of the section html, but any child elements still will display. That is why I chose to use JS to remove the elements after the fact, so the Childs would be removed as well.

The only way that I could think this would work prior to outputting the HTML code would be to have a check in each of the child fields to see if the parent field/section was hidden/deleted. If it was, then do not output any text, or to somehow override the Childs with a function run in the parent. Not sure how that would work either, but excited to see if anyone can provide some developer insight.

@Djimusic Would an output buffer and subsequent discard of said output buffer work?

@ianlee That is how https://wordpress.org/plugins/woorocks-magic-content/ does it, which implements a similar way of doing it, but it continues to time out, or drastically slow down the speed of the website. Also, the API used for GeoIPLocation has been shut down, so that needs to be updated in that plugin as well. That's how I actually started on this rabbit hole. Would love to share my edited section code to you guys to build this feature as a community.

Hi there,

If you want a quick & dirty solution, here is an example for text widget. If it's empty, it's hiding parent section in jQuery.

jQuery('.elementor-text-editor:empty').each(function(e) { jQuery(this).parents('.elementor-section').hide(); });

Add my vote, please! This would be a FANTASTIC edition to Elementor that I could use on almost every site I've made.
Advanced > Conditional Display > [Show / Hide] widget if [custom field / other variable or factor] is [= / != / > / < ]/ >= / <= / null ] to [custom field / other variable or factor].

I like the way https://wordpress.org/plugins/menu-items-visibility-control/ uses conditional tags: https://codex.wordpress.org/Conditional_Tags . I haven't read all the comments in this thread, but looking for a similar solution with Elementor is how I ended up here. I think an integration with the Conditional_tags is probably the most comprehensive, future-proof approach that will probably "play nicest" with the wordpress ecosystem.

For instance, I am using memberium with activeCampaign. Supporting a use-case like this produces impossibly diverse scenarios, but with the conditional tag support, it's easy as these plugins add in their own conditional tags that I can just plug in and the plugin rides on the boolean returned by the shortcode. I think a "display condition" under the advanced tabs with support for conditional tags as mentioned by @Jaska is probably the way to go.

I'm not sure if I'm at the right place, but I'm after a function, so if you add a template to a page, for example section, there should be a way to set display conditions, so that section only shows for example if a post has the tag: showextra

.. Or am I off?

@QuietNoise If I may, I am not as radical as you in your first post because it is a product that is in constant improvement.

But I understand your point and what frustrates me is the absence of feedback, a milestone, for us. All here are users of the Pro version (and possibly the Unlimited version).
They could give a return similar to "We are developing, the forecast is 3 months for the functionality to be released", it would already help us to know if it is possible to wait for the time or if we need to look for alternatives.

It has been more than 5 months since this issue was created and so far, we do not even have a return, only a "request" label.

@fxaviers yeah. and you can find issues created about 11 months ago and still nothing happened (marked as feature request)

+1 Please please please please! This would be amazing.

We are currently working on a plugin which can hide/show widgets if a condition met, based on dynamic tags (so it will work for post-thumbnails, acf and everything which use dynamic tags).

You can see and download it here:
https://github.com/RTO-Websites/dynamic-conditions/

It is not yet finished or fully testet, i would call it alpha-version.
We have currently only testet with String-Fields (like acf text-fields).

Hope it helps someone.

The easiest server-side cure for almost every scenario presented in this thread would be a filter hook i.e. 'elementor_condition' (with $post, $this and $element) just before entering section, column or widget which would stop further rendering if filter returns with null or false. This way everyone could program their own condition based on their needs.
This would sort all conditions based on user rights, post data, taxonomies, custom fields etc.

While right now we can use pre-render hooks, we can't stop the elementor engine from crawling branches in the tree (and waste resource for rendering children) and we have to use ob buffer wrapping and discard the buffer in the post-render exit hook,

As for the front-end conditions in Elementor editor (aka conditions in ACF) that's entirely different book-long story. I don't think it's even in the road map anywhere.

But give us the hook guys and wrap it's output in conditional rendering and you will make hundreds of developers happy and as a result products based on your platform will be so much more amazing and complete.

Another +1 from me
I'm developing on the hosted solution and the sidebar solution for this works perfectly.

Being able to switch content on and of if a user is logged in would make my main pages much less confusing for my users as they still see the "sign up" content.

This issue is now solved for elementor widgets by using the free plugin https://widget-options.com/widget-options-elementor-widgets-beta/. Check out this video for an overview,

https://www.youtube.com/watch?v=yASuwt6i_30

It appears that these options have actually been removed in Elementor - on advanced, there is no longer any option to show/hide. So frustrating!

To enable go to Settings > Widget Options. On the Elementor Pagebuilder
Support module, click on Enable.

On Wed, 24 Oct 2018, 09:48 teachallaboutit, notifications@github.com
wrote:

This issue is now solved for elementor widgets by using the free plugin
https://widget-options.com/widget-options-elementor-widgets-beta/. Check
out this video for an overview,

https://www.youtube.com/watch?v=yASuwt6i_30

It appears that these options have actually been removed in Elementor - on
advanced, there is no longer any option to show/hide. So frustrating!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/pojome/elementor/issues/4246#issuecomment-432569635,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVe-4P7QJRqGVoZDZuHMYj3zF-K8_PaGks5uoCltgaJpZM4Tj11W
.

But that plugin only works with gadgets?
And not to hide/show sections?

I still don't know why @bainternet closed my issue #5971, it was more punctual than this post...

By the way, in #5971 i was asking (after Woorocks' plugin tests have failed) to add a "protection" layer for sections in Elementor, allowing only logged or logged out users to see different sections in a template.

I managed to find a solution by myself, if you want to check the plugin i made you can find it here:
https://github.com/teolaz/elementor-login-protected-sections

This feature request is so important to take Elementor websites to the next level. I'm really looking forward into this update.

We have now finished and released the DynamicConditions-Plugin:
https://wordpress.org/plugins/dynamicconditions

It can hide/show widgets/sections if a condition met, based on dynamic tags (so it will work for post-thumbnails, acf and everything which use dynamic tags).

Options to show/hide for user-roles and login-state are already planned.

@crazypsycho Brilliant I will give this a go. Thanks

@crazypsycho Thank you so so much! this is exactly what elementor team need to add.
Tested it, and its awesome! works fine.
thank you again.

@crazypsycho I just tested it and it's awesome! Thank you so much for your effort helping the Elementor community! 🙂

@crazypsycho Well done! It's a must have for single page templates and more.

Suggestion: Elementor are keen to promote site of the month but perhaps they should start promoting open source community plugin of the month. This effort definitely deserves rewarding.

@apphutdev Agree! and I have suggestions: https://gist.github.com/amindiary/e383e88fe02ee5982bb8eaba3e38f456

Thanks @ @crazypsycho ! does at have features that the "Extended Widget Options" plugin doesn't have?

@bentalgad its for free, lightweight and u can use it with every dynamic tag. I don't know if "Extended Widget Options" can handle dynamic tags. Maybe in the PHP field with custom PHP.

Thanks @Enoray !

More dev oriented: https://wordpress.org/plugins/ele-conditions/

6 months old and works with elementor free version

@crazypsycho i tried the plugin. i love the native ui thing, but the plugin breakes my site (in the parts that it is used on) and also it has much less options then "widget options" plugin. hope you will make it better. good luck!

Can you descripe what exactly is broken? I´ve just tested and didnt find an issue. Possibly it´s not compatible with an other plugin.

More options will possibly come in future.

It was breaking the layout. it could be something with jettabs, but it's just one guess, i already deleted the plugin.

Great job @crazypsycho don't mind bentalgad. Keep up the good work!

@bentalgad I think not always a lot of options is a good thing. This plugin solves a very known problem. I think it's great. It didn't break my site at all. It works perfectly fine for me.

It was breaking the layout. it could be something with jettabs, but it's just one guess, i already deleted the plugin.

@bentalgad you should be more precise regarding this. Otherwise don't write at all.

@fgschafer

I think not always a lot of options is a good thing. This plugin solves a very known problem. I think it's great. It didn't break my site at all. It works perfectly fine for me.

Great! i'm very happy to hear that, I just think "Extended Widget Options" is better, and it did break my site (i didn't test it on your site :).

you should be more precise regarding this. Otherwise don't write at all.

This is not @crazypsycho's plugin support page, it's an Elementor future request page. if @crazypsycho wanted some more information i would be happy to install the plugin again and post the problems in the right place (not that page as i mentioned :)

+1

Aldeacms' general request appears most reasonable.

We are currently working on a plugin which can hide/show widgets if a condition met, based on dynamic tags (so it will work for post-thumbnails, acf and everything which use dynamic tags).

You can see and download it here:
https://github.com/RTO-Websites/dynamic-conditions/

It is not yet finished or fully testet, i would call it alpha-version.
We have currently only testet with String-Fields (like acf text-fields).

Hope it helps someone.

The solution offered by the https://github.com/RTO-Websites/dynamic-conditions is clean and awesome. I'm using already.
Elementor clould integrate it to the core.
Thanks guys!

Hey guys. I've been searching for days for something like this but I'm having trouble. I'm not really a developer so I don't want to be given grief for this message, but I can't seem to get on the right track. Here's a screen recording which is under 2 mins if someone can help. Thanks!

https://www.dropbox.com/s/r1oqelcjnmnmtjh/dynamic_conditions.mov?dl=0

Hey @mattiebrownoz ,
if i saw right what u want to do, i have to tell you, u cant do it this way. But a workaround would be to build the table 2 times.

1 time with the field and 1 time without the field. Then u can tell the table without the field to show if not yes and the other one to show if yes.

You can only use Dynamic Conditions on Widgets, Columns and Section. But i think it's a nice feature request to extend it for the Repeater field. We'll check that later.

Thanks for clarifying and getting back to me.

I'm stumped. I can't get this to work with anything. If anyone has a 30sec screen recording I'd be very grateful about doing even the simplest dynamic work with this tool.
Like show a widget based on if an answer is yes or no so I can try to apply this to my workflow with widgets.

Thank you.

@mattiebrownoz Sorry, i dont got the Plugin for the tables.

But some hints for get it work:

  1. Make a Title Widget and select the field u want use for your condition.
  2. Get in the Title Widget both possible values.
  3. Build ur 2 possible tables
  4. Select for each on Dynamic Conditions "is eaqual to" and enter the value that needs to match for hide/show the widget.

If u need any more help it would be nice to just open a issue in the git project dynamic conditions this post should be used for elementor.

+1

I see so many people that would like to see ACL integration. I'll settle for just a HIDE/SHOW toggle.

Hi, here is a a plugin that allows you to hide/show any Elementor widget based on user role or if it is logged in or not: https://wordpress.org/plugins/visibility-logic-elementor/

Any other suggestions are welcome.

Hi guys,

I need an "intro" effect for a section that I use as main menu.
Under the main menu I use revolution slider to show an intro & I need to focus the visitor's attention to it.
I need to make this section - main menu to be invisible for xxxxx msecs, but I want it ONLY for the FIRST TIME to be invisible & ONLY for the first page, for any user that visits the site - after 20 secs it shows up.

The way it works now:
It shows up nicely after 20 secs, but this delay is "ON" all the time for all the pages in the site & you need to wait every time for it to reappear.

+1 I also feel like, since the ability to integrate with ACF is so nicely implemented, it would make sense to allow it to hide/show columns/sections based on selected/unselected ACF fields

+1

I recently started using this and it gets it done perfectly!

https://wordpress.org/plugins/dynamicconditions/

Firstly +1.

My pages are made up of 5 sections each with ACF fields (+ tabs). Being able to hide empty sections would save creating different versions of the same page layout over and over.

I recently started using this and it gets it done perfectly!

https://wordpress.org/plugins/dynamicconditions/

I'm trying a few of the suggestions above and this one hasn't broken the site so far but how do you get it working for sections?
I don't want white gaps between sections that are being used. I.e if I use section one and section 4 on a page at the moment section 2 and 3 still have spaces without content in. I want to hide them when blank

Hello,

thanks for that feedback, we will have a closer look a this white-space issue tomorrow.

I'm trying a few of the suggestions above and this one hasn't broken the site so far but how do you get it working for sections?
I don't want white gaps between sections that are being used.

I created an admin page where the user can choose to hide sections with a "Yes/No" switch from ACF. Then I test this in Dynamic Conditions. See if that does the trick.

I'm trying a few of the suggestions above and this one hasn't broken the site so far but how do you get it working for sections?
I don't want white gaps between sections that are being used.

I created an admin page where the user can choose to hide sections with a "Yes/No" switch from ACF. Then I test this in Dynamic Conditions. See if that does the trick.

Perfect, works just as I needed. Thanks!

We have tested dynamic conditions again. We didnt found an issue with white-spaces from hidden sections.
But we found an issue which could break layout if a section is hidden.
This is fixed now. Its possibly that this fixes also your white-space problem.

Thank you so much for this plug-in. I was also able to check if a user is logged in by checking for a not empty User ID

Really nice idea to check the user-id :-)

+1

I would like to archive true/false.

One example from my end:
I would like to use ACF PRO with dynamic content and use TRUE/FALSE to display things. Such as images. If yes = 1 = display this fields images, if no = 0 DON'T display this fields images.

_"If empty don't display if not empty display."_

URL:
https://www.youtube.com/watch?v=3LnsWSFGRv4

At first I started using Widget options which worked well for ACF "Basic" field types, however it seems to be very buggy with field types "choice" of multiple choice, especially "Checkbox" fields where it doesnt work at all.
Widget Options seems a promising plugin with a lot of features and user friendly, however it's a pitty this basic issue is there and was a big headache to figure out at first.
I contacted support a week ago and they said they would fix it in the future however in the meanwhile I tried
https://wordpress.org/plugins/dynamicconditions/

and it works wonderfully and straight out of the box, exactly as I expected it to!

Hi There,

How can I Show or Hide Elementor Column with WooCommerce Attribute Filters when the filter is empty?

What I am using:
Elementor Pro
WooCommerce
And
WooCommerce Offical Ajax-Enabled, Enhanced Layered Navigation
https://docs.woocommerce.com/document/ajax-enabled-enhanced-layered-navigation/?_ga=2.105093571.1759486539.1549029057-1964168459.1548098780
With
Dynamic Conditions that is compatible with Elementor
https://wordpress.org/plugins/dynamicconditions/

What I want to happen is instead of the Elementor column staying intact with nothing in it when Ajax Navigating thru the products, it would go away if the dropdown attribute filter category is empty so there is not a huge gap of blank space?

Thanks in advance 🙂

https://bit.ly/2RVGSX6

See how these gaps look terrible when you filter thru?

screen shot 2019-02-01 at 12 42 27 pm

screen shot 2019-02-01 at 12 43 17 pm

screen shot 2019-02-01 at 1 20 55 pm

While Dynamic Conditions is not working with columns i see no way to do that in a easy way. A Custom Widget would be my solution in that case.

+1

In next version DynamicConditions will work with columns as well.
And we will provide some nice date-compare functions.

This version is planed for next week, but we can´t promise it.
So it´s done when it´s done :-)

+1 and Pro user

Really looking forward to the new release with this feature!!! In my opinion, it's the only major feature missing with Elementor's ACF integration (although the "fallback" option is really great too!)

I came across a situation where I have to show a section ONLY if there're entries on a custom post-type on certain category... is it possible with DynamicConditions?

Currently i dont see a way to to do this on the box.
But you could build a new dynamic-tag which return the number of posts in a category/post-type.
Than you can select this dynamic-tag in DynamicConditions.

+1 and Pro user

+1 , Pro user

A new version of DynamicConditions has been released.
Now it works with columns. And it provides new date-compare functions.
A dynamic tag for number of posts is also included.

@crazypsycho Thank you for all your work!

Hi everyone,
first of all, congratulations for all questions and answers posted here. By far, github is the best.
This is my first post here and I want to share my solution to hide Elementor button (with JetEngine plugin) if a field is empty. (could also work with ACF, Pods....)
After few days of searching, reading and testing something specific to work by default with this condition (without success), I found a way for this request which is working very well for me. The client want a Button which is visible in front only when the post exist. Similar with the request of @aldeacms
Astra theme (not so important, I think), Elementor Pro, JetEngine plugin. Here is the how-to in .pdf.

Conditionally hide button in elementor when post is missing.pdf
I hope will be useful for "non-coders"

I don't know if this will be super helpful, but I'm using the hook below hook right now to conditionally show or hide an Apply Now button, based on if there's a URL for the appropriate custom field on the page edit screen.

To be clearer: The user enters the URL or doesn't on the page edit screen, and in my page template in Elementor brings in the result (or lack of it) as a Dynamic input.

As others have mentioned, fallbacks are great for different content, but I don't want to relabel the button or feed a different link in. I want the whole thing to not bother showing up.

add_action( 'elementor/widget/render_content', function( $content, $widget ) {

        /* We only need it showing up in one area, in our case; the whole post type has a single template */
    if ( is_singular( 'post_type_goes_here' )  ) {

               /* Bring in the ID and store it to use conditionally below */
        $id = $widget->get_settings_for_display("_element_id");

                /* There are a TON of values stored here; I var_dump'ed to find these that I needed */
        $link = $widget->get_settings_for_display("link");
        $url = $link["url"];

        if ( $id == "apply-now-button" ) {

                         /* The isset() didn't work, so I just made it a not equal to not empty string */
                        /* If you're not familiar with the notation, it's  CONDITION ? IF TRUE :  IF FALSE */
            $content = $url != "" ? $content : "" ;

        }
    } 
  return $content;
}, 10, 2 );

DynamicConditions plugin is the best plugin Elementor Pro needs inside core.

Elementor widgets and sections already have a UI on conditional displays: Advanced > Responsive. The place with the "hide from mobile" & "hide from desktop" switches.

That UI could be expanded to "Hide when value X is empty (or unchecked…)" and the X would be the Elementors ACF dynamic dropdown selector.

I'd like to push for Jaska's suggestion of an Elementor Pro-integrated feature within the "responsive" field of elements for showing their content only when the user types in a password to unlock it. The plugin "Essential Addons for Elementor Pro" has a password-protected widget, but this feature can be used to create locked text fields only and can't get applied to all website elements.

I must be able to further define if I want to protect the same section with one or multiple passwords and/or want to combine all password-protected sections in the same post and release them all at once when the user types in a matching password. This is more convenient than handling user IDs with third-party tools that often require the collection of email and password from users that can be a complex matter since GDPR regulations in Europe.

On top of that, I'd prefer to promote this "further reading" option in my blog post by having a placeholder for the locked content with a visual lock and an option to purchase a key with WooCommerce, on an external webpage or unlock with an existing password.

We really need this in core

+1

+1 for core. PRO user also. Without this the ACF is kinda useless since there are multiple places where the content changes and is or isn't available.

Your ticket has been created.

Ticket subject: Re: [elementor/elementor] Feature Request: Configure conditions to show or hide blocks or sections. (#4246)


Author: NikiTheLiger
Date: Tue, 05/14/19 12:14 am
Message:
+1 for core. PRO user also. Without this the ACF is kinda useless since there are multiple places where the content changes and is or isn't available.

--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/elementor/elementor/issues/4246#issuecomment-492108697

Powered by https://www.livechatinc.com/powered-by-livechat/?utm_source=ticket_footer&utm_medium=email&utm_campaign=lc_10152642"

Now that this feature is available, will your content continue to be crawled by Google even if you hide it on elementor.
PS: I am planning to create a different format with the same content on the same page

Now that this feature is available, will your content continue to be crawled by Google even if you hide it on elementor.
PS: I am planning to create a different format with the same content on the same page

Where is this feature available, link?

Yes, as a developer too i would love to see this feature too.
Elementor with íf/then/else functionality on ACF fields.

a serious killer of a feature, as in positive ;)
And would make Elementor stand out even more, but also get more preferences from devs to use.

@agoc408866 where is this feature available? In the core? or you mean the plugin?

@sschat i have been using Dynamic Conditions that enables if/then functions. It's pretty handy.: https://wordpress.org/plugins/dynamicconditions/

Totally +1

Dynamic Conditions is an Elementor addon that adds conditional logic to show and hide different elements. The plugin adds conditions to dynamic tags to show/hide a widget or section.

The plugin requires Elementor Pro since it uses Dynamic Tags to set the comparison conditions.

Setting display conditions is easy! Just enter the condition value and compare it to any dynamic tag. If the condition is met, set whether you want to show or hide the element.

https://wordpress.org/plugins/dynamicconditions/

Edit: I am not the plugin author nor am I affiliated with the plugin, it just seems to solve the problem most people on this thread seem to have

One condition that I would like to see as an option for visibility based on permissions if a user is logged in or not. For example: I am running a wholesale store site. It would be much easier to have two different header templates or menu blocks that would allow me to show specific items to my wholesale customers versus site guests. Right now I am doing it with php and css but it is easily circumvented by inspecting the page and inserting code to make elements visible.

My programming skills are shallow in my bucket of knowledge but I am a quick learner. I try to minimize Wordpress plugins so any troubleshooting is fairly easy to nail down.

Right now I am doing it with php and css but it is easily circumvented by inspecting the page and inserting code to make elements visible.

What approach are you taking in PHP that you can't prevent the output from rendering to the page to begin with? If it never renders it can't be inspected.

I create a custom widget when I need if/else logic. Let's say I need 2 different sections in the same page location based on whether an ACF field is populated, I'll simply add that logic to my widget first checking if the ACF field has value, if so return code A and if not return code B.

If I need to return Elementor widgets or sections, I save them as globals or templates and use do_shortcode('[elementor-shortocde-A]') or do_shortcode('[elementor-shortocde-B]').

Sometimes I also hook into the elementor/frontend/{$element_type}/before_render action.

+100000, this is the one thing that I would choose Beaver Themer over elementor.

The problem with https://wordpress.org/plugins/dynamicconditions/
is that it's not working with popups and you can't do popups with get parameter conditions...

+1 +2 +3 +4 +5
guys this is a must feature

Another problem with https://wordpress.org/plugins/dynamicconditions/ is that there is no option to have multiple or complex conditions that include or exclude certain conditions

The problem with https://wordpress.org/plugins/dynamicconditions/
is that it's not working with popups and you can't do popups with get parameter conditions...

+1 +2 +3 +4 +5
guys this is a must feature

DynamicConditions is working with popups. Just go in your popup to Popup-Settings and Advanced. There you will find DynamicConditions. And you can select "Request Parameter" as DynamicTag to use get parameters.

No it does not have it. it's not having an option to show it by GET parameter...

https://wordpress.org/plugins/dynamicconditions/
Totally works with Elementor.
I have a URL of a video in the form of a button. In my post template it will let you add the URL so when you click the button it takes you there. Not all posts have a video trailer. When they do not, it will now be hidden. Thanks for the info......

Sorry, not following here...Is it possible to hide/show a section based on a parameter from the url?

www.mylink.com/?show=hide

then a section is hidden?

with dynamic conditions you can do that, just use the "Request Parameter" dynamic tag for that.

+1 for this.

I wound up coming back to this today as I still can't find a way to conditionally render an Elementor Element outside of my first post on this issue, saving as a global or template and use do_shortcode within my conditional logic. This truly keeps the Element from rendering but feels a bit hacky.

The method I find 3rd party conditional plugins use is that of a mixed bag, they use the action hook 'elementor/widget/render_content', returning empty/null within it + they use the 'elementor/widget/before_render_content' hook or 'elementor/frontend/{$element_type}/before_render' hook to also check conditionals and then add a custom class to the parent wrapper div using $element->add_render_attribute( '_wrapper', 'class', 'my-conditions--hidden' ) and essentially hide the two "wrapper" divs from the viewable DOM with custom css.

This is not render control because a part of the widget still renders and only the "inside content" is not rendered. We need full render control please, leaving no trace in the DOM of a particular element if a condition isn't met. Thank you. =)

Anyone got a clue what hook is best to use the filter 'elementor/frontend/{element-type}/should_render'?

/includes/base/element-base.php L:652

I tried the action hook:

add_action( 'elementor/frontend/section/before_render', function ( \Elementor\Element_Base $element ) {
    $settings = $element->get_settings();
    if( 'test' === $settings['_element_id'] ){
        add_filter( 'elementor/frontend/section/should_render', false, $element, 10, 3 );
    }
} );

This action executes on the right section with an id of 'test' but the filter passing false doesn't work and the section still renders.

Would love to see a working example of this 'should_render' filter.

@pingram3541 same problem for me.
Anyone to explain should_render filter?

Ok, I got the goods from @bainternet ...

How to NOT render any widget with an id of 'test':

add_filter( 'elementor/frontend/widget/should_render', function( $bool, $element ){
    $settings = $element->get_settings();
    if( 'test' === $settings['_element_id'] && 'heading' === $type ){
        return false;
    } else { return true }
}, 10, 3);

How to NOT render any specific type of widget':

add_filter( 'elementor/frontend/widget/should_render', function( $bool, $element ){
    $type = $element->get_name();
    if( 'heading' === $type ){
        return false;
    } else { return true }
}, 10, 3);

How to NOT render any section with an id of 'test'

add_filter( 'elementor/frontend/section/should_render', function( $bool, $element ){
    $settings = $element->get_settings();
    if( 'test' === $settings['_element_id'] ){
        return false;
    } else { return true }
}, 10, 3);

Yeah it works !

Thank you @pingram3541 & @bainternet :)

But hey, instead of all custom suggestions and plugins adviced, can the Elementor team give us any indication if this feature will be released or not? :)

But hey, instead of all custom suggestions and plugins adviced, can the Elementor team give us any indication if this feature will be released or not? :)

lol agreed.

This plugin is all you need to make the job done and more....

https://wordpress.org/plugins/dynamicconditions/

it's working great with elementor popups also.

@amoyastudio this suggestion was already done for +3 times. My comment was about:

_instead of all custom suggestions and plugins adviced, can the Elementor team give us any indication if this feature will be released or not?_

+1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1

+1

+1

Whats going on with this feature? Show and Hide Sections/Columns/Widgets if values = empty...

+1

+1

Guys, read the thread above. There is a plugin Dynamic fields mentioned earlier in this thread. It works like a charm. And its free. Check it out. It does exactly what this thread wants.

+1

I have needed this a few times already.

Any updates on this request?

+1

This feature should be included in Elementor (Pro)..

You can use "dynamic conditions" plugin it's great for elementor it does the job great

I would love to see this feature natively supported by Elementor Pro.

The problem with dynamic conditions plugin is that it is quite slow and resource intensive. There is almost 1 second difference (this may vary based on number of fields) between page load with this plugin active and disabled. I think we should be able to do this natively

You can use "dynamic conditions" plugin it's great for elementor it does the job great

Great plugin indeed, thanks for the tip @amoyastudio

Hi, you can use Visibility logic for Elementor plugin since is light and effective https://wordpress.org/plugins/visibility-logic-elementor/

conditional elements based on user role would help out quite alot! #push

I was curious how Elementor competitors were going to see if any had this feature. I found that Oxygen has this feature and from their video it looks well implemented. I see this as yet another reason why Elementor needs to implement this - to keep up (or ahead?) of the competition. Hoping to see this sooner than later. Hoping this year is the "year of the widgets" for Elementor, catching up on highly requested backlogged feature requests.

I'm sure it's on their todo list, but they probably shuffled it to the back because they see that there are 3rd party plugins that already do it. Granted most of the 3rd party plugins for doing conditions seem to have pretty poor reviews and are resource intensive, so it would make sense that Elementor would implement something directly into the core.

Oxygen probably was forced to do it themselves because there was no 3rd party plugins to do so.

I was curious how Elementor competitors were going to see if any had this feature. I found that Oxygen has this feature and from their video it looks well implemented. I see this as yet another reason why Elementor needs to implement this - to keep up (or ahead?) of the competition. Hoping to see this sooner than later. Hoping this year is the "year of the widgets" for Elementor, catching up on highly requested backlogged feature requests.

This plugin is all you need to make the job done and more....

https://wordpress.org/plugins/dynamicconditions/

it's working great with elementor popups also.

Me, too, I'm using DynamicConditions.

I complemented it with some custom dynamic tags and it's working perfectly fine.

+1
Currently I depend on third party plugins to do this, which Elementor could support in the Pro version!

+1

Was this page helpful?
0 / 5 - 0 ratings

Related issues

arielk picture arielk  Â·  83Comments

parfilov picture parfilov  Â·  108Comments

bainternet picture bainternet  Â·  219Comments

bainternet picture bainternet  Â·  103Comments

pingram3541 picture pingram3541  Â·  149Comments