How to dynamically update product variant prices including VAT on the product page?

Hello,

We want to implement a new line on the product page, showing the price of the product including the 21% of VAT.

We have created the Template: Product.test.liquid and the Section: Product-template-test.liquid

We have copied the original code from the product section and paste on the new one.

We are testing under this product example:

https://www.royalbodykits.com/products/test-test?variant=49006794473798

The new line has been created by adding this code:

<li>
{% unless product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endunless %}
<span id="ProductPriceVAT-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{% assign price_with_tax = current_variant.price | times: 1.21 %}
{{ price_with_tax | money }}
</span>
</li>

We currently have an App that shows the exclude vat but it will be removed after we get this sorted out.

The problem we are having is that when changing the variant of the product, the price (from the new line added) is not being dynamically updated unless the webpage is refreshed.

Hope

Hey @RoyalBodyKits ,

Might wanna check this out.

Hello @ThePrimeWeb

So it is not working because the coding from the APP prevents to?

From the way I see (Cause I don’t have access to your project), each time I triggered a change in the variant, it throws an error where ruleTax is not defined, which is true because within that function ruleTax is nowhere to be found.

JavaScript conflicts between custom VAT code and installed apps are hard to debug because execution order changes depending on which app loads first.

Rather than patching the conflict, an app called Momsify B2B VAT Switcher handles VAT display and variant price updates natively, with no custom JS needed. There is a free plan to test it.