How can we edit tax text in ecommerce checkout?

Hi,

I’m trying to edit the text shown for the VAT recap at checkout (Here’s the test page https://intendance-test.webflow.io/checkout) but there seems to be no way to access it in the designer…

28

It seems to be in a collection list “Extra List” but I can’t find a way to access it. And it only shows when using the published site since it calculates when address is inputed.

Any ideas ?
Thanks

Mind sharing the string of text you are referring to?

Sure :slight_smile:

Country Taxes

Ideally I’d like to be able to write : TVA 20% or TVA 5,5%
Since for food we have potentially 2 levels of VAT in France

Ok. Since I can’t see that in source without seeing a checkout page, (which is disabled), can you provide that for me? I just need the complete element html.

Ok, here’s a screenshot of the inspector :

38

Can’t find a way to copypaste from source code…

You can replicate it by just adding a French address (just input city Paris , Postal Code 75001 and country France for instance) it should work with the checkout page

You could use this code on the page before body close custom code area:
<script>$("div.w-commerce-commercecheckoutordersummaryextraitemslistitem:first").text("TVA 20% or TVA 5,5%");</script>
Caveat: Webflow could change core rendered html at any time that could break the script. Just so you know. There are two elements that matched the selector, that is why I added the :first to it since that is the one you wanted to change. You could be more specific with the .data() function but wf has a long value on the data- attribute I did not want to play with for a demo.

1 Like

Thanks for this great idea…

Unfortunately, this rewrites in jquery on page load / document ready… but webflow updates the taxes after page load (and after delivery option > which is a bit absurd because delivery price can be including tax…)

So this doesn’t work :cry:
Any other idea ?

I did not include the doc ready function and made an assumption you would.

<script>
$(document).ready(function() {
	$("div.w-commerce-commercecheckoutordersummaryextraitemslistitem:first").text("TVA 20% or TVA 5,5%");
});
</script>

Give that a go.

I did add it :wink:
And it doesn’t work :slight_smile:

For it to work we’d need a way to trigger the jquery after calculation of tax (which is impacted by delivery option selected by user > therefore after page load and user action)

Edit :
Targeting the data attribute doesn’t seem to work either

<script>
$( document ).ready(function() {
$("div[data-wf-bindings='%5B%7B%22innerHTML%22%3A%7B%22type%22%3A%22PlainText%22%2C%22filter%22%3A%7B%22type%22%3A%22identity%22%2C%22params%22%3A%5B%5D%7D%2C%22dataPath%22%3A%22database.commerceOrder.extraItems.0.name%22%7D%7D%5D']").text("TVA");
});
</script>

It only works if I use a SetTimeout…
Like this for instance

setTimeout(function(){ 
$("div[data-wf-bindings='%5B%7B%22innerHTML%22%3A%7B%22type%22%3A%22PlainText%22%2C%22filter%22%3A%7B%22type%22%3A%22identity%22%2C%22params%22%3A%5B%5D%7D%2C%22dataPath%22%3A%22database.commerceOrder.extraItems.0.name%22%7D%7D%5D']").text("TVA");
}, 3000);

But when I click on another delivery option, it resets :cry:

1 Like

Was out for breakfast.

Try this.

<script>
            var ffields = "input.w-commerce-commercecheckoutshippingzippostalcode,input.w-commerce-commercecheckoutshippingcity";
            var taxlabel = "div.w-commerce-commercecheckoutordersummaryextraitemslistitem:first";
            var taxtext = "TVA 20% or TVA 5,5%";

            $(document).ready(function() {
                $(ffields).on("focusout",function(evt) {
                    $(taxlabel).text(taxtext);
                });


            });
    </script>

Good try as well :slight_smile:

But still not it… This option shows the new text but for about 1s… before being overwritten by Country Taxes again.
I get the idea of using focus / blur to determine when to change the text, but I’m not sure it’s going to work in this case.

This one is a hard one to test. If you can figure out where the changes are triggered you could potentially address it. I don’t have any more time to give you today. Webflow is using graphql on this page and there is alot of dynamic stuff going on with a checkout page. You may have to wait until they give you the ability to set labels from the e-comm settings.

1 Like

Thanks a lot for your time anyway !
From what I see a timeout solution is the only viable one until someone from webflow ecommerce gives a hint on how to do that :slight_smile:

2 Likes

Hi!

I want to display the country tax line in my checkout page but I can’t figure out how to do it. Could you please share how you were able to display this line of info in your checkout page?

Webflow automatically shows this line when the city / postal code is entered by the user.
There is no other way (yet) to show this element to my knowledge (otherwise I’d target it and change the text :slight_smile: )

Thanks for that!

Do you know if I need to add a hosting plan in order to see that “tax country” line display? Or it should work in staging mode?

I think it works without hosting, you can test it on the checkout page on the webflow.io url to be sure

1 Like

Someone raised this question 1 year ago and still no solution from webflow… Simply just allow us to edit the “Country Taxes” text to our local names in the checkout page, either in back-end or front-end… How hard can it be? Not all customers are living in the states.

FYI. You allow us do change the name for “Taxes” in the email confirmation…

1 Like

Thanks so much for sharing this @eddiew ! I’ll try it today.
Seems a bit crazy to have to add a mutation observer just to change this Country tax text thing…

I’d understand when you want to do more custom things like counting specific items in shopping cart or showing a progress bar to free delivery… but for something we input inside the emails through the webflow UI :sweat_smile: