Making phone numbers click-to-call

Hi there

How can I make the phone numbers in the footer and header contact widgets click-to-call for mobile phones? My site is www.bendoraboarding.com.au.

Thank you!
Jules

Hello Jules,

To accomplish it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

     if( $('.header-phone').length ) {

       var phone     = '12345';
       var phoneHTML = ' <a href="tel:'+phone+'">'+phone+'</a>';

       $('.header-phone').html('<i class="fa fa-phone"></i>'+phoneHTML);

     }

    })(jQuery);

Redefine your phone number on the phone variable.

  1. Update

Regards,
Kharis

Hi Kharis

Thanks for that. I think it’s changed the header, but I can’t tell because the header disappears for mobiles - I didn’t realise! It hasn’t changed the phone numbers in the footer or the contact page, which are both part of the theme design. Can you tell how how to make those two click-to-call?

Thanks again,
Jules

Hello Jules,

I am sorry for didn’t your intention correctly. You’ll need to revise the code to become like this:

    (function($){

      var phone     = '12345';
      var phoneHTML = ' <a href="tel:'+phone+'">'+phone+'</a>';

      if( $('.header-phone').length ) {
        $('.header-phone').html('<i class="fa fa-phone"></i>'+phoneHTML);
      }

      if( $('.west_contact_info_widget .contact-info').length ) {
        $('.contact-info').html('<span><i class="fa fa-phone"></i></span>'+phoneHTML);  
      }

    })(jQuery);

Regards,
Kharis

Hi Kharis,

I’m sorry but I couldn’t keep that code in. It turned the email and location icons in the footer all to phone, so the phone icon and number were repeated three times and there was no email or location. They were click to call though! Can you help again please?

Thanks,
Jules

Sorry for the incorrect code. Try replacing these lines:

      if( $('.west_contact_info_widget .contact-info').length ) {
        $('.contact-info').html('<span><i class="fa fa-phone"></i></span>'+phoneHTML);  
      }

with:

    if( $('.west_contact_info_widget .contact-info:nth-of-type(1)').length ) {
      $('.contact-info:nth-of-type(1)').html('<span><i class="fa fa-phone"></i></span>'+phoneHTML);  
    }

Regards,
Kharis

Hi Kharis,

We’re getting closer… now it has two phone icons and numbers and one email address in the footer, but no location.

Also, the phone number in the contact page is not click to call. Thanks for all your help… can we try again?

Thanks
Jules

Hello there,

Try this one, please.

(function($){

  var phone     = '12345';
  var phoneHTML = ' <a href="tel:'+phone+'">'+phone+'</a>';

  if( $('.header-phone').length ) {
    $('.header-phone').html('<i class="fa fa-phone"></i>'+phoneHTML);
  }

  if( $('.west_contact_info_widget .contact-info:nth-of-type(2)').length ) {
    $('.contact-info:nth-of-type(1)').html('<span><i class="fa fa-phone"></i></span>'+phoneHTML);  
  }

  if( $('#contact-module .contact-block:nth-of-type(3) .contact-data').length ) {
    $('#contact-module .contact-block:nth-of-type(3) .contact-data').html(phone);  
  }

})(jQuery);

Regards,
Kharis

Hi Kharis,

Thanks, but it’s the same result as last time - the location icon in the footer changes to phone so we have two phone icons, and the phone number in the Contact page is not click to call. I’m sorry!

Jules

Once extra code applied, you might need to clear site cache. Because it prevents recent changes to take effect.

Regards,
Kharis