How to fix button name on WooCommerce

Add a descriptive, screen-reader-accessible name to every button on your site so assistive technology users know what each button does.

Steps for WooCommerce

  1. In WordPress Admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP to avoid losing changes on theme updates).
  2. Locate the template responsible for the button: single-product.php or woocommerce/templates/single-product/add-to-cart/ for product buttons; header.php or your theme's header partial for nav icon buttons.
  3. Add aria-label attributes to icon-only <button> elements. For WooCommerce core buttons (e.g. the cart icon widget), use a filter hook in your child theme's functions.php to modify output rather than editing plugin files directly.
  4. To modify WooCommerce's own button markup, copy the relevant template from wp-content/plugins/woocommerce/templates/ into wp-content/themes/your-child-theme/woocommerce/ (matching the folder structure) and edit the copy.
  5. For third-party slider or gallery plugins (Swiper, Slick) that render unlabelled prev/next arrows, configure their accessibility options in the plugin settings, or add aria-label via the plugin's button customization fields.
  6. Install the free 'WP Accessibility' plugin (by Joe Dolson) — it automatically adds aria-labels to some common WordPress patterns and provides a framework for further fixes.
Official WooCommerce documentation ↗

What is button name?

Every button on a webpage must have an "accessible name" — a short piece of text that describes what the button does. This name is what screen readers announce aloud when a blind or low-vision user navigates to that button. An accessible name can come from visible text inside the button (e.g. "Add to Cart"), an `aria-label` attribute, or a linked text element. When a button has no accessible name — for example it contains only an icon or an image with no alt text — screen readers may announce it as simply "button," leaving users with no idea what it does. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires all interactive controls to have a programmatically determinable name.

Screen reader users — a significant and growing segment of online shoppers — cannot use your store if they cannot identify your buttons. A "Search," "Add to Cart," or "Checkout" button with no accessible name is effectively invisible to them, directly costing you sales and customers. Beyond conversions, accessibility failures like this create real legal exposure: lawsuits under the ADA (US), the European Accessibility Act (EU), and equivalent laws worldwide increasingly target e-commerce stores. Google also uses accessibility signals as a proxy for page quality, so fixing these issues can contribute positively to your organic search rankings and Core Web Vitals scores. Fixing unnamed buttons is one of the highest-impact, lowest-effort accessibility improvements you can make.

See the complete Button name guide for every platform and the full background.

Not sure if your WooCommerce store has this?

Run a free SEOLZ scan — we’ll find button name and every other issue across your whole site.

Scan my site free

Fix button name on another platform