How to Display a Detailed Size Chart on Your WooCommerce Product Page

There are people who are very comfortable with buying clothing online. Then there are those who are hesitant. And, of course, various levels in between.

If a customer has bought something before, it’s a no-brainer. But there are instances where clothing choices are a bit more complicated and instead of dealing with constant returns, it might be better to provide your customers with the information they need to make more appropriate selections.

The Size Chart for WooCommerce

Now you might be thinking that any grid or chart plugin will do this. But this one is it’s made exclusively for this and works with WooCommerce products and the product page. You have a lot more control and it’s easier to manage (vs. creating separate charts or grids). It can be displayed as a product tab or a popup.

Once you have installed it, you have a few basic settings around color and adding a border. As I mentioned, you can choose whether you want to show it as a tab or a button that opens a popup with the chart.

Here are the tab settings.

size chart settings

And these are the button/popup settings, which include where the button shows up.

button settings

Setting Up the Chart

You have a few options for setting up the chart and where you want it displayed. You first option is to choose the type, Table or Image. The table option will let you create an actual table where the image is the alternative if you would rather just upload an image of a chart to insert.

chart type

Here you can add more information, details or even an added graphic to help people get the right size measurements.

For example, here are some details for measuring for a suit jacket, with helpful visuals.

chart description

Depending on the chart type you chose, you will either upload an image or create a chart. I have chosen to do the latter. Here is where you add your rows or columns.

create size chart

And here is the chart filled out.

finished size chart

If you want to target your market even more, you can do size charts for specific countries. For example, metric vs. standard.

countries

As far as what products this will display on, you can apply it to all products (great for a niche site) or specific products or product categories.

what products to show the size chart on

Lastly, you can set the tab priority, placing it where you think it serves best. Also, a custom tab/button title rather than the default Chart title.

tab priority and tab button title

Having done a bit with the settings around color and filling in all the necessary content, here is what the tab that I created looks like.

size chart on product page as a tab

If I choose to have it as a button and popup, here is what the button looks like. I have chosen to have it display after the short description.

button on product page

And if I click on it, here is the popup.

popup size chart

This is a great option if you need to highlight a size chart and make it easy for customers to find. You can check out the Size Chart of WooCommerce extension here.

Are you a WooCommerce Builder?

If you use WooCommerce to build websites, products or services, the next iteration of Do the Woo is just for you.

Learn about the upcoming community for WooCommerce builders.