# Move Focus to WooCommerce Checkout Errors

> When the classic WooCommerce checkout shows errors (such as a missing field or a declined card), moves keyboard focus to the error list and has screen readers read it out.

- Type: HTML
- Runs: Woocommerce after checkout form
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Requires: WooCommerce
- Tags: woocommerce, checkout, focus
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-woo-checkout-error-focus/

## Code

```html
<script>
jQuery(function ($) {
    $(document.body).on('checkout_error', function () {
        var box = document.querySelector('.woocommerce-NoticeGroup-checkout, .woocommerce-error');
        if (!box) { return; }
        box.setAttribute('tabindex', '-1');
        box.setAttribute('role', 'alert');
        setTimeout(function () { box.focus(); }, 100);
    });
});
</script>
```

## Notes

The block-based checkout handles this itself; this snippet is for the classic [woocommerce_checkout] shortcode checkout.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Move Focus to WooCommerce Checkout Errors" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/