Display current wallet balance of Tera Wallet on Elementor page using HTML and JavaScript

Question

I implemented Tera Wallet on my WordPress website which displays the current balance in a specific text element on one page. Now, I want to retrieve the current balance text and display it in a specific text element on another page created using Elementor using HTML and JavaScript.

On the page showing the wallet balance, the HTML structure is as follows:

<div class="woo-wallet-content">
    <div class="woo-wallet-content-heading">
        <h3 class="woo-wallet-content-h3">Balance</h3>
        <p class="woo-wallet-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>500.00</bdi></span></p>
    </div>
</div>

On another page created using Elementor, I have an HTML element with a specific CSS class (for example ) in which I want to display the current wallet balance. The Elementor page structure is as follows:

<div class="elementor-text-class">Current Wallet Balance: <span id="balance-display"></span></div>

I want to retrieve the current balance text (e.g. "$500.00") from the first page and display it dynamically in a element using the IDThe balance is displayed on the second page.

Can someone help me code the HTML and JavaScript? This code can extract wallet balance text from one page and display it on another page using Elementor, HTML and JavaScript?

thanks for your help!

Answer 1

I use the tera wallet shortcode "[mini-wallet]" to display the wallet balance.