Skip to content
StoreA11y

WooCommerce · 1.3.1 Info and Relationships (Level A)

Headings skip levels on WooCommerce

Some headings jump a level — an <h4> directly after an <h2>, for example. Screen-reader users navigate a long collection page by pulling up its heading outline; a broken outline reads as if sections are missing or nested wrongly.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. One <h1> per page: the product title on a product page, the collection title on a collection page, the store name or hero headline on the homepage.
  2. Section titles under it are <h2>. Sub-parts of a section are <h3>. Never jump from h2 to h4.
  3. Most theme sections expose a "heading size" setting in the customizer — that changes the visual size only, not the level. Do not use a smaller heading tag to make text look smaller; use the size setting or CSS.
  4. Search the theme for the offending heading level and correct the tag, keeping the class that controls appearance.
  5. Do not use a heading tag for text that is not a heading (prices, badges); switch those to <p> or <span>.

Where this usually lives

Template files in your child theme, block editor heading levels, and woocommerce/single-product/title.php

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Wrong: level skipped, tag chosen for size -->
<h2>Featured products</h2>
  <h4>New arrivals</h4>

<!-- Right: correct level, size via class -->
<h2>Featured products</h2>
  <h3 class="h4">New arrivals</h3>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: medium. Rule id: heading-order (axe-core).