Skip to content

How to Add Size Chart in WordPress

Adding a size chart in WordPress improves customer experience by helping shoppers choose the right fit. This guide covers easy methods using plugins, page builders, and custom code—perfect for WooCommerce stores or any product-based site.

Key Takeaways

  • Use plugins for quick setup: Tools like WooCommerce Size Chart make adding responsive charts simple without coding.
  • Customize placement with shortcodes: Insert size charts anywhere—product pages, tabs, or pop-ups—using shortcode snippets.
  • Design matters: Use clear tables, icons, and mobile-friendly layouts to ensure usability across devices.
  • Test before publishing: Always preview your chart on desktop and mobile to catch formatting issues early.
  • Keep it updated: Regularly review and adjust size data based on customer feedback or product changes.
  • No-code options exist: Even beginners can add professional-looking charts using Elementor or Gutenberg blocks.
  • Improve trust and reduce returns: A visible size guide builds confidence and cuts down on wrong-size purchases.

How to Add Size Chart in WordPress

If you run an online store—especially one selling clothing, shoes, or accessories—you’ve probably faced the frustration of customers ordering the wrong size. Returns cost time, money, and trust. The solution? A clear, easy-to-find size chart in WordPress.

In this guide, you’ll learn multiple ways to add a size chart to your WordPress site—whether you’re using WooCommerce, Elementor, or just plain old HTML. We’ll walk through plugin-based solutions, manual methods, and pro tips to make your size guide stand out. By the end, your customers will know exactly what size to order—and you’ll see fewer returns and happier shoppers.

Why Your Store Needs a Size Chart

Before diving into the “how,” let’s talk about the “why.” A size chart isn’t just a nice-to-have—it’s essential for eCommerce success. Here’s why:

– Reduces return rates: Studies show that up to 30% of online apparel returns are due to sizing issues. A clear chart cuts that number significantly.
– Builds customer confidence: When shoppers see accurate measurements, they’re more likely to complete a purchase.
– Improves SEO: Well-structured content (like tables with real data) can boost your product pages in search results.
– Works on all devices: A responsive size chart looks great on phones, tablets, and desktops—critical since over 60% of shopping happens on mobile.

Now, let’s get practical.

Method 1: Use a Dedicated Plugin (Best for Beginners)

The fastest and easiest way to add a size chart in WordPress is with a plugin. These tools handle the design, placement, and responsiveness automatically.

Step 1: Install a Size Chart Plugin

We recommend WooCommerce Size Chart (free) or Product Size Charts Plugin for WooCommerce (premium). Both are beginner-friendly and integrate seamlessly with WooCommerce.

To install:

  1. Go to Plugins > Add New in your WordPress dashboard.
  2. Search for “WooCommerce Size Chart.”
  3. Click Install Now, then Activate.

Step 2: Create Your First Size Chart

Once activated:

  1. Go to Size Charts > Add New.
  2. Give your chart a title (e.g., “Women’s T-Shirt Size Guide”).
  3. Use the built-in editor to add a table. Most plugins support drag-and-drop table builders.
  4. Fill in your sizes (S, M, L) and measurements (chest, waist, length, etc.).
  5. Upload an image if needed (e.g., a diagram showing where to measure).
  6. Save your chart.

Step 3: Assign the Chart to Products

Now, link your chart to specific products:

  1. Edit a product in WooCommerce.
  2. Scroll down to the Product Data section.
  3. Look for a new tab or field labeled “Size Chart” (added by the plugin).
  4. Select your newly created chart from the dropdown.
  5. Update the product.

The chart will now appear on the product page—usually as a clickable link or tab labeled “Size Guide.”

Pro Tip: Use Conditional Logic

Some plugins let you assign charts based on categories. For example, all “Men’s Shoes” can show the same size guide. This saves time and keeps things consistent.

Method 2: Add a Size Chart with Elementor (Great for Custom Designs)

If you use Elementor to build your site, you can create a stunning size chart without plugins—or enhance an existing one.

Step 1: Create a New Template

  1. Go to Templates > Theme Builder > Product Pages (if using WooCommerce).
  2. Click Add New and choose “Single Product.”
  3. Design your product page layout.

Step 2: Insert a Size Chart Table

  1. Drag a HTML Widget or Shortcode Widget into your layout.
  2. If using HTML, paste a table like this:
    <table>
  <tr>
    <th>Size</th>
    <th>Bust (in)</th>
    <th>Waist (in)</th>
  </tr>
  <tr>
    <td>S</td>
    <td>34-36</td>
    <td>26-28</td>
  </tr>
</table>
  3. Style it with Elementor’s design tools—add borders, colors, and padding.

Step 3: Make It Responsive

Use Elementor’s responsive mode to check how your table looks on mobile. If it’s too wide, consider:
– Using a stacked layout (size on top, measurements below)
– Adding a horizontal scroll container
– Converting to an accordion (click to expand)

Pro Tip: Use Dynamic Tags

If you have multiple size charts, create reusable templates and use dynamic conditions to show the right one per product category.

Method 3: Add a Size Chart with Shortcodes (Manual but Flexible)

Shortcodes let you insert content anywhere—even in product descriptions or custom tabs.

Step 1: Create Your Chart as a Page or Post

  1. Go to Pages > Add New.
  2. Title it “Size Guide” and build your chart using the Gutenberg editor.
  3. Use the Table block for clean formatting.
  4. Publish the page.

Step 2: Get the Page Shortcode

WordPress doesn’t give a shortcode by default, but you can use a plugin like Insert Pages to generate one:

  1. Install and activate Insert Pages.
  2. Edit your product page.
  3. Add a shortcode like: [insert page='size-guide' display='content']

Now, the full size chart appears directly on the product page.

Alternative: Use a Custom Shortcode (Advanced)

If you’re comfortable with code, add this to your theme’s functions.php file (or better, a child theme):

function custom_size_chart_shortcode() {
  return '<table>...your table HTML here...</table>';
}
add_shortcode('size_chart', 'custom_size_chart_shortcode');

Then use [size_chart] anywhere.

Method 4: Add a Pop-Up Size Chart (Best for Clean Layouts)

Want to keep your product page tidy? Show the size chart in a pop-up.

Step 1: Use a Pop-Up Plugin

Plugins like Popup Maker or Elementor Popups work well.

Step 2: Create the Pop-Up

  1. Design your size chart inside the pop-up builder.
  2. Add a trigger button: “View Size Guide”
  3. Set the pop-up to open on click.

Step 3: Add the Button to Product Pages

Use a shortcode or Elementor widget to place the button near the “Add to Cart” button.

Styling Tips for a Professional Look

A poorly designed size chart can confuse more than help. Follow these best practices:

– Use clear headers: Label columns like “Size,” “Chest,” “Length.”
– Include units: Always specify inches or centimeters.
– Add a measurement guide image: Show where to measure (e.g., underarm for chest).
– Make it mobile-friendly: Test on small screens—avoid horizontal scrolling.
– Use contrasting colors: Ensure text is readable against the background.

For advanced styling, learn how to add custom CSS in WordPress to tweak fonts, spacing, and borders.

Troubleshooting Common Issues

Size Chart Not Showing?

– Check if the plugin is active.
– Verify the chart is assigned to the correct product or category.
– Clear your cache (plugin or server-side).

Table Looks Broken on Mobile?

– Use responsive table plugins like TablePress.
– Switch to a vertical layout for small screens.
– Avoid merging cells.

Shortcode Not Working?

– Ensure the plugin generating the shortcode is active.
– Check for typos in the shortcode.
– Test in a default theme to rule out conflicts.

If you’re using a custom theme, make sure it supports WooCommerce properly. Learn how to apply a WordPress theme correctly to avoid layout issues.

Conclusion

Adding a size chart in WordPress doesn’t have to be complicated. Whether you use a plugin, Elementor, or custom code, the key is to make it easy to find, simple to read, and accurate. A well-placed size guide not only improves user experience but also boosts conversions and reduces returns.

Start with a plugin if you’re new, or go custom if you want full control. Test your chart on real devices, gather feedback, and update it regularly. Your customers—and your bottom line—will thank you.