Hi everyone,
I’m working on a Shopify store using the Wokiee theme, and I’ve added a small installment price display widget to the product page. It calculates and displays the price split into four equal parts (for example, to show what a customer would pay per installment).
The issue I’m facing is that the widget works correctly on initial page load, but does not update when switching between product variants — unless I manually refresh the page.
Here’s what I’ve done so far:
-
The widget pulls {{ current_variant.price }} and divides it by 4 to show the installment amount.
-
I’ve added JavaScript that:
-
Listens for changes on input[name=“id”] and select[name=“id”]
-
Listens for a variant:changed event
-
Uses a MutationObserver on the price container to detect DOM updates
-
Despite all of that, the widget still doesn’t reflect the updated variant price when switching between variants.
My goal:
Ensure that the installment amount updates automatically and correctly when a new variant is selected — ideally using an event or hook that works well with the Wokiee theme’s structure.
Has anyone successfully implemented something similar or knows which event Wokiee uses internally for variant changes? Any guidance would be really appreciated!
Thanks in advance!
First picture describes product on load with product instalment price at the top and product price at the right panel.
Second image that describes when variant was changes. It can be noted that product price changed but instalment price did not.
Third picture describes the desired results, but only after page refresh.