[Resolved] How to display the content of custom fields on a page using Elementor HTML widget

[Author]

Posts

[ericE-4]

I'm trying to build some HTML to display, using the contents of a custom field within an "<a> tag. In this particular instance, I'm trying to display a phone number (which is an active link) in a popup in Elementor. This is the HTML that I want to render:

<a href="tel:[[phone-num]]">[[phone-num]]</a>

...where [[phone-num]] is the value in a custom field (the slug is "phone-num").

I've tried using the "types" shortcode like this: [types field='phone-num'][/types].

I added an HTML widget, and for the contents of that widget I added:

<a href="tel:[types field='phone-num'][/types]">[types field='phone-num'][/types]</a>

But it doesn't work.

I know I could build a view, then add the "Toolset view" widget to my Elementor page where I want the custom field to display, but this seems rather cumbersome to build a view every time I need to display a field value. I'm certain there must be a shortcode that can be used!

[Christian Cox]

Hi, it depends on where the custom field is stored. If the custom field is stored in the post you are currently displaying, you can try two things:
1. Use a text editor instead of an HTML editor widget. Elementor's HTML and shortcode widgets often have trouble with Toolset shortcodes.
2. Try adding the output='raw' parameter to the types field shortcode. This will suppress extra HTML that may be added for formatting:

<a href="tel:[types field='phone-num' output='raw'][/types]">[types field='phone-num' output='raw'][/types]</a>

If the custom field is not stored in the post you are currently displaying, you must target the correct post. That can be done with an item attribute, or by using a filtered View. Let me know if you have additional questions about that.

[ericE-4]

The problem was resolved when I switched to a Text widget. Strange how the HTML widget is incompatibl;e with Toolset.

Thanks!