Announce Cart Updates on the WooCommerce Cart Page
Tells screen reader users when the cart has been updated after they change a quantity, remove a product or apply a coupon on the classic cart page, which otherwise happens silently.
Opens WPIDE on
Code
<div id="wpide-cart-status" role="status" aria-live="polite" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"></div>
<script>
jQuery(function ($) {
var region = document.getElementById('wpide-cart-status');
function say(text) { region.textContent = ''; setTimeout(function () { region.textContent = text; }, 100); }
$(document.body).on('updated_cart_totals', function () {
var total = $('.order-total .amount').last().text();
say('Cart updated.' + (total ? ' New total ' + total + '.' : ''));
});
$(document.body).on('applied_coupon removed_coupon', function (e) {
say(e.type === 'applied_coupon' ? 'Coupon applied.' : 'Coupon removed.');
});
});
</script>Notes
Uses its own polite live region, so no extra WordPress scripts are needed.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.