How to fix input button name on WooCommerce

Add a descriptive label to every input button so screen readers can announce what the button does.

Steps for WooCommerce

  1. Identify which theme file renders the button. Common locations: `woocommerce/templates/cart/proceed-to-checkout-button.php`, `templates/checkout/form-checkout.php`, or a child theme override.
  2. In your WordPress admin, go to Appearance → Theme File Editor (or use an FTP client / file manager), open your child theme folder, and locate the relevant WooCommerce template file.
  3. Find the `<input type="submit"` or `<input type="button"` tag with an empty `value` and add a descriptive label: e.g., `<input type="submit" value="<?php esc_attr_e('Place Order', 'woocommerce'); ?>"`.
  4. If you cannot safely edit template files, install a plugin like 'Code Snippets' or use your child theme's `functions.php` to hook into the output with `woocommerce_order_button_text` filter to supply the label.
  5. Clear any caching plugin cache and re-test the page with an accessibility scanner or screen reader.
Official WooCommerce documentation ↗
<!-- ❌ BEFORE: empty value — screen readers say nothing useful -->
<input type="submit" value="">

<!-- ✅ AFTER option 1: descriptive value attribute -->
<input type="submit" value="Add to Cart">

<!-- ✅ AFTER option 2: aria-label when value must stay empty -->
<input type="submit" value="" aria-label="Add to Cart">

<!-- ✅ AFTER option 3: switch to <button> for more flexibility -->
<button type="submit" aria-label="Add to Cart">
  <svg aria-hidden="true"><!-- cart icon --></svg>
</button>

What is input button name?

An "input button" is any clickable button on your website created with HTML's `<input type="button">`, `<input type="submit">`, or `<input type="reset">` tags. The button's visible (or accessible) label comes from its `value` attribute — for example, `value="Add to Cart"`. When that `value` attribute is missing or left empty (`value=""`), the button has no name that a screen reader can read aloud. This violates WCAG Success Criterion 4.1.2 (Name, Role, Value), which requires every interactive element to have an accessible name.

Screen reader users — including many people with visual impairments — rely on the button's accessible name to understand what will happen when they activate it. A button with no name is announced as something like "button" with no context, making your checkout, search, newsletter sign-up, or contact forms unusable for those shoppers. Beyond the direct accessibility barrier, this is a legal compliance risk: WCAG 2.1 AA is referenced by laws like the ADA (US), EN 301 549 (EU), and the Equality Act (UK), and empty button names are a clear, easily documented violation. Fixing this also improves your overall site quality signals and reduces the risk of accessibility-related complaints or litigation.

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

Not sure if your WooCommerce store has this?

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

Scan my site free

Fix input button name on another platform