Free delivery banner not working on variants

[rhino-direct]

I've added the below code that adds a 'free delivery on this item' banner on the product page. I've set it to trigger if the product is over £50, but this isn't working for variants over £50. Some of my products are only over £50 if purchased in a bundle - which works through a quantity variant. 

I tested this through a product that cost under £50 individually, the banner did not appear, but when I clicked on x20 (which took the total price to well over £50) the banner was still not visible.

Here's my current code:

{% if product.price > 5000 %}
<span class="icon-and-text" style="display: flex;align-items: center;flex-wrap: nowrap; padding-top: 30px;">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-truck" viewBox="0 0 64 64">

<defs>

<style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px}</style>

</defs>

<path class="cls-1" d="M17 47.72H7.38V21h33.14v26.72H24.44M45.92 47.72h-5.4V34.9h17.1v12.82h-4.23M57.62 34.9l-6.41-8.56H40.52"></path><circle class="cls-1" cx="20.74" cy="48.26" r="3.74"></circle><path class="cls-1" d="M45.92 47.73a3.82 3.82 0 1 1 0 .37v-.37"></path>

</svg>
<span style="padding-left: 10px; padding-top: 3px;"> Free standard shipping on this product </span>
</span>
{% endif %}

**This is being tested through a draft theme and isn't live yet**

[NomtechSolution]

Here's an updated version of your code that considers the variant price:

{% if product.selected_or_first_available_variant.price > 5000 %}
<span class="icon-and-text" style="display: flex; align-items: center; flex-wrap: nowrap; padding-top: 30px;">
  <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-truck" viewBox="0 0 64 64">
    <defs>
      <style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px}</style>
    </defs>
    <path class="cls-1" d="M17 47.72H7.38V21h33.14v26.72H24.44M45.92 47.72h-5.4V34.9h17.1v12.82h-4.23M57.62 34.9l-6.41-8.56H40.52"></path>
    <circle class="cls-1" cx="20.74" cy="48.26" r="3.74"></circle>
    <path class="cls-1" d="M45.92 47.73a3.82 3.82 0 1 1 0 .37v-.37"></path>
  </svg>
  <span style="padding-left: 10px; padding-top: 3px;">Free standard shipping on this product</span>
</span>
{% endif %}

[rhino-direct]

Hi,

Unfortunately this didn't work - the variants that were over £50 still weren't showing the free delivery banner. 

[made4Uo]

Hi @rhino-direct 

The code will not update whenever you change the variant. You need a javascript code that listens to the user's input. Unfortunately, this is not just a simple solution. You will need to hire a developer who knows how to do this. 

[rhino-direct]

Hi Made4Uo, 

Thanks for your help with this, I have now managed to code this on my end.