How to fix heading order on WooCommerce

Steps for WooCommerce

1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme) and open the relevant template file (e.g., single-product.php, archive-product.php, page.php).
2. Locate heading tags and correct any that skip levels — change <h3> to <h2> if it follows an <h1>, for example.
3. For content in the block editor (Gutenberg), edit the page/post, click a Heading block, and use the 'H1/H2/H3…' picker in the block toolbar to set the correct level.
4. If using a page builder (Elementor, Beaver Builder, Divi), open the page in the builder, click each heading widget, and in its settings change the HTML Tag from H3/H4 to the correct sequential level.
5. Install the WAVE or axe DevTools browser extension and re-audit the live page to confirm the fix.

<!-- INCORRECT: skips from H1 directly to H3 -->
<h1>Product Name</h1>
<h3>Key Features</h3>   <!-- ❌ skips H2 -->
  <h4>Detail One</h4>

<!-- CORRECT: sequential, no levels skipped going downward -->
<h1>Product Name</h1>
<h2>Key Features</h2>   <!-- ✅ follows H1 -->
  <h3>Detail One</h3>   <!-- ✅ follows H2 -->

What is heading order?

Every webpage uses heading tags — H1, H2, H3, H4, H5, and H6 — to organize content into a hierarchy, like chapters and sub-chapters in a book. "Heading order invalid" means that hierarchy has a gap or jump: for example, jumping straight from an H1 to an H3, or using an H4 immediately after an H2. Screen readers and assistive technologies rely on this outline to help users navigate a page quickly. Headings should always nest in order — you can go up levels freely, but you should never skip a level going down.

For the roughly 1-in-4 shoppers who use assistive technology, broken heading order makes it very hard to navigate your pages — they may completely miss product sections, key offers, or checkout steps. This is a WCAG 2.1 Level AA requirement (Success Criterion 1.3.1 and 2.4.6), so non-compliance creates real legal risk under laws like the ADA (USA), the European Accessibility Act, and the UK Equality Act. Beyond accessibility, heading structure is one of the signals Google uses to understand your page's content hierarchy; a clean, logical outline helps search engines index and rank your pages more accurately. Fixing heading order is typically a quick win with immediate benefits for both users and SEO.

See the complete Heading order guide for every platform and the full background.