The Size Chart module allows you to add a size chart to your WooCommerce product pages.
Size charts help customers choose the right size for products such as clothes, shoes, jewelry, bags, and more. By adding a size chart to your eCommerce store, you can build trust, make your brand more appealing to customers, and reduce your return rate.
With Merchant Pro’s Size Chart module, you can either show the same size chart for all the products in your store or create more than one size chart and add it to your products individually.
In the screenshot below, you can see what a size chart added by Merchant Pro looks like on the frontend of a WooCommerce store:
When the customer clicks the Size Chart link, a stylish popup appears on the screen.
In the screenshot below, you can see an example of a size chart popup:
Now let’s see how to set up and activate Merchant Pro’s Size Chart module.
1. Create a Size Chart
First, you need to create a size chart. Merchant Pro comes with two default size charts that you can either tweak or use as examples to set up your own size chart.
To find the size charts, click the Products > Size Chart menu:
In the Size Chart editor, find the Merchant Options section, and add/edit the rows and columns of the size chart table.
Note that you can add more than one size chart table by clicking the Add Size Chart button (for example, you can create a separate table for men, women, and children — these would appear in three tabs in the size chart):
2. Open the Size Chart Module
Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
Find the Improve Experience section, then click the Size Chart module to open its settings page:
3. Configure the Size Chart Settings
On the module’s admin page, find the Settings section and configure the following settings:
- Global size chart (optional) – Here, you can choose whether you want to enable a size chart globally. If you want to use more than one size chart for different products, leave it as Default. If you want to show the same size chart on all of your product pages, select it from the dropdown menu (which will display all the size charts from the Products > Size Chart menu).
- Label text – This is the clickable label of the size chart that Merchant Pro shows next to the size chart icon.
- Icon – Here, you can choose from six stylish size chart icons.
- Icon size – Here, you can change the size of the size chart icon.
- Title text color – This is the color of the size chart label.
- Title text color hover – This is the color of the size chart label when the user moves the cursor over it.
- Icon color –This is the color of the size chart icon.
- Icon color hover – This is the color of the size chart icon when the user moves the cursor over it.
Once the settings are configured, click the Save button in the top-right corner of the page.
4. Customize the Popup Design
Merchant Pro also allows you to customize the design of the size chart popup.
You can find the Popup Design section under the Settings section on the module’s admin page.
Using these options, you can change the popup’s width and the colors of each element of the popup, including the close icon, headings, tabs, table elements, and more:
Once the settings are configured, click the Save button in the top-right corner of the page again.
5. Enable the Size Chart Module
To activate the module, click the Enable button at the top of the module’s page:
6. Add a Size Chart to Individual Products (optional)
If you haven’t defined a global size chart, you can assign a size chart to your products from the WooCommerce product pages.
Open a product’s admin interface by clicking the Edit link in the Products > All Products menu, scroll down to the Merchant Product Options section, open the Size Chart tab, select a size chart, then scroll back to the top of the page, and click the Update button:
