DEV3Technologies
All case studies

DEV3 Technologies · own product

DEV3 AI Size Guide & Fit Advisor: size charts, a maths-based fit quiz and learning from returns

Our own WooCommerce plugin for apparel stores: size charts with a cm/in switch and a phone bottom sheet, a "What size am I?" quiz built on measurement maths rather than AI, and return reasons that tell the quiz when a style runs small.

WordPressWooCommercePHPReactGoogle Gemini APIREST APIGutenberg blockHPOSPHPUnitJestTailwind CSS
Industry
E-commerce (WooCommerce, fashion and footwear)
Services
Web DevelopmentAI ImplementationCustom Software

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
The size guide on a block theme: a centred dialog with tabs for each table, How to measure and Find my size, plus a cm/in switch.

The size guide on a block theme: a centred dialog with tabs for each table, How to measure and Find my size, plus a cm/in switch.

The challenge

Size-chart plugins for WooCommerce stop at a table in a popup: hard to read on a phone, metric or imperial but not both, and silent about which size to pick. Recommendation services that learn from returns exist, but they are hosted platforms where the store's data leaves the site. We wanted the whole loop inside WordPress: charts a merchant can build in minutes, a quiz that gives the same answer every time and can explain why, and a way for real return reasons to correct the advice, without an AI model deciding anyone's size.

Our solution

We built DEV3 AI Size Guide & Fit Advisor as a WooCommerce plugin in PHP with a React admin and a small dependency-free storefront script. The size recommendation is deterministic; AI only helps with the work around it.

Key design decisions

  • One data model, stored in base units. A chart holds one or more tables, columns of three kinds (size label, measurement, text such as US/UK/EU) and one row per size. Measurements are always stored in cm and kg; inches and pounds are converted on entry and on display, ranges at both ends.
  • The quiz is maths, not AI. Fit\Engine scores every size row by how far each measurement falls outside its range, measured in that column's own step between sizes and weighted per measure. Fit preference adds ease to girths, a matching "usual size" is a strong signal, and missing chest, waist and hips can be estimated from height and weight with a lower weight and a lower confidence.
  • Honest answers. Every result carries an alternative size when the shopper sits between two, a confidence level, a verdict per measure ("Waist: may be snug") and an out-of-range flag. A written explanation is built from the same facts; DEV3 AI can rephrase it, but only from those facts, and the template stays as the fallback.
  • Returns move the quiz, but a person decides. Refund reasons, a Fit feedback box on orders (HPOS and legacy), manual records and a developer action feed a keyword classifier in five languages. When enough fit returns point one way, the merchant sees a "runs small" or "runs large" card and can shift the quiz by one size.
  • A real phone sheet. Below 640 px the guide is a bottom sheet with swipe-to-close, a focus trap and safe-area padding, and tables scroll inside it with a sticky header row and size column.
  • AI drafts, never auto-saves. The Google Gemini API can draft a chart from product data, a pasted table or a photo of a supplier chart, write the how-to-measure guide, classify unclear return notes and suggest category assignments. Each is a draft the merchant accepts.

Architecture

Charts are a private custom post type with JSON meta; a resolver picks the chart for a product by product override, then product, tag, category (including parents) and priority. Guide markup is rendered on the server, so it works before JavaScript loads and with full-page caches. Public quiz, explain and tracking endpoints are same-origin and rate-limited per IP. Return records and anonymous events live in two custom tables, with a unique key that makes refund imports idempotent. The API client, settings and usage logs come from a shared core used across DEV3's plugins.

Results

The plugin is complete. It ships in the DEV3 AI WooCommerce Plugins Bundle on the DEV3 marketplace, alongside 20 other WooCommerce plugins, and is being prepared for CodeCanyon. What was built and verified:

  • 58 PHPUnit tests (38 for this plugin, 20 for the shared core), covering the fit engine, unit conversion, the paste parser, chart resolution, returns learning, REST permissions and the storefront markup
  • 40 Jest tests (20 for the plugin's storefront, unit helpers and admin, 20 for the shared UI kit)
  • Fit engine cases from the test suite: chest 98 cm gives M with high confidence; chest 101 cm gives M for a snug fit and L for a relaxed one; a learned "runs small" bias moves M to L but never past the largest size; 38.5 in converts to 97.8 cm
  • Storefront checked on Twenty Twenty-Five and Twenty Twenty-One at 375 px and 1440 px: bottom sheet on phones, centred dialog on desktop, sticky table header and size column
  • All gates passed: build, Jest, PHPUnit in wp-env, phpcs with 0 errors and 0 warnings, make-pot and packaging
  • AI features were tested with mocked Google Gemini responses, including malformed output and failures; a run with a live key is still to come. One known gap: the keyword classifier misreads some notes, such as "fit after sizing up"

Setup guide

No licence key or activation is needed: install the zip and every feature works.

Requirements

  • WordPress 6.0 or newer and PHP 7.4 or newer
  • WooCommerce 8.0 or newer, active (block and classic themes, HPOS and the cart/checkout blocks are supported)
  • Optional: a Google Gemini API key for the AI chart drafts, the how-to-measure writer, return-note classification and friendly quiz explanations. Charts, templates, paste import, the "What size am I?" quiz and returns learning all work without one

1. Install the plugin

  1. The plugin ships inside the DEV3 AI WooCommerce Plugins Bundle download. Unzip the bundle and find dev3-ai-woocommerce-plugins-bundle/dev3-ai-size-guide-for-woocommerce/dev3-ai-size-guide-for-woocommerce.zip.
  2. In WordPress, go to Plugins → Add New → Upload Plugin, choose that zip and click Install Now.
  3. Click Activate. Its menu, DEV3 AI Size Guide, appears in the admin sidebar.

2. Connect Google Gemini (optional)

  1. Create a free API key in Google AI Studio (sign in with a Google account, then Create API key).
  2. Go to DEV3 AI Size Guide → API Config, paste the key and click Validate & save. The key is stored encrypted (AES-256-GCM) and never sent to the browser.
  3. Optional: pick the model (gemini-2.5-flash is the fast default) and set a budget on the same screen.

Prefer config files? Add define( 'DEV3SG_GEMINI_API_KEY', 'your-key' ); to wp-config.php instead.

3. First-time setup

  1. Open Templates and click Use template on the chart closest to your products (12 are included: women's tops, dresses and bottoms, men's tops and jeans, unisex T-shirts, women's and men's shoes, kids, bras, rings and hats).
  2. In the chart editor, adjust the rows to your brand's measurements (ranges such as 86-91 are fine, and you can type in cm or inches), set the Body profile and add a how-to-measure guide.
  3. In the assignment card, pick the categories, tags or products the chart applies to, then turn on Live on the store and click Save chart. Drafts are never shown to shoppers.
  4. In Settings, choose where the guide appears (popup button and product tab, popup button only, or product tab only), the button position, the default unit for shoppers and your accent colour.
  5. In Fit quiz, choose which questions shoppers see (fit preference, usual size, height-and-weight estimates) and try the quiz against your chart.
  6. Check the Dashboard: the coverage card lists products that still have no size guide, with a one-click Assign.

Updating

Download the new bundle version, then upload the plugin zip in Plugins → Add New → Upload Plugin and choose Replace current with uploaded. Charts, settings and return records are kept.

Uninstalling

Deactivate and delete the plugin from Plugins. Charts, return records and settings are kept unless you turned on Delete all plugin data when the plugin is uninstalled in Settings first.

How to use

Build a chart from a template

  1. Go to DEV3 AI Size Guide → Templates and click Use template on the closest match, for example Men's tops & shirts.
  2. In the chart editor, edit the rows to match your brand. Switch the Editing unit to inches if your supplier measures in inches; values are converted and stored in cm.
  3. Use Add size, Add column and Add table for extra sizes, measures or a second table such as garment measurements or international sizes. Each table becomes a tab for shoppers.
  4. Fill in How to measure & fit note, choose the categories, tags or products in the assignment card, turn on Live on the store and click Save chart.

Import a supplier's chart

  1. Open a chart (or click New chart) and scroll to Build the chart with DEV3 AI.
  2. Choose Paste a chart and paste the table from a supplier website, PDF or spreadsheet. Leave Unit used in the source on Detect automatically.
  3. Click Read table (no AI) for clean tables, or Generate with DEV3 AI for messy ones. With AI connected you can also use From product data or Photo or screenshot.
  4. Review the draft, then click Use these tables or Add as extra tables, or Regenerate / Reject. Nothing is saved until you click Save chart.

Set up and test the "What size am I?" quiz

  1. Go to Fit quiz and choose the questions: fit preference (snug, regular, relaxed), the size shoppers usually wear (US, UK, EU), and chest, waist and hips estimated from height and weight.
  2. Optional: turn on Explain results with DEV3 AI for a friendly sentence under each result. A written explanation is always shown when AI is off or unavailable.
  3. Pick a chart in Chart to test, type some measurements and click Find size. The tester calls the same endpoint as the storefront, so you see exactly what shoppers will see.

Learn from returns

  1. Refund reasons are recorded automatically when Record WooCommerce refund reasons automatically is on. On the order screen, the Fit feedback box lets you mark each line as too small, too large or fit OK.
  2. For returns handled elsewhere, open Returns & learning and click Record a return.
  3. When a chart passes the minimum number of fit returns and most of them point one way, a Runs small or Runs large card appears. Tick Also show shoppers if you want the fit note on the product, then click Suggest one size up (or down), or Dismiss.
  4. With AI connected, Classify unclear notes sorts free-text reasons the keyword rules couldn't place, and Summarise with DEV3 AI writes a short summary per size. Accept or reject each suggestion.

Place the guide yourself

  1. In the block editor, add the Size Chart block (WooCommerce category) and choose the inline chart, button or quiz view.
  2. In classic content or page builders, use [dev3sg_size_guide] for the buttons and popup, [dev3sg_size_chart id="12"] for an inline chart, or [dev3sg_fit_quiz] for an inline quiz.
  3. To hide the guide on one product, open the product and set the Size guide box to none.

Close coverage gaps

  1. The Dashboard lists Products without a size guide. Click Assign to pick a chart for one product.
  2. With AI connected, click Suggest assignments to get a category-to-chart mapping and accept it row by row.

Related case studies