WooCommerce Product Size Chart

The WooCommerce Product Size Chart add-on is a powerful tool that is designed to help store owners display product sizing information in a clear and visually appealing way. It doesn’t matter if you’re selling clothing, shoes, or any other item where sizing matters.

This add-on will make sure that your customers get the correct fit before they buy. This will help reduce returns and boost confidence in your products. Not only this, with flexible display options, mobile responsiveness, and full customization, this add-on gives you complete control over how size charts are shown on your store. It could be either in tabs or popups, and even personalized per product or category.

Video Tutorial

Watch the tutorial video below for a quick walkthrough of the add-on’s features and setup process.

For detailed instructions, please continue reading the full documentation. If you still have any questions, feel free to submit a support ticket.

Installation

• Install the WooCommerce plugin first & then activate it.
• Then, install the WooCommerce Product Size Chart add-on & activate it.
• After activation, a new menu “Product Size Chart” will appear in your dashboard.

License

You can find your license key in the email you received when you bought the add-on. To activate your license, just place your license key in the License Key field and click on Activate.

Add New Size Charts

To add a new Size Chart, navigate to the “Product Size Chart” menu, and click on the “Size Charts” submenu. After that, click the “Add New Size Chart” button.

Add unlimited size charts with just a few clicks. Each of the charts includes:

1. Title
2. Enable the size chart
3. Button Title (Default text: Size Chart)
4. Chart Image Position
5. Size Chart Content
6. Size Chart Unit
7. Size Chart Table
8. Size chart in other units (Optional)
9. Other Unit (Optional)
10. Other Unit Size Chart Table (Optional)
11. Products & Categories
12. Size Chart Image

Note: You can publish and update charts anytime.

Finally, click on the publish/Update button.

This is how the product page will look on the front end.

All Size Charts

Navigate to the “Product Size Chart” menu and then click on its “Size Charts” sub-menu. Here you will see all the “Size Charts” you have added.

From the “Bulk Actions” you can also export any size charts in JSON format.

Settings

General Settings

Here you can change the general settings of the addon.

Enable Size Charts
You can enable this option to display size charts globally on a single product page.

Note: Product size charts (tabs/popup buttons) will only show on the product pages when both options are enabled (“Enable Size Charts” and “Enable size chart” option in “Size Charts”).

Delete chart images on uninstall
When the plugin is turned off, you can choose to automatically remove all chart images that were uploaded using it from your WordPress media library.

Default Chart Position
You can choose how the size chart will be shown on the product pages (as a separate tab or in a pop-up modal).

Display Size Chart Button
You can choose where the size chart button shows up on the product page (either before or after the Add to Cart button).

Full Screen Popup
Turn on this option if you want the size chart pop-up to open in full-screen on the product page.

Popup Position
You can choose the position on the screen where the pop-up size chart should appear (Center, Left, or Right).

Popup Animation
You can choose which direction the pop-up slides in from when it opens (up, down, left, or right).

Customization

Here you can change the customization-related settings of the tab(s)/popup modals.

Button Customization

Button Text Color
You can select the color for the size chart button text that is displayed on the product page.

Button Background Color
You can choose the background color for the size chart button displayed on the product page.

Modal Customization

Modal Header Color
You can set the text color for the header of the size chart pop-up.

Modal Background Color
You can choose the background color for the size chart pop-up.

Header Title
You can set the title text that appears in the header of the size chart popup.

If you leave this field empty, the top header section won’t appear.

Modal Width (%)
You can set how wide the pop-up should be by entering a percentage (like 60 for 60%).
For example, if you set it to 30% and choose “Popup Position: Right,” the popup will appear on the right side and take up 30% of the page width.

This is how the page will look with a 60% modal width with “Popup Position: Right”.

Size Chart Table Customization

Table Outer Border Color
You can set the outer border color of the size chart table.

Text Size
You can choose how big the text should be in the size chart table and the unit conversion buttons.

Inside Table Border Color
You can pick the color for the inner borders of the size chart table.

Header Background Color
You can set the background color of the size chart table header row.

Header Text Color
You can set the text color for the header row of the size chart table.

Even Rows Background Color
You can choose the background color for even-numbered rows in the size chart table.

Even Rows Text Color
You can set the text color for even-numbered rows in the size chart table.

Odd Rows Background Color
You can set the background color for odd-numbered rows in the size chart table.

Odd Rows Text Color
You can set the text color for odd-numbered rows in the size chart table.

First Size Table Button Background Color
You can choose the background color for the first unit toggle button (e.g., cm or in) displayed before the size chart table.

First Size Table Button Text Color
You can choose the text color for the first unit toggle button (like cm or in) that is shown above the size chart table.

Second Size Button Background Color
You can choose the background color for the second unit toggle button (e.g., in or cm) that is shown before the size chart table.

Second Size Button Text Color
You can choose the text color for the second unit toggle button (e.g., in or cm) that is shown before the size chart table.

Import Size Charts

Here you can import the size chart(s) in JSON format.

Note: If you import size charts with the same title again, a new size chart will be created each time. It won’t update the old one.

FAQ’s

1- In which format can the product size chart information be imported/exported?

Currently, the product size charts can only be imported/exported in JSON format.

2-Is there any product size chart related information that is not exported/imported?

Right now there are two fields that aren’t included when exporting or importing: “Select Products” and “Select Categories.”

3- Can we show multiple product size charts on a product page?

You can show multiple product size chart(s) on a product page.

4- Does this Add-On require any external plugin on your site to work properly?

This add-on needs the WooCommerce plugin to be turned on for your site.

Changelog’s

1.0.1

• Fix: Fixed multi-language compatibility.

1.0.0

• Initial Release.