Back to Top

WooCommerce Size Chart

Updated 25 January 2024

WooCommerce Size Chart allows the admin to easily create Size Chart for their products. The admin can create a customizable size chart and then assign the created size chart to the products.

Using WooCommerce Size Chart, the admin lets their customers find out the right product size chart for them. In an online e-commerce store, the customers can identify their fit according to the size chart available on the website and then purchase the product without thinking about any size issue.

So, this extension will definitely help the customers to identify their fit and then they can process further to purchase the product according to the size chart.

It will allow the admin to easily create Size Chart for their products. Furthermore, the admin can create a customizable size chart and then assign the created size chart to the products.


Searching for an experienced
WordPress Company ?
Find out More

This module is now compatible with WooCommerce’s new High-Performance Order Storage (HPOS) feature.

Watch the below video tutorial to understand the extension workflow:

Features –

  • The admin can add size chart templates.
  • The admin can add a size chart description text with images.
  • The size chart Widget can also be enabled by the admin.
  • Global Setting can be used for a Size Chart.
  • Customers will see the size chart on the product page and shop page.
  • This module increases the customer satisfaction.
  • The admin can use multiple-size charts for a single product.

Installation –

The user will get a zip file which he has to upload in the “Add New” menu option in the WordPress admin panel.

For this, login to WordPress Admin Panel and then Under the Dashboard, hover your mouse over the “Plugins” menu option which brings out a Sub-Menu and then select the “Add New” option.

installation -1

After this, you will see an option on the top of your page that is “Upload Plugin”, Now clicks the option to upload the zip file.

upload plugin

By clicking on the “Upload Plugin” option, below that you will see a button “Choose File” click on the button to browse for the zip file as per the snapshot below.

choose file

After browsing the file, click the “Install Now” button to install the plugin as per the snapshot.

install plugin

Now when the plugin is installed correctly, then you will see the success message and an option to activate the plugin. Henceforth now, click on “Activate Plugin” to activate the installed plugin.

activate plugin

Module Translation

To know how to translate the module, you can click here.

Admin – Initial Configuration Settings

The admin can manage the module from the admin panel easily.

Moreover, after the successful installation of the module, the admin for the initial configuration can navigate through Webkul WC Addons->Product Size Charts.


Global Settings:

Here, the admin will be able to –

  • Enable the size chart option of the products.
  • Set the size chart data label as required.
  • Enable the required option to show the size chart on the product page.
  • Choose the size chart view on the product page as – Popup or Additional Tab or both.
  • Set the button position of the Sze chart as – Before Add to Cart or After Add to Cart button.
  • Set the size chart button label as required.
  • Choose the size chart button color.
  • Set the size chart button text color.
  • Enter the button border-radius.
  • Choose the size chart table border color.
  • Set the size chart table border width.
  • Enter the size table border width to keep.
  • Choose the size chart table header color.
  • Set the size chart table header text color.
  • Choose the size chart table text color.
  • Set the size chart table background color.

Lastly, save the initial configuration settings.

Add New Size Chart

From the configuration section, the admin can easily add a size chart as required.

The admin can add a new size chart by clicking on the Add New Size Charts button.

This navigates the admin to the add new size charts->Add New section as shown below.


Here, the admin can enter –

  • Title of the size chart
  • Description of the size chart along with the image.

After that, under the Size Chart Table the admin will –

  • Enter the size chart table label as required.
  • Then add the size chart details – Columns and Rows by tapping the “+” button.

Size Chart Configuration

The admin can now configure the size chart if the Enable Global Settings is disabled.

Here, the admin can mark the checkbox button to use the preset global size chart setting or configure the size chart manually.

Add Products – The admin can select the products for which the admin wants to assign the size chart.

Size Chart Data Label – Here, the admin can enter the label for the description data.

Show size chart on shop page – Select Yes to display size chart on shop page.

Size Chart View – Select the size chart view as a popup, additional tab, or both.

Button Position – Set the position of the size chart button as Before add to cart, or after add to cart.

Size chart button label – The admin can enter the label name of the size chart button.


Color of Button – The button color of the size chart can be set by the admin.

Text Color Of The Button – Set the button text color here.

Button Border Radius – The admin can select the border width within the range 0-5

Size Chart Table Border Color – Select the border color of the size chart table.

Table Border Width – Set the table border width within the range of 0-5

Size Chart Table Header Color – Select the header color of the size chart table.

Table Header Text Color – The admin can select the text color of the size chart header table.

Size Chart Table Text Color – Set the size chart table text color here.

Size Chart Table Background Color – Here, the admin can select the background color of the size chart table.

Lastly, publish the size chart by tapping the Publish button.


View and Edit Existing Size Chart –

From the admin panel, the admin can view and edit the created size charts. The admin can also delete the created size charts as required. Navigate through Product Size Charts->All Size Charts.


Now, the admin can click on the size chart that the admin wants to edit and then edit the size chart accordingly.

Manage Widget

The admin can add the widget from the admin panel. To add a Size Chart Widget, the admin can navigate to widget from the admin panel under the Appearance menu and then manage the size chart widget.

Here, the admin can select the widget for a single product size chart or display the list of the size chart. The admin can also set the position of the widget as the sidebar, below the header, and the footer column.


Now, the admin can set the title for the widget, and also select the size chart from the available size chart list.

Storefront View – Size Chart

The size chart will be displayed on the shop page and the product page as configured by the admin.


Now, the customer can click on the Size Chart button to view the size chart as shown in the image below-


The customer can also click on another tab near to the size chart tab to view other details as shown in the image below.


If enabled, the widget of the size chart will also be displayed to the customers as shown in the image below.

That was all about the WooCommerce Size Chart. Moreover, if you have any doubts or queries regarding the extension get back to us at [email protected] or create a ticket at our HelpDesk system.

Current Product Version - 1.0.2

Supported Framework Version - Wordpress - 6.4.2 WooCommerce - 8.5.1

. . .

Leave a Comment

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

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content