How to make a text always show the total order price?

Technical
1

Hi,
I’ve been trying to create a text that will resemble the total order price just like the total price shown in their order summary widget

The data binding section doesn’t has anyting related to order price
So how can I do it?
I tried to use AI to write some dynamic JS code for it and it didn’t work out

2

Hey @Imran_Hossain :waving_hand:

Good question. You’re right, there is no direct data binding for total order price like the order summary widget.

Before going deeper, I need one clarification first.
On which step do you want to show this text?

For example:
– Checkout page (before payment)
– Upsell / downsell page
– Thank you page

Also, do you want the price to update dynamically when order bumps or quantities change?
Or is it a static total after checkout?

Share the page type and use case.
Then I can guide you with the correct approach :+1:

3

Thanks for replying, Anwar.

I found a solution to this problem.

Basically, I gave my text a specific ID (#custom-total-price) and found out the class of the total price text (.os-total, .os-price) inside the order summary widget.

Then I used JS code to put whatever is inside that class of the total price into my text.

It also updates dynamically when new orders are added. Here is the code:|

<script>
document.addEventListener('DOMContentLoaded', function() {
    const syncPrice = () => {
        const sourcePrice = document.querySelector('.os-total .os-price');
        // This targets the ID you set, but finds the innermost tag where the style is
        const container = document.getElementById('custom-total-price');
        
        if (sourcePrice && container) {
            // This line finds the deepest child element (the one with the actual color/font)
            let deepest = container;
            while (deepest.firstElementChild) {
                deepest = deepest.firstElementChild;
            }
            
            if (deepest.innerText !== sourcePrice.innerText) {
                deepest.innerText = sourcePrice.innerText;
            }
        }
    };
    setInterval(syncPrice, 500);
});
</script>```
4

You are welcome @Imran_Hossain

That’s good for you.

5

Also, if your team can add these order-related dynamic data inside the data binding section, then it would be a massive lifesaver