Configuration
Sizer has two parts to configure: the charts you build and reuse, and the display options that decide how and where a chart appears on the product page.
Building a chart
Section titled “Building a chart”Open WooCommerce → Size Guides and create a chart. A chart is a simple labelled table of rows and columns — for example sizes down the side (S, M, L) and measurements across the top (chest, waist, length). Build it once; you can assign the same chart to many products and categories.
Display style
Section titled “Display style”How an assigned chart appears on the product page:
- Modal — a native
<dialog>that opens over the page. It is keyboard operable, focus-managed (focus is trapped while open and restored on close) and screen-reader friendly. Closes with Escape. - Product tab — the chart shows inline as an extra product tab instead of a pop-up.
Trigger style
Section titled “Trigger style”What the shopper clicks to open a modal chart:
- Button — a styled button, more prominent.
- Text link — a lighter inline link.
The trigger style applies to the modal display; the product-tab display uses WooCommerce’s own tab UI.
Placement
Section titled “Placement”Where the trigger (or tab) appears on the single product page:
- After the add-to-cart button
- Before the add-to-cart button
- In the product summary
- In the product meta area
- As a product tab (with the tab display style)
Assigning a chart
Section titled “Assigning a chart”A chart only appears once it is assigned. There are two ways:
- Per product — on the product edit screen under Product data → Size guide, pick the chart for that product.
- Per category — set a default chart on a product category, and every product in that category inherits it.
A product’s own assignment takes priority over a category default, so you can set a sensible category-wide chart and still override individual products.
Theming and overrides
Section titled “Theming and overrides”- Templates — override Sizer’s templates from your theme by placing files under a
sizer/folder, the same way you override WooCommerce templates. - CSS — the storefront output exposes CSS custom properties, so you can re-theme the chart and trigger without touching markup. The output is responsive, dark-mode aware and respects
prefers-reduced-motion.
Graceful by design
Section titled “Graceful by design”A product with no assigned chart — and no inherited category chart — renders nothing at all. There is no empty button or broken modal, so you can roll size guides out gradually.