Using size guides

This walkthrough goes from a blank install to a working size guide, then explains the storefront behaviour and the one developer filter Sizer exposes.

1. Build a chart once

Open WooCommerce → Size Guides → Size charts and add a chart. Lay it out as a labelled table, sizes down the side, measurements across the top. The first cell of each row is the size label and renders as a row header. 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. Assign it to products

Edit each product, open Product data → Size guide, and pick the chart. The same chart can be assigned to any number of products. To remove a guide from a product, set the select back to - No chart -; that deletes the _sizer_chart_id meta and the button stops appearing there.

3. Set the wording (optional)

On the Settings tab, set the Link wording (button text) and Pop-up heading (dialog title). Leave the heading blank and it reuses the button text. See Configuration.

How it behaves on the storefront

On a product with a chart assigned, the Size guide button appears below the add-to-cart button. Clicking it opens a native <dialog> containing the chart as an accessible table:

• The dialog opens with showModal(), which makes it modal and keeps focus inside it. On open, focus moves to the close (×) button.
• Escape closes the dialog (native <dialog> behaviour); so does clicking the backdrop outside the dialog box, or the × button.
• On close, focus returns to the Size guide button that opened it, including when closed with Escape.
• Where the browser does not support <dialog>, the script falls back to toggling the element’s visibility so the chart still opens and closes.

Inside the table, the first column is the size label as a <th scope="row"> and headers are <th scope="col">, so screen readers announce each cell with its row and column. Each row is focusable (tabindex="0"); hovering or keyboard-focusing a row slides an amber “tape measure” rule along its size label, making the row you landed on unmistakable. That highlight animation is suppressed under prefers-reduced-motion.

If a chart somehow has no columns or no rows, the dialog shows “No size information is available yet.” rather than an empty table.

Performance and accessibility

The stylesheet and script are registered on every product page but only enqueued when a chart actually applies, so unassigned products download nothing extra. The script is dependency-free (no jQuery), loaded defer in the footer. The output reserves its space and adds no layout shift, adapts to dark mode via prefers-color-scheme, and respects prefers-reduced-motion. Sizer makes no external requests and adds no tracking.

Extending the resolved chart (developers)

Sizer registers no shortcodes, the button appears automatically after the add-to-cart button. The one merchant/developer-facing hook is a filter that decides which chart id applies to a product. It fires for every product, even when none is assigned (the id is then an empty string), so an add-on can supply a fallback chart or override the assigned one:

add_filter( 'sizer/resolved_chart_id', function ( string $chart_id, WC_Product $product ): string {
    // Provide a store-wide default only when nothing is assigned.
    if ( '' === $chart_id ) {
        return 'adult-tops'; // an existing chart id
    }

    return $chart_id;
}, 10, 2 );

Return an empty string to render no guide. The id you return must match an existing chart, an unknown id resolves to nothing. This is exactly the hook Sizer Pro uses to add its store-wide default chart, so it composes cleanly with your own filters by priority.