How to Make Featured Product Image and Title Clickable (Craft Theme)

[l1kim]

Hello,

How do you make both image and title of "Featured Product" clickable to its product page?

I would like it to be clickable WITHOUT underlining the Product Title as a link. 

https://putonlovemarket.com

[theycallmemakka]

Hi @l1kim 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
function getClosestViewDetailsLink(element) {
    return element.closest('.featured-product').querySelector('.product__view-details');
}

function handleClick(event) {
    var closestLink = getClosestViewDetailsLink(event.currentTarget);
    if (closestLink) {
        window.location.href = closestLink.href;
    }
}

document.querySelector('.featured-product .product__media-item')?.addEventListener('click', handleClick);

document.querySelector('.featured-product .product__title')?.addEventListener('click', handleClick);

</script>
<style>
.featured-product .product__title {
    cursor: pointer;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Raj-webdesigner]

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find Base.css file

Add this option if you just want to Only click on product total Than Put This Css

@media screen and (min-width: 767px){
       .collection .card__heading a:after{
		display:none;
	}
}

Otherwise This Css 

.collection .underline-links-hover:hover a{
	text-decoration: none;	
}

And if you want to do both Than Put This Css

.collection .underline-links-hover:hover a{
	text-decoration: none;	
}
@media screen and (min-width: 767px){
	.collection .card__heading a:after{
		display:none;
	}
}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Raj-Webdesigner

[l1kim]

Hmm.. This worked only for the top product but not the product underneath. Would you please help me do the same for the 2nd product the one right under it?

https://putonlovemarket.com/pages/candle-workshop

[theycallmemakka · Accepted solution]

Hi @l1kim ,

Try replacing the previous code with the below code. Also do not forget to like and mark the answer as accepted.

<script>
function getClosestViewDetailsLink(element) {
    return element.closest('.featured-product').querySelector('.product__view-details');
}

function handleClick(event) {
    var closestLink = getClosestViewDetailsLink(event.currentTarget);
    if (closestLink) {
        window.location.href = closestLink.href;
    }
}

document.querySelectorAll('.featured-product .product__media-item')?.forEach(function(t){
    t.addEventListener('click', handleClick);
});
document.querySelectorAll('.featured-product .product__title')?.forEach(function(t){
    t.addEventListener('click', handleClick);
});


</script>
<style>
.featured-product .product__title {
    cursor: pointer;
}
</style>

[l1kim]

So amazing! It worked!

Thank you very much,

[kingbeehkb]

Hello,

I've used this code for the same purpose and it actually worked perfectly which I truly thank you for. But it causes some weird issue.
so when I zoom in (on mobile) on the product photo the page either refreshes or crashes! 
Would you actually be able to check that and help me with it? 

[l1kim]

Hello, I’m not sure why it would crash on your end… since I’m not an expert at this. Maybe write a new post about it asking for help? 

[carpetsmart]

I used this for my site, carpetsmart.com and it seems to redirect to the product page on click but if you click the back arrow on the browser, it goes to the enlarged image instead of the home page. Thus, it seems to be a redirect. Is there an option that just forces a change to make the image click a direct link?