Home Tutorials How to Add a Size Chart in WooCommerce in 2023

How to Add a Size Chart in WooCommerce in 2023

Searching for methods to add a measurement chart to your WooCommerce retailer?

Size charts on product pages supply prospects info that they will use to make higher shopping for choices.

As a end result, they assist enhance buyer engagement and scale back cart abandonment in your on-line retailer.

On this tutorial, I’ll present you the way to add a measurement chart to your WooCommerce product pages utilizing our Botiga theme.

1. Set up & Activate the Free Botiga Theme

Botiga is a free WooCommerce theme you may obtain from our web site.

After downloading the theme, you want to add it to your WordPress website.

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

Subsequent, add the theme utilizing the Select File choice. Then, hit the Set up Now button. As soon as the theme is put in in your website, click on Activate.

Botiga shall be activated in your website in a few seconds.

Installing the free Botiga theme on a WordPress site

2. Set up & Activate the Botiga Professional Plugin

Botiga Professional is a premium WordPress plugin that expands the functionalities of the free theme. It gives a ton of superior options corresponding to measurement charts, sticky add-to-cart buttons, audio and video galleries, mega menus, and extra.

When you made the acquisition, you may obtain the plugin out of your aThemes account to your native pc. 

To put in the plugin in your WordPress website, go to Plugins > Add New and click on the Add Plugin button.

Then, add the plugin through the use of the Select File choice and hitting the Set up Now and later the Activate buttons:

WordPress admin area, plugin installation page

When you activated Botiga Professional, you want to activate the plugin license. 

Open your aThemes account and replica the license key. Subsequent, navigate to Plugins > Botiga Professional License and enter your license key. 

3. Import a Starter Website (non-obligatory)

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

Botiga Professional gives eight starter websites, every concentrating on a totally different area of interest. You don’t have to use a starter website in case you don’t need to — nonetheless, it may be a helpful start line.

Alternatively, you may create your individual web site design from scratch, utilizing both the theme choices in the WordPress Customizer (you may entry it from the Look > Customise menu) or the Elementor web page builder plugin.

Whether or not you import a starter website or not, you have got entry to the identical customization choices.

To import a starter website, go to Look > Starter Websites in your WordPress admin space. Right here, you may preview every website by choosing the Preview Demo choice. 

If you discover a starter website that you simply like, import it by clicking the Import button:

Directory view of all Botiga starter sites

The demo importer will present you a listing of the extra plugins and content material components that shall be put in in your website as a part of the import course of.

Though you may choose out of importing a number of the plugins and content material, I like to recommend including the whole lot.

Hit the Import button and the import course of will begin. Observe that it’ll take a couple of minutes for the imports to full.

aThemes one-click demo importer tool

4. Allow the Size Chart Module

The scale chart characteristic is disabled by default. 

To allow it, go to Look > Theme Dashboard > Theme Options, scroll down to the Single Product Size Chart module, and click on the Activate button.

Botiga Pro's theme features admin page

5. Create a Size Chart

When you enabled the Size Chart module, go to Merchandise in your WordPress admin space.

Beneath the Merchandise menu, you will notice a new Size Chart submenu.

Choose it, then click on the Add New button:

'Size Chart' admin page added by Botiga Pro

Size charts are a customized put up kind added by Botiga Professional. You’ll be able to create and edit them from the WordPress put up editor interface.

First, add a title to the customized put up that may maintain your measurement chart(s). One put up can embrace multiple measurement chart. For instance, you may create a Garments Size Chart put up with two measurement charts: one for males and one for girls.

When you added the title, scroll down to the Botiga Size Chart Choices panel, and click on the Add Size Chart button.

A measurement chart with rows and columns will seem in your display, together with an choice for naming the dimensions chart.

You may as well add or take away rows and columns by clicking the + or buttons:

Botiga Size Chart Options under the WordPress post editor

You’ll be able to duplicate the chart through the use of the copy icon or delete it by clicking the Take away button:

Botiga size chart options, copy and remove functionalities

Right here’s what my instance measurement chart appears to be like like:

Example size chart completed

You may as well take a look at this video information on how to create a measurement chart with Botiga Professional:

6. Show the Size Chart on All or Particular Product Pages

There are two methods to show a measurement chart in your WooCommerce retailer.

You’ll be able to present it:

  1. on all your product pages through the use of a international choice
  2. solely on particular product pages through the use of the dimensions chart choice situated on particular person product pages

I’ll present you the way to perform each. 

i. Show a Size Chart on All Product Pages

To show a measurement chart on all product pages, go to Look > Customise.

The Customizer will open, and the choices shall be situated on the left facet of the display:

WordPress Customizer, Botiga Pro options, default view

Within the Customizer, scroll down to the WooCommerce part, and choose the Single Product choice:

WooCommerce options in the Customizer

On the subsequent display, choose Size Chart. It can reveal two choices: International Size Chart and Title.

The International Size Chart setting contains all your measurement charts as dropdown choices. Choose the one you need to add to your product pages and add a title to it.

Then, hit the Publish button on high of the display to save your settings:

Global size chart options in Botiga Pro

ii. Show a Size Chart on a Single Product Web page

To show a measurement chart on a particular product web page, go to Merchandise > All Merchandise, and open the product web page the place you need to add the dimensions chart. 

On the product web page, scroll down to the Botiga Product Choices panel and choose the Size Chart tab. 

Right here, you’ll discover a dropdown choice that may embrace your measurement charts. Choose the one you need to add to your product, then click on the Replace button on the high of the web page to save the adjustments:

Size Chart dropdown option on a single product page

Now, open the product web page to test what your measurement chart appears to be like like in your retailer.

You’ll see the dimensions chart choice underneath the product description:

Size chart option on a product page

If you click on that choice, your measurement chart will pop up as a modal field: 

Size chart modal box


Including a measurement chart to your WooCommerce website is a wonderful means to enhance not simply the person expertise but additionally the conversion price of your retailer. 

With Botiga Professional, you solely want to take the next steps: 

  1. Set up the Botiga theme
  2. Set up the Botiga Professional plugin
  3. Import a starter website (non-obligatory)
  4. Allow the Size Chart module 
  5. Create a measurement chart 
  6. Show the dimensions chart in your product pages 

Nevertheless, with Botiga and Botiga Professional, you are able to do a lot greater than merely including a measurement chart to your retailer.

For instance, you can too add movies and audio to your product galleries, hover results to your product pictures, fast view packing containers to your store and archive pages, and extra. 

To get began with constructing a absolutely useful WooCommerce retailer, obtain the free Botiga theme or take a look at Botiga Professional.

I hope you discovered this tutorial useful. In case you have any questions on how to add a measurement chart to your WooCommerce retailer, tell us in the remark part under.