Streaming live at 10am (PST)

How to get total price at e-commerce checkout

Hey all,

Does anyone have experience with getting the total price from the check-out page? Right now, I’m just trying to send the value to the console to ensure that I can actually grab it.

Here’s what I’ve tried (every solution assumes an ID of total has been added to the total price in Webflow):


  1. Adding the following code to the page’s “Before </body> tag”:
    <script>

        var Webflow = Webflow || [];
        Webflow.push(function () {
             var totalPrice = document.getElementById('total');
             console.log(totalPrice);
         });

    </script>

The result I get from this is that the entire line of HTML that contains the price as Inner Text is returned, like so:

<div id="total" data-wf-bindings="XXXXXXXX" data-wf-conditions="XXXX" class="w-commerce-commercecheckoutsummarytotal total-count-text">$90.30</div>

So I figured that if this is returned, then I should be able to just change my code from:

var totalPrice = document.getElementById('total');

to

var totalPrice = document.getElementById('total').innerText;

and get the Total, but the strange thing is that this sends a blank value to the console.


  1. Creating an HTML Embed on the checkout page itself and using Webflow’s Native Variables to pull the value:

image

I tried this as well, but I get a blank value altogether. In fact, if you look at the script in Chrome Dev Tools, the script itself just looks like:

var totalPrice = (completely blank)


The weird thing is that neither of these solutions work but I can run the same code as I did in Solution #1 as a snippet (manually via Chrome Dev Tools) and get exactly the value I need. So, I think this is a timing issue? But I’m wrapping that code in the Webflow.js wrapper so I’m not sure what I’m doing wrong.

Any help would be greatly appreciated! :slightly_smiling_face:


I’m just testing something out so I’ve got a dummy project set up to try and grab the value: https://preview.webflow.com/preview/round-up?utm_source=round-up&preview=db486828c63634a26e589f915da7922f

This is not the way JS works.

var totalPrice = document.getElementById('total');
Return a DOM element (Not the text/content inside the node).

console.log(totalPrice.innerText) ==> Return $466.90

https://www.w3schools.com/jsref/prop_node_innertext.asp

SyntaxError: missing ; before statement

Anyway, your screenshot code missing ; (Syntax error).

Should be:

var totalPrice = someValue; /* add  ; her */
console.log(totalPrice);

Try this:

var totalPrice = document.getElementById('total');
console.log(totalPrice); // return element
console.log(totalPrice.innerText); // return string $466.90
console.log(totalPrice.innerText.replace("$", "")); // return 466.90

Some convert string functions:

********* Add live URL please

1 Like

Hey Ezra! Thanks for the detailed response – very much appreciated. I’ll address each point separately and let you know how it worked, but first, the published link is round-up.webflow.io.


In regards to the Syntax error, I failed to mention that when I added the semi-colon yesterday, I received an error in the console - whereas if you run the script without the semi-colon, it runs without error, but still returns an incorrect response. (@rileyrichter can confirm this happened on his end too when testing this out)

Updated snippet of code in HTML Embed:

30%20PM

Returns the following error in the console (only this error exists):
Uncaught SyntaxError: Unexpected token ;


In regards to your new snippet of code, I used it in both the code injection area in Page Settings and in the HTML Embed (obviously at separate times — this script was NOT running twice) and I’m still having the same issue - I’ll get the whole node (which is expected) along with two blank values.

See the following screenshot:

01%20PM


This is why I’m scratching my head here. Even though I can get the whole node, I cannot get the Inner Text value at all.

Thanks again for your response + explaining this to me!

Update: I’ve also tried using:

document.querySelector('.w-commerce-commercecheckoutsummarytotal').textContent;

to grab the value, but I run into the same issue – works when it fired off manually in Chrome Dev Tools after everything has loaded, but returns blanks in the console if it is included with the page.

Hi @mattvaru were you able to get the total price working with this? I am having the same issue and i dont know what to do next!

Any help would be appreciated, TY

Put the code before body (After the page load). If it not works for you wrap the code with ready state.

https://learn.jquery.com/using-jquery-core/document-ready/