Announce "Added to Cart" to Screen Readers
Makes screen readers announce when a product is added to the cart with AJAX on shop and category pages, which otherwise happens silently.
Opens WPIDE on
Code
add_action( 'wp_enqueue_scripts', function () {
if ( ! function_exists( 'is_woocommerce' ) || ! wp_script_is( 'wc-add-to-cart', 'registered' ) ) {
return;
}
wp_enqueue_script( 'wp-a11y' );
wp_add_inline_script( 'wc-add-to-cart', <<<'JS'
jQuery(function ($) {
$(document.body).on('added_to_cart', function (event, fragments, hash, button) {
var name = button && button.length ? (button.attr('aria-label') || button.data('product_name') || '') : '';
name = String(name).replace(/^Add (to cart: )?/i, '').replace(/[“”"]/g, '').replace(/ to your cart$/i, '');
if (window.wp && wp.a11y) { wp.a11y.speak((name ? name + ' ' : 'Product ') + 'added to your cart.', 'polite'); }
});
});
JS
);
}, 20 );Notes
Uses the wp-a11y live region that WordPress provides; change the message text in the script if 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.