How to Add Custom Size Charts in WooCommerce?

Custom Size Charts for WooCommerce allows you to provide clear, customizable size guides for your products, helping customers find the right fit and improving their shopping experience

1. Download the .zip file for Custom Size Charts for WooCommerce.
2. Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded with Choose File
3. Now, Install and Activate the extension.

More information at: Install and Activate Plugins/Extensions

To access the Product Size Chart for WooCommerce plugin, go to Products and click on Size Charts

To add a new size chart, go to Products > Size Charts > and then click on Add Size Chart

Here, you will find the following configuration.

1. Enable Size Chart: Check to Enable/Disable Size Chart
2. Priority: Set the size chart priority
3. Button Title: Enter title for button to display
4. Icon: Select icon to display on front-end (the size chart will be display on a popup when customer click on the icon)
5. Featured Image Position: Choose image position on the size chart (please upload the Featured Image in the right side)
6. Size Chart Content: Write content that will be displayed on the top of size charts (leave it empty if you don’t want to display content)
7.  Size Chart: Enter button title of size chart (this will be displayed as a tab if you add another size unit, for example Inches).
8. Add or delete Rows
9. Add or delete Columns
10. Size Chart in Other Unit: Enable this if you want to display sizes in other unit as well.
11. Enter the title of other unit that will be displayed as a tab in popup and customers will switch to (for example Centimeters). Just like the above unit, you can add more rows and columns in this unit as well.

Want to show sizes in inches and centimeters? Turn this on! And if you’re selling internationally, rename your size charts to ‘US’, ‘France’, etc., instead of inches and centimeters, for easy country-specific sizing.

Now Scroll down and you will find the following settings:

1. Display size chart to Specific Customers.
2. Display size chart to Specific Customers Roles (for example, wholesaler & not logged-in users).
3. Display size chart to Specific Countries. e.g United States & France.
4. Choose Specific Products to display size chart on.
5. Choose Specific Categories to display size chart on.
6. Choose Specific Product Tags to display size chart on.

To access General Settings, Navigate to WooCommerce > Settings > and then click on Size Chart and then General.

Here, you will find the following settings

1. Display Size Chart as:
   • Tab: This will create a separate tab for size chart
   • Button: Size chart will be displayed in customized popup when customer click on button.
2. Display Size Chart Button: Choose the position of size chart button.
3. Popup Position: Choose size chart popup position.
4. Popup Animation: Choose the size chart popup animation.

To customize the size chart popup,  navigate to WooCommerce > Settings > Size Chart > and then Click on Customization.

Here, you will find the following settings.

1. Size chart button text color: Customize the text color of your size chart button.
2. Size chart button background color: Set the background color of your size chart button.
3. Content background color: Control the background color of the size chart content area.
4. Table text color: Choose the color of the text within the size chart table.
5. Table text size: Adjust the font size of the text in the size chart table.
6. Table border color: Set the color of the borders around the size chart table.
7. Header background color: Customize the background color of the size chart table header.
8. Header text color: Choose the text color for the size chart table header.
9. Header text size: Adjust the font size of the text in the size chart table header.
10. Even rows background color: Set the background color for even rows in the table.
11. Even rows text color: Choose the text color for even rows in the table.
12. Odd rows background color: Set the background color for odd rows in the table.
13. Odd rows text color: Choose the text color for odd rows in the table.
14. First size table button background color: Customize the background color of the first unit button.
15. First size table button text color: Customize the text color of the first unit button.
16. Second size table button background color: Customize the background color of the second unit button.
17. Second size table button text color: Customize the text color of the second unit button.
18. Custom CSS: Add custom CSS to further style your size chart.