[Resolved] Using conditional fields in an Elementor page builder single page template

[Author]

Posts

[AustinB6251]

Hello,

I'm trying to use conditional fields in Elementor but running into some issues.

Essentially I'm trying to show an Elementor Icon with text, using a field as the text, but only show if the field isn't empty.

I've found other posts in the forums that mention this issue, but I wanted to check if there is a workaround.

From what I can see the Toolset conditional shortcode only works with Elementors shortcode widget. I want to put some actual HTML in here which just gets stripped out if I'm using this block from elementor.

Is there another way to add the shortcode in? I've tried using this code too in a HTML block but doesn't work:
{!{wpv-conditional if="( NOT(empty($(phone))) )"}!}This field is not empty{!{/wpv-conditional}!}

Is it possible to utilise this instead and insert HTML? Any possible work arounds here?

And lastly one other issue I'm trying to workout, how can I output the text of a URL field?

Again an issue with Elementor here, I'm also trying to use this in the Icon + Text widget.

I want to have an icon that outputs the website address, and links to that address.

If I use Elementor's native 'Dynamic' option I can set the actual link address to the Toolset URL field, but not the description. All the other fields come up, but because this is a URL field it looks like I can only use it in actual link fields, not text.

Again would be great if I could use a shortcode here but this seems to be a built in limitation of Elementor, it won't render shortcodes on page unless they are in the shortcode element. And catch 22, if they are in that element, I can't render HTML.

Any help appreciated!

Thanks,

Austin

[Luo Yang]

Dear Austin,

If the custom field "phone" is created with Toolset Types plugin, Types plugin will pre-pend slug "wpcf-" before the field slug, so you will need to try below codes:

{!{wpv-conditional if="( NOT(empty($(wpcf-phone))) )"}!}This field is not empty{!{/wpv-conditional}!}

And test again

[AustinB6251]

Thanks Luo, I've tried this and unfortunately this doesn't render and just shows the actual code.

I'm stuck at a bit of a catch 22 here with Toolset and Elementor in all three below scenarios:

A) I can use Toolset's conditional shortcodes within Elementor's shortcode element to render plain text, but this doesn't work with HTML (outputs as code)

B )If I go to use the the Toolset's conditional shortcodes in an Elementor text edit box, the HTML renders but I encounter display issues.

C) If I go to use native Elementor blocks (eg Icon with text) I can pull in toolset fields fine, which looks great BUT then I can't use Toolset's conditional shortcodes to show or hide if empty.

Any other solutions to explore?

[Luo Yang]

I have tested above codes in my localhost with a fresh WordPress installation + the latest version of Toolset plugins without Elementor plugin, it works fine.

So there might be other compatibility problem in your website, the problem you mentioned above seems to be a compatibility problem, please try these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2019, deactivate all custom PHP/JS code snippets, and test again

3) If the problem still persists, please a copy of your website( you can put the duplicator package in your own google drive disk, and share the link in below private message box), also point out the problem page URL and view URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[AustinB6251]

Closing this ticket as I think this just a fundamental issue between Elementor and Toolset.

There isn't a really robust way to use Toolset's conditional shortcodes with default Elementor blocks. If someone finds a solution in the future or workaround, I'd love to hear it!

[jamesK-8]

Did you ever find an easy way to do this? I figured a way to do this using jQuery. I fill hidden elements with 'types fields' and use jQuery to compare those elements and display what I need.
In Elementor there is a shortcode element/widget and i added this code to display a date for events. Some events span multiple days, so this code will compare the differences from the start and end dates. This is the only way I figured to have a 'conditional' using jQuery.
<div id="date-start-month" style="display: none;">[types field="begin-date" style="text" format="M"][/types]</div>
<div id="date-start-day" style="display: none;">[types field="begin-date" style="text" format="j"][/types]</div>
<div id="date-start-year" style="display: none;">[types field="begin-date" style="text" format="Y"][/types]</div>
<div id="date-end-month" style="display: none;">[types field="end-date" style="text" format="M"][/types]</div>
<div id="date-end-day" style="display: none;">[types field="end-date" style="text" format="j"][/types]</div>
<div id="date-end-year" style="display: none;">[types field="end-date" style="text" format="Y"][/types]</div>
<span id="full-date"></span>
<script>
var mydate = jQuery('#date-start-month').text() + " " + jQuery('#date-start-day').text();
if (jQuery('#date-start-year').text() != jQuery('#date-end-year').text()) {mydate = mydate + ", " + jQuery('#date-start-year').text();}
if (jQuery('#date-start-month').text() != jQuery('#date-end-month').text()) {mydate = mydate + " - " +jQuery('#date-end-month').text() + " " + jQuery('#date-end-day').text() + ", " + jQuery('#date-end-year').text();
}
if (jQuery('#date-start-month').text() == jQuery('#date-end-month').text()) {mydate = mydate + " - " + jQuery('#date-end-day').text();
if (jQuery('#date-start-year').text() == jQuery('#date-end-year').text()) {mydate = mydate + ", " + jQuery('#date-start-year').text();}
}
jQuery('#full-date').text(mydate);
</script>