Make whole feature box clickable as link

Hi
I would like to insert a link as the whole feature box.
How could I do that?
My url: www.officinacasona.com
thanks

Hi There,

Please add the feature-box-1, feature-box-2 and feature-box-3 to the class field of your featured boxes.

After that add the following code under Customizer > Custom > Global Javascript:

jQuery(document).ready(function($){
	$(".feature-box-1").wrap('<a href="http://officinacasona.com/link-1/" />');
	$(".feature-box-2").wrap('<a href="http://officinacasona.com/link-2/" />');
	$(".feature-box-3").wrap('<a href="http://officinacasona.com/link-3/" />');
});

Sorry, it wouldn’t work with a Facebook and a mail chimp generated url. It worked though with a mailto link.
What should I do?
Also, do they open in a new window by default?
Thank you

Hi There,

Sorry, it wouldn’t work with a Facebook and a mail chimp generated url. Can you give us sample of that URL and where you want to implement it?

No, they will not open on a new window/tab by default. To open it on a new tab, we have to add this target="_blank" like below:

jQuery(document).ready(function($){
	$(".feature-box-1").wrap('<a href="http://officinacasona.com/link-1/" target="_blank"/>');
	$(".feature-box-2").wrap('<a href="http://officinacasona.com/link-2/" target="_blank"/>');
	$(".feature-box-3").wrap('<a href="http://officinacasona.com/link-3/" target="_blank"/>');
});

Of course.
In the last section of www.officinacasona.com I would like to insert the following links:
respectively

Hi There,

Please try with this code instead:

jQuery(document).ready(function($){
	$(".feature-box-1").wrap('<a href="http://eepurl.com/cqITMb" target="_blank"/>');
	$(".feature-box-2").wrap('<a href="mailto:your@email.com" target="_blank"/>');
	$(".feature-box-3").wrap('<a href="http://www.facebook.com/officinacasona" target="_blank"/>');
});

Can I target the URL from the Feature Box instead of hard-coding it into the JS?

Hi @elemcee,

Thanks for writing around! Yes you can, do have any example URL so we can take a look at your current setup and suggest you a solution accordingly?

Thanks!

Hey there - I applied very similar coding to my site previously and it was functional, but now it it looks as though it is no longer working. The console says that the jQuery is not defined. What do I need to add and where to make it functional again? Thanks!

Hi Mary,

The error will occur if the code was added before jquery is loaded at the bottom of the page. This is not usually the case. It will happen if another jquery from third party plugin is loading it at the bottom.

First, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If this is not coming from a plugin, please try to remove any customization you have. Check again after that.

If nothing works, it would be best if you will open a new thread. Then share the URL with the actual issue so we can check directly. No need to reply here because in case we need credentials, you should share it on your own thread. No need to reply here. Thank you.