How to fix select name on WooCommerce

Steps for WooCommerce

1. The safest approach is to override the WooCommerce template file rather than editing the plugin directly. Copy the relevant template from 'wp-content/plugins/woocommerce/templates/' into 'wp-content/themes/YOUR-THEME/woocommerce/' maintaining the same folder structure.
2. Common files to check: 'woocommerce/loop/orderby.php' (sort-by dropdown), 'woocommerce/single-product/add-to-cart/variable.php' (variation selects), 'woocommerce/checkout/form-billing.php' and 'form-shipping.php' (country/state dropdowns).
3. Open the copied file and locate the <select> element. Add <label for="MATCHING-ID">Descriptive text</label> immediately before it, ensuring the select has a matching id attribute.
4. If you use a page-builder or custom theme, locate the template part via Appearance → Theme File Editor (or your child theme) and apply the same edit.
5. Flush caches (WP Super Cache, WP Rocket, etc.), then verify with axe DevTools.

<!-- Method 1: explicit <label> with for/id pair (recommended) -->
<label for="sort-by">Sort results by</label>
<select id="sort-by" name="sort-by">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
</select>

<!-- Method 2: wrapping <label> (implicit association) -->
<label>
  Select size
  <select name="size">
    <option value="s">Small</option>
    <option value="m">Medium</option>
  </select>
</label>

<!-- Method 3: aria-label when no visible label is feasible -->
<select name="country" aria-label="Shipping country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
</select>

<!-- Method 4: aria-labelledby pointing to existing visible text -->
<span id="qty-label">Quantity</span>
<select name="quantity" aria-labelledby="qty-label">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

What is select name?

Every dropdown menu (`<select>` element) on a webpage — such as a size selector, country picker, or sort-by filter — needs a visible or programmatically associated label that tells users what the dropdown is for. Without one, screen readers and other assistive technologies simply announce it as "combo box" or read out the first option, giving blind and low-vision shoppers no idea what they're selecting. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that all interactive controls, including dropdowns, have an accessible name. The label can be a visible `<label>` element linked by a `for`/`id` pair, a wrapping `<label>`, or an `aria-label` / `aria-labelledby` attribute when a visible label isn't practical.

In many countries (the US, UK, EU, Canada, Australia) accessibility laws require that online stores meet WCAG 2.1 AA, meaning an unlabelled dropdown is a documented legal liability that can trigger complaints, lawsuits, or regulatory action — and ecommerce is one of the most targeted industries. Beyond legal risk, screen-reader users who can't understand a dropdown will abandon the purchase, directly harming conversions and revenue. Google's crawlers also read ARIA and label attributes to better understand form context, so fixing labels can improve how product-filter and checkout pages are indexed. Fixing this issue also benefits voice-control users (e.g. Dragon NaturallySpeaking) who activate controls by speaking their label out loud.

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