One of 15+ Modules

Divi Size Chart Module

Divi Size Chart Module displays a WooCommerce product's sizing guide as a popup, a slide-in drawer, an accordion, or right on the page, with the table, the tabs, and the panel styled natively in Divi. Build a chart once and assign it to a whole category, so every matching product picks it up automatically.

Divi Size Chart Module for WooCommerce

Four Ways to Show It

Popup, slide-in drawer, accordion, or inline on the page. One setting changes how the chart reaches your shopper.

Designed Down to the Last Cell

Table, five tab styles, panel, overlay, and trigger button all style separately, right in the Divi builder.

Charts Built and Assigned in Minutes

Nine content blocks in the admin, and one chart can cover an entire category.

Two Places, One Workflow

Size charts live in two places conceptually: a chart builder in your WordPress admin, and the module that displays them in Divi. Switch the module on and you get both.

WooCommerce Product Size Chart

Chart Builder

Build each chart from nine blocks, tables, tabs, diagrams, video, and more, then decide where it applies. Assign one chart to a whole category, tag, or brand, override it on the products that need something different, and duplicate a chart whenever you need a variant.
 In WordPress Admin
Divi WooCommerce Product Size Chart

Size Chart

Choose how the chart reaches your shopper: a popup, a drawer that slides in from the left, right, or bottom, an accordion that expands in place, or inline on the page. Then style the table, the tabs, and the panel independently in the Divi builder, opening it all from a standard Divi button.
In Divi Builder

Give Shoppers the Confidence to Click Buy

Show It the Way Your Product Page Needs

  • Open the chart in a popup, the pattern shoppers already know, over a dimmed and optionally blurred overlay.

  • Slide a drawer in from the left, right, or bottom. Set to bottom, it feels native on phones.

  • Expand it in place with an accordion. No overlay, no scroll lock, and a natural fit in a long description.

  • Or set it inline, always visible, for a dedicated sizing page or a product tab.

Divi WooCommerce Product Size Chart Display Options

Style Every Part of It in Divi

  • Style the table down to header and body backgrounds, borders, row striping, hover color, and equal-width columns.

  • Style the tabs inside a chart in any of five looks: Underline, Pills, Segmented, Folder, or Buttons.

  • Design the panel itself: width, background, overlay color, close button, and an optional backdrop blur.

  • Open it from a standard Divi button, so it inherits the button styling and hover states you've already set.

Divi WooCommerce Product Size Chart Styling

Build the Chart and Point It at Your Products

  • Build each chart from nine blocks, tables, tabs, diagrams, video, and more, and place a diagram beside the table instead of under it using the Layout block.

  • Add tabs for Women, Men, and Kids, or for cm and inches, so one chart serves several audiences.

  • Assign one chart to your whole store, or by category, tag, or brand. Every matching product picks it up automatically.

  • Override it on a single product, switch it off there, or exclude the odd item from a broad rule.

WooCommerce Product Size Chart Maker

Free Ready-to-Use Size Chart Layouts to Get Started

Skip the setup. Our pre-built size chart layouts are fully customizable, responsive, and ready to drop onto any Divi WooCommerce product template. Pick a style, choose your details, and go live in minutes.

Divi WooCommerce Product Size Chart Templates

Divi Size Chart vs a Third-Party Size Chart Plugin, Why a Native Divi Module Wins?

Feature DiviMerc Size Chart Third-Party Size Chart
A real Divi builder module Built natively for Divi Not available
Where you design it Live in the Divi Visual Builder A separate settings screen
Placement on the page Anywhere in your product template One hook position or a shortcode
Display modes Popup, drawer, accordion, or inline Usually popup only
Table styling Headers, borders, striping, hover, spacing A handful of preset skins
Tab styles Five, colorable per style One, if tabs exist at all
Reuse your Divi presets and styles Like any other Divi module Styled in isolation from your theme
Trigger button A full Divi button with every state A fixed link or basic button
Assign by category, tag, or brand Built-in rules Often per-product only
Per-product override and exclusions Built-in Varies
Diagrams and video inside a chart Built-in blocks Images only, if that
Cost Included with DiviMerc Free tier with a paid upsell

Ready to Answer "Will It Fit?" Before They Ask?

FAQs on Size Chart for Divi

Everything you need to know about the Size Chart module before you get started.

How Do I Add a Size Chart to a WooCommerce Product Page?

3
2
Adding a size chart to a WooCommerce product page starts with switching on the Size Chart module in DiviMerc, which creates a Size Charts screen under Products automatically. Build a chart there from blocks like Table and Tabs, assign it to the products you want, then drop the Size Chart module onto your product template in Divi.

What Happens on Products With No Chart Assigned?

3
2
Nothing renders on that product page. No button, no empty box, and no placeholder text. That's deliberate, so a single shared product template stays clean across products that need sizing and products that don't, without any per-product cleanup.

Is the Size Chart Module Compatible With WooCommerce and Divi?

3
2
Yes. Size Chart is a native Divi module made for WooCommerce product pages, added directly from the Divi Visual Builder onto any product template, with no separate plugin or dependency required beyond WooCommerce itself being active.

Do I Need to Know Code to Build a Size Chart?

3
2
No coding knowledge is needed. Charts are built from ready-made blocks, Title, Text, Table, Tabs, Layout, Image, Video, Divider, and Spacer, the same way you'd build a page in the Divi Visual Builder.

Where Do I Build a Size Chart?

3
2
Under Products → Size Charts, which appears once the Size Chart module is switched on. Each chart is built from blocks, a title, text, a measurement table, tabs, images, video, and more, so you can make it as detailed as your products need.

How Do I Show Measurements in Both cm and Inches?

3
2
Add a Tabs block with one tab for each unit. There's no built-in unit switcher, so this is the intended way to offer both.

Can One Chart Cover Lots of Products?

3
2
Yes, and that's the point. Assign it across your whole store, or by category, tag, or brand, and every matching product picks it up with no per-product work.

What if One Product Needs a Different Chart?

3
2
Choose a specific chart on that product and it overrides the rule, or switch the chart off for that product entirely.

Can I Match It to My Brand?

3
2
Yes. The table, the tabs, the panel, and the trigger button all style independently, and the trigger is a standard Divi button that inherits your existing button design.

Does It Work on Mobile?

3
2
Yes. Fonts, colors, spacing, and the panel dimensions are all adjustable per device. For wide measurement tables, reduce the number of columns or set a smaller cell font on phone, and a bottom drawer works especially well on small screens.

Can I Use a Popup on Desktop and an Accordion on Phone?

3
2
Display mode is one setting per module, so for that you'd add two modules and use Divi's visibility controls to show each on the right device.

Save Flat 50% Before Our Early-Bird Launch Pricing Ends

Save Up to 50% Before the Halloween Sale Ends

Get It Now

Save Up to 50% Before the Halloween Sale Ends

Get It Now