product-page Alt way to change URL to a product picture (store) without Java AND uniform solution throught site

https://www.dphworld.com/villas/mykonos/#anchor

If a pass is needed in any step, its 1234

I was forced to use the store so as to get access to some perks, such as categories etc. but I am NOT interested in the cart and checkout function. Managed to redirect the product (to be added to cart) picture bellow in red circle away from the store and to the internal site-link that I want (/mykonos/helios), using the Java snippet bellow.

So yes, I have a working solution BUT it is not ideal since eventually its going to be repeated over 100 times, meaning over 1200 lines of code and hard to upkeep.
 

Is there another way to force the image to link to another page of the site? No code preferably or at least shorter/easier/CSS

TIA

<!----MYKONOS - HELIOS --->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var customLink = document.getElementById('thumb-bhelios-estate-mykonos-18-guests-9-bedsb');
    if(customLink) {
      var links = customLink.getElementsByTagName('a');
      for(var i = 0; i < links.length; i++) {
        links[i].href = 'https://www.dphworld.com/mykonos/helios';
      }
    }
  });
</script>

EDIT: ADDITIONALLY, I just now noticed that by using a summary block in another page to display those products, the URLs revert back to the original ones leading to the "cart page", instead of the intended URL forced by the java script. 

https://www.dphworld.com/antiparos/iris  pass 1234

(2nd picture, the bottom url is by hovering on the middle image)

This was countered by a non elegant solution, provided by the script bellow which does also simplify the code but - unfortunately - hovering over obviously displays the old "wrong" address. For the time being its only implemented in 

https://www.dphworld.com/corfu/phos

pass 1234

I would really prefer a more elegant solution where the old address is not displayed and the code is simple

<!-- VILLA URL redirection -->
<script> 
function redirectUrl(fromUrl, toUrl) {
  // Check if the current URL matches the old URL
  if (location.pathname === fromUrl && !window.frameElement) {
    // Redirect to the new URL
    window.location.href = toUrl;
  }
}
// Define the old and new URLs and call the function
redirectUrl("/villas/p/phos-estate-corfu-12-guests", "/corfu/phos");
</script>

Both image + title will use same link or different link?

If same, I think we can add link to title with <a> tag, then append this url to image

1 hour ago, tuanphan said:

Both image + title will use same link or different link?

If same, I think we can add link to title with <a> tag, then append this url to image

Both image and title use same link, throughout the site. Villa name and image is constant and specific for each villa. No sure how to implement what you are suggesting.

Something like this

and you need to use this code to Code Injection, to make <a> tag render properly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".grid-item .grid-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

18 hours ago, tuanphan said:

Something like this

and you need to use this code to Code Injection, to make <a> tag render properly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".grid-item .grid-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

 

That worked partially. The Title under the picture now points to the correct https://www.dphworld.com/antiparos/kallisto/ as intended but the picture per se still points at https://www.dphworld.com/villas/p/antiparos/kallisto . Adding <a href="https://www.dphworld.com/antiparos/kallisto/">Villa Kallisto | Antiparos | 16 Guests</a> in the metadata of the 2 thumbnails didnt cut it either

4 hours ago, takis-7124 said:

That worked partially. The Title under the picture now points to the correct https://www.dphworld.com/antiparos/kallisto/ as intended but the picture per se still points at https://www.dphworld.com/villas/p/antiparos/kallisto . Adding <a href="https://www.dphworld.com/antiparos/kallisto/">Villa Kallisto | Antiparos | 16 Guests</a> in the metadata of the 2 thumbnails didnt cut it either

I can't find product, can you check link again?

https://www.dphworld.com/antiparos/kallisto/

Links work, if you mean that. The idea is for you not to have access to the product (/p/......) pages as I am not really selling stuff, merely using the shop template as I need access to category etc. functions for summary block. If its too much of a hassle, just leave it - I would rather bend your ear another time on something that is REALLY above my head and is completely broken 😃.   The 2nd code structure I used may not be perfect but its still a valid solution for all practical purposes and fast to implement, just a one line code; even the history of universal filter works. Am I just an anal perfectionist. 

EDIT: Yeah, definitely dont bother with it. I wrote a script in excel to automate the URL renaming code generation so anything else would just be cumbersome. Thanks for your time.

7 hours ago, tuanphan said:

I can't find product, can you check link again?

https://www.dphworld.com/antiparos/kallisto/