Spanish checkout total demo (Ticket 1379680)

SureCart support demo, ticket 1379680
This page reproduces the problem you reported (the discount is accepted but the Total and the payment button keep showing the old amount) and shows the fix working, on a clean test store.
How to test
Step 1. Press the red button below to switch this page into Spanish with Google Translate.
Step 2. Scroll down to the checkout, open “Add Coupon Code”, type AGOSTO2026 and press Apply.
Step 3. Watch the Total and the purchase button. They should change from $60.00 to $45.00.
Step 4. Switch between the two versions with the buttons underneath and repeat.
Live reading of every amount on this page

Test checkout

Product: Curso Demo. Price: $60.00. Coupon code: AGOSTO2026 (25 percent off, so the total should become $45.00). This store runs in test mode, so nothing can be charged.

Test Mode Purchase Subtotal TotalTotal Due Today

What is happening

  • The coupon itself is fine. SureCart accepts it, the discount line appears, and the amount actually charged is the discounted one.
  • The Google Website Translator does not translate text in place. It removes the original text node and inserts a <font> element in its place.
  • SureCart’s checkout keeps a reference to that original text node so it can rewrite the amount when the total changes. After Google Translate has swapped the node out, SureCart writes the new amount into a node that is no longer part of the page, so nothing visible changes.
  • That is why it looks random: it only happens once a visitor has switched the page into another language, and only for figures that were already on screen when the translation ran. The discount row itself is brand new markup, which is why that part does update.

The fix

Tell Google Translate to leave the amount elements alone. They are numbers, so there is nothing to translate in them anyway. Everything else on the checkout keeps being translated. Add this once, site wide, for example through WPCode, Code Snippets, or your theme’s footer scripts field.

<script>
(function () {
  var SEL = 'sc-total, sc-format-number';

  function mark(el) {
    if (!el || el.__scGuarded) return;
    el.__scGuarded = true;
    el.classList.add('notranslate');
    el.setAttribute('translate', 'no');
  }

  function walk(root, fn) {
    var all = root.querySelectorAll('*');
    for (var i = 0; i < all.length; i++) {
      fn(all[i]);
      if (all[i].shadowRoot) walk(all[i].shadowRoot, fn);
    }
  }

  function guard() {
    walk(document, function (el) {
      try { if (el.matches(SEL)) mark(el); } catch (e) {}
    });
    walk(document, function (el) {
      if (el.tagName !== 'SC-TOTAL' || !el.querySelector('font')) return;
      var fresh = document.createElement('sc-total');
      for (var i = 0; i < el.attributes.length; i++) {
        fresh.setAttribute(el.attributes[i].name, el.attributes[i].value);
      }
      fresh.classList.add('notranslate');
      fresh.setAttribute('translate', 'no');
      fresh.__scGuarded = true;
      el.parentNode.replaceChild(fresh, el);
    });
  }

  guard();
  document.addEventListener('DOMContentLoaded', guard);
  window.addEventListener('load', guard);
  new MutationObserver(guard).observe(document.documentElement, { childList: true, subtree: true });
  setInterval(guard, 400);
})();
</script>

One more thing to remove on your site

Your site currently runs a custom script that re fires the Google translation two seconds after the checkout loads, with the comment “Nach Verzoegerung nochmal Uebersetzung anfordern (damit z.B. Gutschein-Code Element uebersetzt wird)”. That forced pass runs at the exact moment the checkout has just drawn its amounts, so it makes this problem much more likely to hit. It also cannot achieve what it was written for, because the coupon field is inside a shadow root. Please remove that timeout.

Scroll to Top