Problem Description #
After the customer changes product quantity or updates the cart, the free-shipping progress bar graphic may update but the text or amount left doesn’t refresh, the page still shows the old value until the customer manually refreshes.
Common symptoms
- Bar (progress) moves but the text (e.g., “$20 left for free shipping”) remains unchanged.
- Works after a manual page refresh.
- Occurs mostly on cart or mini-cart areas that aren’t being refreshed by AJAX.
Cause
- The plugin inserts the text in a position of the page that is not re-rendered by the theme or cart widget when the cart is updated. The plugin documentation and support confirm that positioning and AJAX options affect whether the amount updates automatically. In the plugin’s replies, staff recommend positioning the element inside an area that is refreshed or enabling AJAX (Pro). WordPress.org
Solution (step-by-step)
- Test with default position that refreshes: Admin → Free Shipping Bar settings → Info on Cart → set Position to After cart totals (or any position inside the cart area that the theme refreshes). Save and test.
- If still not updating, try other positions: Some themes refresh different parts; try Cart actions or After cart totals and test again.
- Clear any caches: Purge any page cache, object cache, CDN (Cloudflare) caches and browser caches; then test.
- If you need live update without page refresh: Enable AJAX options (this is a Pro feature). Admin → Advanced → AJAX Options → Enable AJAX (Pro). If you don’t have Pro, see step 6 for a workaround. WordPress.org
- If you use a header mini-cart widget / cart block: The plugin’s element must be placed into a region that updates with the cart widget. If the mini-cart is cached or not using the same update hooks, the plugin may not get the update event. See Article 2 (Blocks & Page Builders) for block-specific tips.
Workaround for free version (if you can’t enable Pro): Add a tiny script to force a partial refresh when cart changes (developer required). Example (conceptual example, test on staging):
// Watch for cart quantity updates and trigger a DOM refresh for the plugin container
document.addEventListener(‘click’, function(e){
if (e.target.matches(‘.qty, .increase, .decrease, .remove’)) {
setTimeout(function(){
// Replace .free-shipping-bar-container with your plugin’s container selector
fetch(window.location.href).then(r => r.text()).then(html => {
const tmp = document.createElement(‘div’); tmp.innerHTML = html;
const newContent = tmp.querySelector(‘.free-shipping-bar-container’);
const old = document.querySelector(‘.free-shipping-bar-container’);
if (newContent && old) old.replaceWith(newContent);
});
}, 400);
}
});
- Important: Use only on staging first and adapt selectors. If you’re not comfortable, ask a developer.
- If problem persists: Perform a conflict test: temporarily switch to a default theme (Storefront) and deactivate other plugins except WooCommerce + Free Shipping Bar; retest. If behavior fixes, re-enable items one-by-one to find the conflict.
Prerequisites
- Latest version of the plugin (update via Plugins page).
- WooCommerce and WordPress up to date.
- For best in-place refresh, Pro plugin (AJAX) recommended. WordPress.org
Additional Notes
- Some themes or custom cart implementations replace standard WooCommerce hooks; plugin behavior will depend on those.
- If you implement the JS workaround, keep it scoped and test on mobile.
