How to add size charts with Elementor, Divi, or the Block Editors in WooCommerce

Let's you create branded, mobile-friendly size guides and place them anywhere—on product pages, landing pages, or custom templates.

Each chart provides a shortcode so it works seamlessly with page builders and themes.

How to display the size chart on a custom template

Shortcode embedding for page builders.

After you create a size chart, the plugin shows a chart-specific shortcode (e.g., [scfw_size_chart id="1234"] ). Paste this into Elementor, Divi, or the WordPress Block Editor to display the chart anywhere.

Why size chart with a shortcode required

• Works with any theme and major builders.
• Let's you place a chart exactly where you want (under images, near Add to Cart, in tabs/accordions, on landing pages).
• Reuse the same chart across multiple products or pages without duplication.

How to configure — step guide

Access the plugin

Goto: Dashboard → Dotstore → Product size chart → Size chart

Create a size chart & get the shortcode

1. Go to Dotstore → Product size chart → Size chart and click Add new.
2. Add a Chart Title and build the Chart Table (use the one-click generator or add rows/columns).
3. Choose Size Chart Position (Popup / Tab / Inline) and, if using Popup, set the button text (e.g., “SIZE GUIDE”).
4. Click Publish.
5. Copy the Shortcode shown on the chart screen (ID will be unique to your chart).

Place the chart with your page builder

A) Elementor

6. Edit the product/page/template with Elementor.
7. Drag the Shortcode widget where you want the chart (e.g., under Add to Cart).
8. Paste the chart’s shortcode and Update.

B) Divi

6. Edit with Divi Builder.
7. Add a Code module at the desired spot.

8. Paste the chart’s shortcode and save.

   

C) WordPress Block Editor (Gutenberg)

6. Edit the page/product.
7. Insert a Shortcode block (or Custom HTML block).
8. Paste the chart’s shortcode and Update.

Front-end check

• Open the page/product and confirm the chart renders. For the Popup style, click the SIZE GUIDE button to open the modal.

  

Real examples

Example 1 — Elementor: US Men’s T-Shirt (inches)

• Chart: US Men’s Tee (in) — columns: Size, Chest (in), Length (in)
• Position: Popup (button: “SIZE GUIDE”)
• Placement: Elementor Shortcode widget below Add to Cart
• Result: Quick access near the buy box for faster decisions.

Example 2 — Divi: US Women’s Sneakers (US/EU)

• Chart: US/EU Women’s Sneakers — columns: US, Foot Length (in), EU
• Style: Tab/Inline (if you want it always visible)
• Placement: Divi Code module in a two-column layout under the gallery
• Result: Clear sizing without scrolling long descriptions.

Expected outcome

• The size chart appears exactly where you place the shortcode in Elementor, Divi, or the Block Editor.
• Charts remain mobile-friendly and follow the chart’s own position/style settings (Popup/Tab/Inline, Standard/Tabbed).
• Reusing the same chart across pages saves setup time and reduces sizing questions and returns.

FAQs

1) Where do I find the shortcode?

After you Publish a chart, the shortcode displays on the chart screen (and in the chart list). Copy and paste it into your builder/module/block.

2) Do I have to assign the chart to products if I’m using the shortcode?

Not required. The shortcode renders the chart wherever it’s pasted. Assigning is useful if you want auto-display on PDPs without editing templates.

3) Will the popup/tab/inline choice still apply when using a shortcode?

Yes. The chart respects its configured Position (Popup/Tab/Inline) and Style (Standard/Tabbed), even when inserted via shortcode.

4) Can I place multiple charts on the same page?

Yes—add multiple shortcodes. Label buttons/tabs clearly (e.g., Top, Bottom, US, EU).

5) Does this work with theme or builder templates?

Yes. Paste the shortcode in template sections (Single Product, Product Summary, custom PDP blocks) to reuse across many products.

6) The chart didn’t show—what should I check?

Confirm the shortcode ID, clear cache, and ensure the chart is Published. If using Popup, verify the button text is set and your theme isn’t blocking modals.