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:
- create one size chart and then show it for all products in your store
- create more than one size chart and then assign different size charts to your products and/or product categories
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 a 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:
Priority Order of Size Charts
With Merchant Pro, you can assign size charts to your products at four different levels.
First, you need to create the size charts (see Step 1 below), then you can assign them to your products.
To keep the module flexible, Merchant Pro lets you assign size charts to individual products, product categories, or globally (you can assign the global size chart to either all products or just specified categories).
If more than one size chart assignment applies to a product, here’s the priority order of the size charts (the size chart that you set on the individual product page has the highest priority while the global size chart has the lowest priority):
| Priority | Type of assignment | Where to assign | See below |
|---|---|---|---|
| 1 (highest) | Individual product | Products > All Products > Edit > Merchant Product Options > Size Chart | Step 6 |
| 2 | Product category | Products > Categories > Edit > Size Chart | Step 7 |
| 3 | Global category | Merchant > Size Chart > Settings > Categories | Step 3* |
| 4 (lowest) | Global | Merchant > Size Chart > Settings > Global size chart | Step 3** |
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. To do so, open the Size Chart editor by going to Products > Size Chart > Add New Post in your WordPress admin area:
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) – This is where you can define the global size chart**. If you don’t want to create a global size chart, leave it as Default. The dropdown will display all the size charts from the Products > Size Chart menu.
- Categories – This is where you can assign the global size chart to product categories*. The dropdown will display all the product categories from the Products > Categories menu. You can select more than one product category. If you leave it empty then the global size chart will be shown for all products, except the ones that you configure on the individual product (Step 6) and individual product category (Step 7) pages.
- 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
You can assign a size chart to each of your individual 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:
7. Add a Size Chart to Product Categories
You can also assign a size chart other than the global one to your individual product categories.
Go to Products > Categories, click the Edit link under the product category you want to assign the size chart to, scroll down to the Size Chart option, select the size chart you want to add, and then click the Update button at the bottom of the page:
