Size tables are essential to give customers an idea of how apparel sizing options on your store translate into physical measurements since different brands may have variations. You can add size charts to your WooCommerce product pages so that customers can easily access this information.

These tables can be used for other purposes as well where you need to provide additional information about the different variants, especially, if it can be captured in a table format. For example, if you sell boat engines, you may have different names of engine classifications where you need to provide description like horsepower, engine capacity, etc.

I’ve seen some stores add well-formatted charts as an image in the product gallery. You can benefit from better search visibility by adding HTML-based charts using the below free plugin that gives you the ability to easily add charts and configure how they are displayed on your store.

Add size charts to WooCommerce: NC Size Chart plugin set up

The NC Size Chart is a free extension for WooCommerce to help you generate and assign size tables on your store. You can search for, install, and activate the plugin from within the WordPress dashboard. Go to the Size Chart item on the left sidebar and add a new chart to get started.

Here, you will be able to add details and configure the following options:

  • Name of the chart (primarily used for backend tracking) and content description for the main chart
  • Chart settings for the main chart – heading label, image, image position
  • Heading title color, chart text color, and overlay color (only for modal display)
  • Chart table style 1 (simple table formatting) or 2 (more visual formatting), and padding
  • Display position – additional tab on product page, or modal popup
  • In case of modal popup, the position of the chart button – before summary text, after add to cart button, before add to cart button, or after product meta
  • Categories to which the chart should be applied – you can select none, one, or multiple
  • Content for the main chart table including adding rows and columns
add size chart content

Add chart content including number of rows and columns

In the example above, we’ll add a size chart for the “Hoodies” category and create the men’s sizing as the main table. Within the same size chart, you can add two additional tables along with separate heading, image, and table content. As an example, you can add women’s and children’s sizing within the same overall size chart.

Lastly, you can toggle whether share buttons are enabled for the size chart.

Add size charts to WooCommerce: Display options

As mentioned above, you have two options for the styling of the table itself, and two options to set how customers can access the chart. Let’s take a look at two combinations that cover these different ways to display the charts.

add size chart style 1 and tab

Style 1, and tab position

In the above image, the table has simple styling – Style 1 – and is accessed through a tab on the product page. The other configurations are the more visual Style 2, and to display the chart as a modal popup when a customer clicks on the size chart button on the product page.

add size chart style 2 and modal view

Style 2, and modal position

Add size charts to WooCommerce: additional options

There are some additional options you can use to configure the size charts and their assignment to products. You can restrict display of the charts to certain member groups if you have a membership site.

add size chart membership

Membership restrictions

You can also add a custom message to display if a visitor lands on restricted content to better show value for being a member.

If you want to add a size chart to individual products rather than a whole category, you can do so by going into the product page on the backend, and choosing a chart from the Select Chart section in the right sidebar.

Lastly, you can set default settings for the size charts by going to the Settings section of Size Chart in the dashboard. Here, you can set defaults like the heading size, text colors, overlay options, etc.

add size chart settings

Set defaults under Size Chart > Settings

Add size charts to WooCommerce: Summary

With the free NC Size Chart extension for WooCommerce, you can easily add size charts to your store. These can be used for any product that has associated sizing or attribute options that need further description. A common example of this is in apparel where the sizes – small, medium, large, etc. – need further description in measurement.

You can add multiple charts, configure a number of display options for them, and assign them to single or multiple categories. You can also assign a chart to individual products through the product editing page. The charts render as HTML so you can benefit from better search visibility instead of adding charts as images to your products.

How do you display size charts on your store? What other use cases can these be used for? Please share in the comments below.


Note: This post may contain affiliate links, which means we get a commission from the plugin, theme, or service provider if you choose to purchase. Regardless of this, we are committed to providing high quality, unbiased resources. Have more questions? See our affiliate policy. You can use the plain links below if you prefer that we not receive a referral commission:
Articles you may also like:

Posted by Jai Sangha

Jai is a regular contributor to Sell with WP, and helps merchants improve their WordPress eCommerce businesses with plugin reviews, marketing or customer service tips, and tutorials.

Leave a reply

Your email address will not be published. Required fields are marked *