How to Add a Size Chart in WooCommerce in 2023

Looking for ways to add a size chart to your WooCommerce store?

Size charts on product pages offer customers information that they can use to make better buying decisions.

As a result, they help increase customer engagement and reduce cart abandonment in your online store. 

In this tutorial, I will show you how to add a size chart to your WooCommerce product pages using our Botiga theme.

1. Install & Activate the Free Botiga Theme

Botiga is a free WooCommerce theme you can download from our website.

After downloading the theme, you need to upload it to your WordPress site. 

Open your WordPress dashboard, go to Appearance > Themes > Add New, and click the Upload Theme button. 

Next, upload the theme using the Choose File option. Then, hit the Install Now button. Once the theme is installed on your site, click Activate.

Botiga will be activated on your site in a few seconds.

2. Install & Activate the Botiga Pro Plugin

Botiga Pro is a premium WordPress plugin that expands the functionalities of the free theme. It offers a ton of advanced features such as size charts, sticky add-to-cart buttons, audio and video galleries, mega menus, and more. 

Once you made the purchase, you can download the plugin from your aThemes account to your local computer. 

To install the plugin on your WordPress site, go to Plugins > Add New and click the Upload Plugin button. 

Then, upload the plugin by using the Choose File option and hitting the Install Now and later the Activate buttons:

Once you activated Botiga Pro, you need to activate the plugin license. 

Open your aThemes account and copy the license key. Next, navigate to Plugins > Botiga Pro License and enter your license key. 

3. Import a Starter Site (optional)

A starter site is a pre-built demo that provides you with a full website design as soon as you import it into your WordPress site. 

Botiga Pro offers nine starter sites, each targeting a different niche. You don’t have to use a starter site if you don’t want to — however, it can be a useful starting point.

Alternatively, you can create your own website design from scratch, using either the theme options in the WordPress Customizer (you can access it from the Appearance > Customize menu) or the Elementor page builder plugin.

Whether you import a starter site or not, you have access to the same customization options.

To import a starter site, go to Appearance > Starter Sites in your WordPress admin area. Here, you can preview each site by selecting the Preview Demo option. 

When you find a starter site that you like, import it by clicking the Import button:

The demo importer will show you a list of the additional plugins and content elements that will be installed on your site as part of the import process.

Although you can opt out of importing some of the plugins and content, I recommend adding everything.

Hit the Import button and the import process will start. Note that it will take a few minutes for the imports to complete.

4. Enable the Size Chart Module

The size chart feature is disabled by default. 

To enable it, go to Appearance > Theme Dashboard > Theme Features, scroll down to the Single Product Size Chart module, and click the Activate button.

5. Create a Size Chart

Once you enabled the Size Chart module, go to Products in your WordPress admin area.

Under the Products menu, you will see a new Size Chart submenu.

Select it, then click the Add New button:

Size charts are a custom post type added by Botiga Pro. You can create and edit them from the WordPress post editor interface.

First, add a title to the custom post that will hold your size chart(s). One post can include more than one size chart. For example, you can create a Clothes Size Chart post with two size charts: one for men and one for women.

Once you added the title, scroll down to the Botiga Size Chart Options panel, and click the Add Size Chart button.

A size chart with rows and columns will appear on your screen, along with an option for naming the size chart.

You can also add or remove rows and columns by clicking the + or – buttons:

You can duplicate the chart by using the copy icon or delete it by clicking the Remove button:

Here’s what my example size chart looks like:

You can also check out this video guide on how to create a size chart with Botiga Pro:

6. Display the Size Chart on All or Specific Product Pages

There are two ways to display a size chart in your WooCommerce store.

You can show it: 

1. on all of your product pages by using a global option
2. only on specific product pages by using the size chart option located on individual product pages 

I will show you how to carry out both. 

i. Display a Size Chart on All Product Pages

To display a size chart on all product pages, go to Appearance > Customize.

The Customizer will open, and the options will be located on the left side of the screen:

In the Customizer, scroll down to the WooCommerce section, and select the Single Product option:

On the next screen, select Size Chart. It will reveal two options: Global Size Chart and Title.  

The Global Size Chart setting includes all of your size charts as dropdown options. Select the one you want to add to your product pages and add a title to it.

Then, hit the Publish button on top of the screen to save your settings:

ii. Display a Size Chart on a Single Product Page

To display a size chart on a specific product page, go to Products > All Products, and open the product page where you want to add the size chart. 

On the product page, scroll down to the Botiga Product Options panel and select the Size Chart tab. 

Here, you’ll find a dropdown option that will include your size charts. Select the one you want to add to your product, then click the Update button at the top of the page to save the changes:

Now, open the product page to check what your size chart looks like in your store.

You’ll see the size chart option under the product description:

When you click that option, your size chart will pop up as a modal box: 

Summary

Adding a size chart to your WooCommerce site is a great way to boost not just the user experience but also the conversion rate of your store. 

With Botiga Pro, you only need to take the following steps: 

1. Install the Botiga theme
2. Install the Botiga Pro plugin
3. Import a starter site (optional)
4. Enable the Size Chart module 
5. Create a size chart 
6. Display the size chart on your product pages 

However, with Botiga and Botiga Pro, you can do a lot more than simply adding a size chart to your store.

For example, you can also add videos and audio to your product galleries, hover effects to your product images, quick view boxes to your shop and archive pages, and more. 

To get started with building a fully functional WooCommerce store, download the free Botiga theme or check out Botiga Pro.

I hope you found this tutorial helpful. If you have any questions about how to add a size chart to your WooCommerce store, let us know in the comment section below. 

Sufia Banu

Sufia Banu is a freelance content writer with a background in marketing and SEO. She specialize in writing about WordPress, plugins, themes, and WooCommerce. Through her writing, she helps WordPress businesses draw targeted traffic and generate higher sales.