Service icons - clickable

Dear Vlad… my new best friend ;o)

In the Rocked Pro theme… Is it possible to make service icons clickable (like in Moesia)?

Best regards - Maria!

Hi,

Sorry to dissapoint, but no. It didn’t make much sense to add this as a feature and overload the theme.

No problem, still love the theme. Have a great day! Keep up the good work!

Is there any update on this, are you planning to make them clickable?

Overload? Why overload? To make the whole container div including the icon, title and description would be the natural choice from an usability point of view. Any user will try to click the icon instead of the title… any workaround?

Similarly for the Moesia Pro theme, I modified the theme code to wrap the tag around the icon and the text and it worked fine, however I had to modify it with every update and setting up a child theme never worked… I have had some complaints already that the icons are not clickable, so to make them happy I have to keep modifying it every time the theme updates… :frowning:

Hi guys,

I hace the same issue: need to the image of the icons to be clickable.
Anyone willing to share how you adjusted (as Sandro asked for workaround also)

Thx in advance

Regards from Barcelona,
Michel

Dear Michel,

To make the service icon to become clickable, please try to do the following 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($) {

   'use strict'

   $('.service-area .roll-iconbox').each(function(){

    var serviceLink = $(this).find('a').attr('href');

    $(this).find('.icon').wrap('<a href="'+serviceLink+'"></a>');
    
   });
   

})(jQuery);   

  1. Update

Regards,
Kharis

Hi,

I’m using the Sydney theme, in Service section, they’re service icons in a circle. When I move my cursor to the icon it’s allowing me to click, and rest of the area in the circle it’s not allowing me to click.

can you please tell me how to make service icon circle also clickable.

Thanks in advance.

Regards,
Kavya.

Hello Kavya,

Please try adding the below CSS code into your site’s addutional CSS option which resides under the Appearance > Customize > Additional CSS.


.roll-icon-box .icon a{
  display: inline-block;
  width: 70px;
  height: 70px;  
}  

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

I am using Astrid for my site www.saveurs-en-scene.com/new/

I have :
1- installed “Custom CSS and Javascript” plug in
2- copied the code you provided (#593799) into the plugin box

but the service icons are still not clickable : http://www.saveurs-en-scene.com/new/#prestations

Can you please help ?

Thanks / merci
Carole

Hello Carole,

Astrid has different markup on services. That’s why the jQuery code I suggested won’t work. You should use this one instead.


;(function($) {

   'use strict'

   $('.service-area .service').each(function(){

    var serviceLink = $(this).find('a').attr('href');

    $(this).find('img').wrap('<a href="'+serviceLink+'"></a>');
    
   });
   

})(jQuery);  

Regards,
Kharis

Hi Kharis,

Thanks for your very quick answer.

I have implemented the code you mentionned, but it does not change, the images are still not clickable.
See : http://www.saveurs-en-scene.com/new/#prestations

Maybe I should have mentionned that I am using images to illustrate the services, and not icons ? Sorry if this was misleading…
Maybe I should also indicate that I am using a child template ?

Can you please help further ?

Thanks
Carole

Hi Carole,

Thank you for the followup!

I inspected the source code of your site with the web browser; it looks like the last code I suggested hasn’t yet been applied. Did you intentionally remove it? Please put it back to help me easier debugging the problem.

Regards,
Kharis

Hi Kharis

No I didn’t remove it, I applied the code as you suggested, and I still see it on the plugin page.
There is a note on the right side, besides the code : 2017-06-07 14:15:13 [published].

Would it help if you could access to the backoffice ?

Carole

> Would it help if you could access to the backoffice ?

Yes, please the username and password to your site admin (/wp-admin) to kharisblank@gmail.com; mention the link to this topic to indicate this comes from you.

Regards,
Kharis

It works - customer is happy ! Me too !
THANKS Kharis

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis