Using size guides
This walkthrough goes from a blank install to a working size guide, then explains the storefront behaviour.
1. Build a chart once
Section titled “1. Build a chart once”Open WooCommerce → Size Guides and create your first chart. Lay it out as a labelled table — sizes down the side, measurements across the top. Because charts are reusable, build one chart per measurement system you sell (for example “Adult tops” and “Adult bottoms”) rather than one per product.
2. Decide how it should appear
Section titled “2. Decide how it should appear”Pick a display style:
- A modal keeps the product page clean and opens the chart on demand — the most common choice for fashion stores.
- A product tab suits shops that prefer everything inline with the description and additional-information tabs.
For a modal, also pick the trigger (button or text link) and the placement (near the add-to-cart button is the most discoverable).
3. Assign the chart
Section titled “3. Assign the chart”Two ways, and you can mix them:
- Per category — set a default chart on, say, the T-Shirts category. Every product in it inherits the chart with no per-product work.
- Per product — on a product, open Product data → Size guide and pick a chart. This overrides any category default, so an oddly-sized product can use its own chart.
4. Confirm on the storefront
Section titled “4. Confirm on the storefront”Open a product that has a chart assigned (directly or via its category):
- The trigger (button or link) appears in your chosen placement, or the tab appears if you chose the tab style.
- Clicking the trigger opens the chart in the accessible modal.
- The modal is focus-managed: focus moves into the dialog, stays trapped while it is open, returns to the trigger on close, and Escape closes it.
Open a product with no chart and confirm nothing renders.
Why it helps
Section titled “Why it helps”A clear size guide answers the question shoppers would otherwise email you about — and the question that drives a lot of returns. Putting the chart one click from the add-to-cart button, in language and units that match the product, reduces both pre-sale messages and post-sale returns.
Performance and accessibility
Section titled “Performance and accessibility”The output is responsive and reserves its space, so there is no layout shift. It respects prefers-reduced-motion and adapts to dark mode. The modal is a native <dialog>, so the keyboard and screen-reader behaviour is robust rather than bolted on. Sizer is fully self-contained — no external services and no tracking.