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

Store Design
,

Topic summary

Goal: Dynamically display product price including 21% VAT (Value Added Tax) on the product page, updating when variants change.

Implementation: A new template and section were created (Product.test.liquid, Product-template-test.liquid). A line was added calculating price_with_tax = current_variant.price × 1.21, rendered in an element with id ProductPriceVAT-{{ section.id }}. Testing is on a provided product URL.

Issue: The VAT-inclusive price does not update on variant change; it only updates after a full page refresh. An existing app currently shows prices excluding VAT but is planned for removal.

Findings: On each variant change, a JavaScript error occurs: “ruleTax is not defined.” A screenshot indicates this console error, suggesting a missing variable in the app’s or theme’s script, which likely interrupts the variant change handler and prevents updating the VAT line.

Status/Next steps: Unresolved. Define ruleTax or remove/fix the offending script, then ensure a variant-change listener updates the VAT price element in real time.

Summarized with AI on January 8. AI used: gpt-5.
1

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

2

Hey @RoyalBodyKits ,

Might wanna check this out.

ThePrimeWeb_0-1705589869550.png
ThePrimeWeb_0-1705589869550.png459×339 19.8 KB

3

Hello @ThePrimeWeb

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

4

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.