How to design your own size chart table style in WooCommerce

Let's you build branded, mobile-friendly size guides and place them as a pop-up, tab, or inline block—no code. With Advanced Style, you can fully customize the table’s colors to match your brand.

How to use advanced style

Advanced Style (Table Style) in Size Chart Settings gives you fine control over chart colors:

• Table Color (borders/dividers)
• Header background
• Text Color (table body text)
• Even row background and Even row text
• Odd row background and Odd row text

Benefits of advanced table style color

• Keep PDPs on-brand and consistent with your theme.
• Improve readability with proper contrast and zebra striping (odd/even rows).
• Help shoppers scan measurements faster → fewer questions and returns.

How to configure — step guide

Access the plugin

Path: 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).
2. Add a Chart Title and build your Chart Table (use one-click generator or add rows/columns).

Enable Advanced Style

3) Open Size Chart Settings.

4) Set Table Style = Advanced Style.

Choose your colors

5) Set each color using the Select Color picker (you can paste HEX codes):

• Table Color: border/divider lines (e.g., #E5E7EB )
• Header background: header row fill (e.g., dark or brand color)
• Text Color: default body text (ensure high contrast)
• Even row background / Even row text

• Odd row background / Odd row text

  

Tip: Aim for a contrast ratio of 4.5:1 or higher between text and background.

Assign to products & preview

6) In the right-side Product selection widget, choose the products that should use this chart.

7) Click Publish (or Update).

8) Open an assigned product page and verify the pop-up/tab/inline chart shows your new colors on desktop and mobile.

Real examples

Example 1 — US Men’s T-Shirt (inches, high-contrast neutral)

• Header background: #1B1F23
• Odd row background: #FFFFFF , Odd row text: #111827
• Even row background: #F7F9FC , Even row text: #111827
• Table Color (borders): #E5E7EB
• Columns: Size, Chest (in), Length (in)
• Position: Popup (button “SIZE GUIDE”)
• Assign to: Sparta Gym Tee, Classic Crew Tee

Example 2 — US Women’s Sneakers (US/EU, subtle brand accent)

• Header background: #696EF6 (Woo-style) with Header text: white
• Odd row background: #FFFFFF , Odd row text: #1B1F23
• Even row background: #F4F5FF , Even row text: #1B1F23
• Table Color: #D9DCEF
• Columns: US, Foot Length (in), EU
• Position: Tab “Size Guide”
• Assign to: Aero Run Sneaker, StreetFlex Knit

Expected outcome

• A fully branded size chart with clear, readable colors appears on assigned products.
• Better scanning → more confident purchases and fewer wrong-size returns.
• Styling is per-chart, so different product lines can have tailored looks.

FAQs

1) Can I paste my brand HEX codes?

Yes—use the color picker’s HEX input for exact colors.

2) Does Advanced Style affect popups, tabs, and inline equally?

Yes—the table styling applies regardless of position (Popup/Tab/Inline).

3) Can I have different styles for different products?

Yes—each chart keeps its own style. Create multiple charts with different palettes and assign as needed.

4) What if my table becomes hard to read on mobile?

Increase contrast (darker text on lighter rows), use thinner borders, and keep headers short. Consider splitting very large charts.

5) How do I reset to defaults?

Switch Table Style back to your theme/default style or set neutral colors (white backgrounds, dark text, light borders).