Showing the total on the checkout button ("Checkout · $119.96") removes one last moment of doubt before checkout. It's a small change, but two details make or break it.
1. It must update without a page reload
Cart drawers re-render when quantities change. Most themes fire an event with the new cart, so listen for it and fall back to /cart.js:
document.addEventListener('cart:change', (e) => {
const cart = e.detail?.cart;
if (cart) setTotal(cart.total_price);
else fetch('/cart.js').then(r => r.json()).then(c => setTotal(c.total_price));
});Then re-apply the label whenever the drawer HTML is replaced (a light MutationObserver on the body works).
2. It must match the total the shopper sees
Shipping-protection apps often add their fee to the displayed cart total, but not to Shopify's cart.total_price. If your button shows €59.98 while the cart says "Total €64.97", you've created doubt instead of removing it. The fix: read the theme's visible Total next to the button, and only fall back to cart.total_price when there isn't one.
// Dawn-style themes use .totals__subtotal-value; Prestige-style themes a .h5 in a flex row
const TOTAL = '.totals__subtotal-value, .h-stack.justify-between > .h5:last-child';
function displayedTotal(button) {
for (let el = button.parentElement; el && el !== document.body; el = el.parentElement) {
const rows = el.querySelectorAll(TOTAL);
if (rows.length) return rows[rows.length - 1].textContent.trim();
}
return null;
}3. Watch out for WordPress-style escaping
Put the script in a theme snippet, not a rich-text block. Editors sometimes turn & into &, which breaks JavaScript.
Want it done for you? I add this to your cart drawer, cart page and added-to-cart popup, matched to your apps, in 48 hours. See the fixed-price service or get a free video audit.