Why isn't my liquid code redirecting to other product pages?

[WBYS_Ltd]

Hello!

The product below is available in 3 other colours. I have embedded liquid code to display them but when i click the pic of another colour, it doesn't take me to the page of that product. Anyone know i can go about fixing this? 

liquid code is ; 

<div>
<h2 style="font-size: 16px;margin-bottom: ">Other Available Colours</h2>
<div style="display: flex;">
{% for field in product.metafields.custom.other_available_colours.value %}
<a href="{{ product.url }}">
<img style="max-width: 100px; height: 100px; vertical-align: top;" src="{{ field | image_url }}" />
</a>
{% endfor %}
</div>
</div>

thanks!

[ZestardTech]

Hello There,
Please share your store URL and Password.
So that I will check and let you know the exact solution here.

[WBYS_Ltd]

https://house-of-slippers-uk.myshopify.com/products/scuffette-ii-ladies-mule-slippers-chestnut?varia...

house

[WBYS_Ltd]

The product is the Ugg Scuffette Chestnut 

[ZestardTech]

Hello @WBYS_Ltd 

Please added this code.

<div>
  <h2 style="font-size: 16px; margin-bottom: 10px">Other Available Colours</h2>
  <div style="display: flex;">
    {% for field in product.metafields.custom.other_available_colours.value %}
      {% assign variant_id = field.variant_id | plus: 0 %}
      {% assign variant = product.variants | where: 'id', variant_id | first %}
      {% if variant %}
        <a href="{{ variant.url }}">
          <img style="max-width: 100px; height: 100px; vertical-align: top;" src="{{ field.image | product_img_url: 'compact' }}" />
        </a>
      {% endif %}
    {% endfor %}
  </div>
</div>

[WBYS_Ltd]

Hi I've added the code but it has not worked and removed the images