Creating a “Free Shipping” minimum threshold can encourage shoppers to add more to their shopping carts.  Here’s how you can detect shopping cart value and show visitors how much more they must spend for free shipping.

In this example, an eCommerce website offers Free Shipping for orders over $49. We need to:

1. Get Shopping Cart value.
2. Determine if Shopping Cart is under $49.
3. If under $49, determine how much they need to add to the cart.
4. Display value found in Step #3 in the lightbox.

The implementation will be specific to your site, but the example here assumes WooCommerce and a Cart button with the dollar amount shown within.

Custom Box JS After Document Ready

var cartButton = document.getElementById('cartBtn');
var cartValueElement = cartButton.getElementsByClassName('woocommerce-Price-amount amount')[0];
var cartValue = parseFloat(cartValueElement.innerText.replace("$",""));
window.DIGIOH_API.cartValue = cartValue;
DIGIOH_CUSTOM_JS.log("Test:::: cartValue: " + cartValue);

<div id="freeshipping_undervalue_desktop" style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; text-decoration: none; text-align: center; font-size: 20px; color: #ffffff;"></div>
; <script>
var textElement_overvalue_desktop = document.getElementById('freeshipping_undervalue_desktop');
var cartValue = parent.DIGIOH_API.cartValue;
if (cartValue < 49) {
   var value = 49 - cartValue;
   textElement_overvalue_desktop.innerText = 'You only need '+ '$' + value +' to get free shippinh';
}
</script>