How to Place Product Size Charts in Multiple Locations in WooCommerce: Popup and Tab Methods

Let's you create branded size guides and choose exactly where they appear on the product page—popup, tab, or inline positions—without coding.

Benefits of the size chart position

Size Chart Position controls the display location of a chart on the product page. Available options include:

• Modal Popup (opens over the page)
• Additional Tab (a new “Size Guide” tab)
• Inline – Before Add to Cart
• Inline – After Add to Cart

Use of different chart positions

• Put the guide where shoppers actually look, improving confidence and reducing returns.
• Use pop-up for mobile speed, tab for detail-heavy charts, or inline near the Add to cart button for maximum visibility.
• Match different themes/page builders and page layouts.

How to configure — step guide

Access the plugin

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

Create or edit a chart

1. Go to Dotstore → Product size chart → Size chart and click Add new (or Edit an existing chart).

   Enter a Chart Title and build your table (rows/columns).

   Scroll to Size Chart Position and choose one of:

   • Modal Popup
   • Additional Tab
   • Inline – Before Add to Cart
   • Inline – After Add to Cart
2. If using Popup, set Button text (e.g., “Size Guide”).
3. (Optional) Customize button style/text, add fit notes or “in/cm” labels.
4. In the right-side Product selection widget, choose the products that should show this chart.

5. Click Publish (or Update).

   

Verify on the storefront

8) Open an assigned product page and confirm the chart renders at the chosen location on desktop and mobile.

Real examples (US-based sizes)

Example 1 — US Men’s T-Shirt (Popup for mobile)

• Position: Modal Popup with button “Size Guide”
• Table columns: Size, Chest (in), Length (in)
• Assigned products: “Sparta Gym Tee”, “Classic Crew Tee”
• Why: Quick access on phones; no page scroll needed.

Example 2 — US Women’s Sneakers (Tab for details)

• Position: Additional Tab labeled “Size Guide”
• Table columns: US, Foot Length (in), EU
• Assigned products: “Aero Run Sneaker”, “StreetFlex Knit”
• Why: Room for long tables and fitting notes without cluttering the buy box.

Expected outcome

• The size chart appears exactly where you choose (popup, tab, or inline before/after Add to cart).
• Shoppers find sizing faster → more confident purchases and fewer returns.
• You can adjust positions per product as your layout or audience needs change.

FAQs

1) Can I use different positions for different charts on the same product?

Yes. Each chart stores its own position. If you show multiple charts, label buttons/tabs clearly (e.g., Top, Bottom).

2) Will this work with Elementor/Divi/Block Editor?

Yes. Position settings work across major page builders and most themes.

3) Can I rename the popup button or tab title?

Yes. Set Button text for popups and Tab title for the Additional Tab.

4) What’s best for mobile?

Popup is fastest to access; Inline near Add to cart is also highly visible.

5) The inline chart looks tall. Any tips?

Use concise headers, collapse notes, or switch to Tab/Popup for very large tables.