Product Size Chart for WooCommerce

Created: 01/2021
Updated: 9/2021 – Updated version: 1.0.6

By: VillaTheme

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!


– Plugin works based on WooCommerce 4.x plugin.
– It is released on and you can use plugin as free to build themes for sale.



Go to Plugin/Add New/Upload Plugin/Choose file/ select plugin zip file product-size-chart-for-woo/click “Install Now“/click “Active plugin.

Done! Let’s start using the plugin.


Guiding video on how to install and use Product Size Chart for Woo:

Product size Chart for WooCommerce helps you to customize and design the size chart of specific products or categories, you can choose the available templates of size chart. The plugin will create the conveniences for customers when shopping in your WooCommerce Store and boost your sales.



Build and customize unlimited size charts for products.

You can create variety of size chart templates for all products on your site, the size chart displayed on product pages will provide customers with actual choice, come from their need.

Available size chart templates to choose and customize.

The plugin is available with some size chart samples for common clothes for men and women, such as T-Shirt, Dress, Shoes… So you can edit, customize your own in the templates or duplicate templates to save time to create a new size chart.

Assign a size chart for single or multi specific products and categories.

Created size charts can be assigned for products or categories that size chart apply for directly and quickly. This can be done directly on size chart template. This helps shop owners save time to assign a size chart for their products and categories when they have so many products and categories on WooCommerce store.

Flexible and effective size chart displays. 

You can choose variously how size charts appear on front end. It can be:

  • Popup
  • Size chart tab
  • Before add to cart
  • size chart shortcodes that allows to show size chart every where you want

Create and customize size charts with unlimited rows and columns.

You can build size tables easily and quickly with a couple of clicks, the interface is completely friendly and easy to manipulate.

  • Create unlimited row and a column for the Size chart table
  • Quickly add multiple or remove rows and columns at the same time
  • Add/Edit multiple rows and columns on the size table as per your requirements

Design size chart unlimited.

You can design size charts with parameters such as the rows color, text color, border color, border style,… In particular:

  • Table color: Head Background, Text Head, Even Rows Background, Even Rows Text,  Odd Rows Background, Odd Rows Text
  • Border: Horizontal Width, Vertical Width, Border Color, Horizontal Border Style, Vertical Border Style.

Import size chart from CSV file.

You can import size chart from CSV file, that help you save time to migrate your available size chart outsources to products in WooCommerce.

Enter size chart description.

You can enter formatted text and media into the description of your size charts. That will give size chart with sufficient information or note for size chart of each product.

Hide or show the table or content of a size chart.

You can completely choose to public or hide size chart partially. It can be: None, Table, Image, Hide all.

Preview to see how size chart displays before be public.

You can visually observe size charts by the preview, update any changes in the preview mode.

Custom CSS

You can add custom CSS  to make your own design for size chart in the custom CSS field of the plugin setting.


And much more things are waiting for you discover


Build new size charts

You can create and design your own new size charts simple and easily.

Step 1: Go to Size Chart > Add New

Step 2: Create a new size chart.

Step 3: Add size chart information and assign products or categories.

1. Size chart name: The name of size chart in size chart list in back end.

2. Size chart description: Add contents for size chart to clarify size chart.

3. Design: create and design a size chart containing number of rows and columns:

a. Template: Select color for size chart: Blue; Red, Teal; Orange; Oliver; Green; Purple; Pink.

b. Hide on size chart: Select a part of size chart you want to hide: None; Table; Image; Hide all.

c. Rows: Bulk add/remove a number of rows from the end row.

d. Columns: Bulk add/remove a number of columns from the end column in the right.

Add single rows and columns

Subtract single rows and columns

Enter text …Type text to each cells of table.


4. Import CSV: Size chart in CSV file will replace the current table.

5. Reset: Press to reset the current size chart.

6. Table color: Configure color for size chart including: Header background; Text header; Even row background; Even row text; Odd row background; Odd row text.

7. Border: Configure color for size chart including: Horizontal width, Vertical width, Border color, Horizontal border style, Vertical border style.

8. Preview: Observe size chart before updating.

9. Select image: Add image to show in size chart, you can adjust image width in percentage.

10. Assign: Assign the current size chart for products or categories.

Customize available size charts

Product Size Chart for Woo is available with some size chart templates that you can customize and design in your own.

Step 1: Go to Size Chart > All Size charts

Step 2: Choose any size charts available.

Step 3: Click on edit button.

Step 4: Customize size chart.

General settings

1. Enable: To activate size chart for product.

2. Size chart type: There will be 4 size chart types that you can select to display size chart for product.

Product tab: Size chart will display as a product tab.

  • Multi size chart: Enable to show all size charts for a category or product.


Popup: Size chart will display as popup

  • Horizontal: Popup button position in horizontal, maybe in the right or left.
  • Vertical: Popup button position in vertical, value from 1 to 95 percent
  • Button type: Text or icon type.
  • Button color: Select color for button
  • Text color: Select color for text.


Size chart shortcode: Copy shortcode to display size chart anywhere.


3. Custom CSS: You can custom CSS yourself here.



After you install and activate Product Size Chart for Woo on your website, you can completely create size charts for products.

  • You can add, edit, and design available product size chart templates.
  • You can create your new size charts that fit your products.

1. Go to Size Chart > All Size Chart > scroll down to edit available size chat templates or add a new template.

1. Add new size charts. You can see how to create  a size chart here.

2. Customize available size charts. You can see how to edit a size chart here.


2. Create size chart for product:


3. Choose how size chart display on product page or any pages using size chart shortcode

3.1. Size chart tab:


3.2. Size chart popup:

3.3. Size chart before add to cart:


3.4. Size chart shortcode: Show size chart every where you want








Thank you for your attention!

If you have any questions, please create a topic at our FORUM, we will support within 24 hours.