Sizy – Size Chart for WooCommerce

Description

Sizy adds size charts to your WooCommerce store. Create a size guide once, link it to the products that use it, and show it to shoppers with a shortcode.

• Simple editor. Type the measurements as plain text, one row per line with cells separated by |, and see a live preview of the table as you type.
• Several tables per guide. Leave a blank line to start a new table, for example tops and trousers in one guide.
• Popup or inline. [sizy_size_chart] shows a “Size guide” link that opens the chart in a popup. [sizy_size_chart_table] shows the chart directly on the page.
• Text around the table. Add default text before and after every chart (how to measure, returns policy), or set custom text per size guide.
• Easy assignment. Pick a size guide in the product’s sidebar, or paste a list of SKUs into the size guide to link many products at once.
• Your look. Change the link text, popup title, icon (built-in ruler, your own SVG or none), font sizes and table colours.
• Accessible and light. The popup uses the browser’s native <dialog>: Esc closes it and keyboard focus stays inside. CSS loads only on pages that show a chart, and JavaScript only where there’s a popup. Wide tables scroll sideways with the size column pinned.

Variations use their parent product’s size guide. Shop managers can manage size guides, not only administrators.

Sizy doesn’t connect to any external service and doesn’t collect any data.

Measurements format

Garment size | S | M | L | XL
Chest (in) | 34-36 | 38-40 | 42-44 | 46-48

Trousers
Waist (in) | 30 | 32 | 34 | 36
Inside leg | 31 | 31 | 31 | 31

• The first line of each table is the header row. The first cell of every row is the row label.
• A blank line starts a new table.
• A line without any | (“Trousers” above) becomes that table’s title.
• Short rows are padded, and fully empty rows and columns are dropped.

Shortcodes

• [sizy_size_chart]: a link that opens the size guide in a popup. Attributes: label (link text), title (popup heading), product_id.

• [sizy_size_chart_table]: the size guide directly on the page. Attributes: title (optional heading), product_id.

  product_id defaults to the current product. If the product has no size guide, both shortcodes output nothing, so they’re safe to use in a template shared by every product. From PHP: echo do_shortcode( '[sizy_size_chart]' );, for example on the woocommerce_single_product_summary action.

For developers

• Filter sizy_chart_id( $chart_id, $product_id ): change which size guide a product shows.
• Filter sizy_table_html( $html, $chart_id, $product_id ): change the rendered tables.
• CSS variables on .sizy, .sizy-modal: --sizy-head-bg, --sizy-head-text, --sizy-stripe, --sizy-border, --sizy-radius.