How to get total price at e-commerce checkout

Design help Custom code
1

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
image1920×1080 269 KB

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: Webflow - Donations + Round-ups

2

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

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
3

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
30%20PM840×746 45.1 KB

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
01%20PM937×129 16.1 KB

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!

4

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.

5

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

6

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/

7

Hi Matt, did you figure it out? I’ve used Udesly adapter to create a WooCommerce theme with Webflow and now just at the last stage I need to get order total value in order to include it into a FB Pixel script, and can’t wrap my head around it. Thanks!