Skip to content
WooCommerce & WordPress Plugin Docs

Getting started

Most shops can show their first size guide in a few minutes: build a chart, assign it to a product, check the button. There is no display style or placement to choose, the guide is always a button after the add-to-cart button, opening a modal.

Before you start

Section titled “Before you start”
  • WordPress 6.5 or newer
  • PHP 8.1 or newer
  • WooCommerce active, Sizer only does anything on WooCommerce single product pages.

Install

Section titled “Install”
  1. Install and activate WooCommerce.
  2. Install Sizer from the plugin directory (when live on WordPress.org), or upload the sizer folder to /wp-content/plugins/.
  3. Activate the plugin. A Size Guides entry appears under the WooCommerce menu.

Build a chart

Section titled “Build a chart”

Open WooCommerce → Size Guides and switch to the Size charts tab. Click + Add size chart and fill in:

  • Chart name, required; what you and the chooser see, e.g. Men’s T-Shirts.
  • Caption (optional), a short note shown below the table on the storefront, e.g. All measurements in cm.
  • Columns, the headings across the top (Size, Chest, Waist, Length). Use + to add a column, × to remove one.
  • Rows, one row per size. The first cell of each row is treated as the row’s size label.

Click Save charts. Fully-empty rows are dropped on save, and a chart with no name is discarded, give every chart a name.

Assign it to a product

Section titled “Assign it to a product”

Edit a product. In the Product data box, open the Size guide tab and pick your chart from the Size chart select. Leave it on - No chart - to show nothing on that product. Update the product. Assignment is per product; there is no category-level or store-wide assignment in the free edition (the store-wide default is a Sizer Pro feature).

Verify on the storefront

Section titled “Verify on the storefront”
  1. Open the product you assigned, a Size guide button appears just below the add-to-cart button.
  2. Click it, the chart opens in a modal dialog.
  3. Keyboard test, press Escape to close, or click the backdrop outside the dialog; focus returns to the Size guide button either way.
  4. Open a product with no chart, no button and no dialog are rendered, and no Sizer CSS or JS is loaded on that page.

Set the wording (optional)

Section titled “Set the wording (optional)”

On the Settings tab you can change the button text (Link wording) and the dialog heading (Pop-up heading). Both are optional, leave the heading blank and it reuses the button text. See Configuration.

Free vs Pro

Section titled “Free vs Pro”

The free edition covers reusable charts, per-product assignment, the accessible modal and the two wording settings. Sizer Pro adds a store-wide default chart for products with no assignment; per-variation charts, cm/inch switching, a “find my size” calculator and CSV import/export are on its roadmap, not shipped yet.

Need help?

Section titled “Need help?”