Skip to content
WooCommerce & WordPress Plugin Docs

Sizer

Sizer adds a Size guide button after the add-to-cart button on WooCommerce product pages. A shopper clicks it and the size chart you assigned opens in an accessible native <dialog>, so they can check measurements without leaving the product. If a product has no chart assigned, nothing is rendered, no empty button, no broken modal.

Why stores pick Sizer

Section titled “Why stores pick Sizer”

You build each chart once in the admin, a labelled table of columns and rows, plus an optional caption, and reuse the same chart across as many products as you like. There is no per-product table to maintain. Charts live in your own database; Sizer makes no external requests and adds no tracking. The free edition is the full GPL product.

Free edition highlights

Section titled “Free edition highlights”
  • Reusable size charts, build a labelled table once under WooCommerce → Size Guides and assign it to many products.
  • Per-product assignment, pick the chart on the product itself (Product data → Size guide). One product, one chart.
  • Accessible modal, a native <dialog> opened with showModal(): keyboard operable, closes on Escape or a backdrop click, returns focus to the trigger on close.
  • Two wording settings, the button text and the dialog heading, set on one screen. That is the whole settings page.
  • Themeable output, the storefront stylesheet is built on --sizer-* CSS custom properties, with a dark-scheme variant and prefers-reduced-motion handling.
  • Theme template overrides, copy the trigger, dialog or table template into your theme under a sizer/ folder.
  • Graceful by design, a product with no assigned chart renders nothing, so you can roll guides out gradually.

How the size guide works

Section titled “How the size guide works”

On the single product page Sizer hooks woocommerce_after_add_to_cart_button (priority 15) and renders a button when the current product has a chart assigned in its _sizer_chart_id meta. Clicking the button opens a <dialog> containing the chart rendered as an accessible table. The stylesheet and a small dependency-free script are registered on every product page but only enqueued when a chart actually applies, so unassigned products load no extra assets.

Editions

Section titled “Editions”
  • Free on WordPress.org, reusable charts, per-product assignment, the accessible modal, the two wording settings, theme template overrides, and the sizer/resolved_chart_id filter for add-ons.
  • Sizer Pro (Freemius) adds a store-wide default chart and per-variation charts on variable products. Both use the free sizer/resolved_chart_id filter and variation meta, add no database tables, and degrade to nothing if the free plugin is deactivated. Unit switching (cm/inch), a “find my size” calculator and CSV import/export are on the Pro roadmap. See Sizer Pro.

Next steps

Section titled “Next steps”
  • Getting started, install, create a chart, assign it, verify on the storefront.
  • Configuration, the two settings, chart building, assignment and theming.
  • Using size guides, the storefront flow, keyboard behaviour and the developer filter.