display a phone in a directory website

This thread is resolved. Here is a description of the problem and solution.

Problem:

How to add dynamic phone number form the phone custom field type to an Elementor button?

Solution:

Elementor button does not allow the Phone custom field type. But you can follow the steps below:

- Add a button in Elementor with static content.
- Copy the HTML code that is generated in the front end for that button.
- Add an HTML widget in Elementor and paste HTML code and use the shortcode below to retrieve the dynamic content and replace it with the static content:

[types field="cellphone"]

Replace "cellphone" with the slug of your field.

A sample final HTML code:

<div class="elementor-button-wrapper elementor-align-center">
<a href="tel:[types field='telefono']"
class="elementor-button-link elementor-button elementor-size-lg elementor-animation-grow" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-left">
<i aria-hidden="true" class="fas fa-phone-alt"> </i></span>
<span class="elementor-button-text">Llamar</span>
</span>
</a>
</div>

This support ticket is created 3 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by marcM-3 3 years, 5 months ago.

Assisted by: Christopher Amirian.

Author

Posts

November 8, 2022 at 1:04 pm #2492109

marcM-3

Tell us what you are trying to do?

I'm building a website directory. In the professional single template (made with elementor) there are contact details.

The button to contact via email and the button to link to the professional's website work correctly.

But the button to contact by phone does not allow adding the dynamic phone data.

Is there any documentation that you are following?

I haven't found any.

Is there a similar example that we can see?

hidden link

What is the link to your site?

hidden link

November 9, 2022 at 7:25 am #2492649

Christopher Amirian

Supporter

Languages: English (English )

Hi there,

I checked and it is not possible to add the Phone custom field type to an Elementor button.

You can use the Toolset shortcode to retrieve the phone number like this:

[types field="cellphone"]

(replace `cellphone` with the slug of your field)

Then you can use the HTML code generated by the button and add an HTML element and embed the shortcode above inside that code.

I checked the page that you have the yellow button and come up with this code:

<div class="elementor-button-wrapper">
    <em><u>hidden link</u></em>
</div>

In the code above replace `cellphone` with the slug of your field in two places. One is the link of the A tag and the other one is the text of the button.

That should do the trick.

November 9, 2022 at 12:45 pm #2492873

marcM-3

Hi Cristopher,

it's practically already solved, but I think there's an error in line 2.

When I click the button, I can't make a call.

I have tried putting a phone directly and it works. It only fails when I try it with dynamic data.

Is it possible that a ] is missing in the code?

I've tried to put it but didn't work either.

The code I added is the following.

<div class="elementor-button-wrapper elementor-align-center">
hidden link
</div>

I have only made minor changes:

1- I have centered the div
2- I have changed cellphone to slug as you mentioned
3- in line 7 I have not put the [types field="telefono"] but only text

Thanks.

November 9, 2022 at 1:40 pm #2492913

Christopher Amirian

Supporter

Languages: English (English )

Hi there,

Yes you are correct I missed an ending ]

Here is a fixed code:

<div class="elementor-button-wrapper elementor-align-center">
<em><u>hidden link</u></em>
</div>

Thanks.

November 9, 2022 at 3:49 pm #2492971

marcM-3

Hi Cristopher,

it has finally work! 🙂

It didn't worked in a html widget but in has worked in a shortcode widget.

There was also missing a .

So, the final code is:

<div class="elementor-button-wrapper elementor-align-center">
hidden link
</div>

My issue is resolved now.

Thank you very much! 🙂