WooCommerce Product Size Chart

Support Purchase

WHAT CAN THE WOOCOMMERCE PRODUCT SIZE CHART BE USEFUL FOR?

WooCommerce Product Size Chart is a powerful tool that allows you to fully customize and design size charts for your products. You can select from a range of pre-designed templates or create your own, ensuring a seamless fit for your store’s style. WooCommerce Product Size Chart enhances the shopping experience by providing clear and easily accessible size guides, making it simple for customers to find the right fit. By reducing size-related confusion, you can improve customer satisfaction and, in turn, boost sales in your WooCommerce store.

 

WOOCOMMECE PRODUCT SIZE CHART CORE FEATURES

1. Create size chart templates: You can create a variety of size chart templates for all products on your site with WooCommerce Product Size Chart, ensuring that each product page displays a size chart tailored to the specific needs and preferences of your customers.

2. Rule-Based Size Chart Assignment: Assign size charts dynamically based on a variety of conditions, ensuring the right chart displays for the right customer.

• Assign size charts based on countries: Assign the size chart based on the customer’s location. This is useful when product sizing varies by region or country (e.g., US vs. EU sizes).
• Specify size charts for:
  • All products: Apply the size chart to all products in your store. This is ideal if you have a universal size guide that applies to all your items.
  • Specific products: Select specific products to assign the size chart to. This is useful if only certain products require a specific size chart.
  • Combine: Use combined rules to assign the size chart based on multiple conditions, such as a specific product category, particular product tags and product types… This allows for more granular control over where the size chart appears. Click on the Add condition button to add more combinations.
  • Product Type: Assign the size chart based on the product type, such as “Simple Product,” “Variable Product”. This helps if sizing varies depending on product complexity.
  • Product Visibility: You can create and display a size chart based on the product visibility condition using rules that align with how products are categorized and displayed on your website.
  • Product Categories: Apply the size chart to all products within a specific category (e.g., Shoes, Clothing, Accessories). This is helpful for organizing size charts by product type.
  • Product Tags: Assign the size chart to products that have been tagged with specific labels (e.g., “summer collection,” “new arrival”).
  • Product Shipping class: This can be useful if you have different size charts for items that ship differently, such as small vs. oversized products…

3. Size Chart Design Options: Customize your size charts with an array of design tools and templates:

• Create rows and add various components to organize information clearly such as:
  • Tabs: Organize information into tabs, useful if you have multiple sizing categories (e.g., Men’s, Women’s, Kids).
  • Accordions: This is great for collapsible sections, allowing users to expand and view detailed sizing info as needed.
  • Tables: Create a table to clearly list sizes, measurements, and any relevant data.
  • Text: Include text blocks to provide explanations, instructions, or extra sizing tips.
  • Image: Add visuals like product illustrations, size guides, or charts to help users understand measurements better.
  • Dividers: Use dividers to separate different components for a cleaner layout visually.
• Design your own size charts with full control over layout and styling.
• Export & Import size charts via CSV, making bulk creation and updates easy.
• Add your own “Custom CSS” for further styling and brand alignment.

4. Customize Size Chart Templates on Product Page: You can easily customize the size chart templates that are applied to a specific product, giving you full control over how the sizing chart is presented on each individual product page.

5. Flexible Display Options: Choose from multiple display formats to best suit your product page layout. Show size charts at a certain position:

• Before add to cart: This option places the size chart before the “Add to Cart” button.
• Before add to cart after variations: This option places the size chart after any product variation options (e.g., color, size, style), but still before the “Add to Cart” button.
• After add to cart: The size chart will appear right below the “Add to Cart” button on the product page.
• Popup: When customers click a link (e.g., “View Size Chart”), the size chart will appear in a popup window.
• Product tab: The size chart will be displayed in its own tab (e.g., “Size Guide”) alongside other tabs like “Description” and “Reviews.
• Top description: The size chart will be displayed at the top of the product description area.
• Bottom description: The size chart will appear at the bottom of the product description.
• After title: The size chart will be placed directly below the product title.
• After the meta: This option places the size chart immediately after the product meta information (such as SKU, categories, and tags). It keeps the size chart near relevant product details.
• None: The size chart will not be displayed on the product page.

6. Interactive Icons for Size Chart Buttons: Customize the button that triggers your size chart with interactive icons, enhancing user engagement.

7. Support for Multiple Size Charts: Manage and display multiple size charts, offering tailored sizing for various product lines.

8. Size Chart Shortcodes: Use shortcodes to easily embed size charts into any section of your website, providing flexibility in how and where you present size charts.

9. Template Selection on Product Editing Page: Select and assign size chart templates directly from the product editing page, simplifying the process of managing size charts across a wide range of products.

And many more things are waiting for you to discover with the WooCommerce Product Size Chart!

SYSTEM REQUIRES

Make sure that those limits to a minimum as follows in order for free-trouble while installing:

• WordPress 5.0+
• PHP 7.0+
• WooCommerce 7.0+

 

DOWNLOAD PLUGIN

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

Done! Let’s start using the plugin.

 

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

Setup Wizard

The Setup Wizard for the size chart is designed to streamline the configuration process, making it user-friendly and efficient. It consists of two main steps:

1. Size Chart Position: In this step, you can choose the placement of the size chart on your product pages. Options may include displaying: Before Add to Cart; Before Add to Cart after Variations; After Add to Cart; Popup; Product Tab; Top Description; Bottom Description; After Title; After the Meta; None.
   • 
2. Size Chart template: Select a template for your size chart that best suits your design preferences and needs.
   • 

By following these steps in the Setup Wizard, you can easily customize your size chart to enhance the shopping experience on your site.

Create New Size Charts

1.1. Create a new Size Chart

Go to the Dashboard > Size Chart > Add New to create a new size chart.

1. Add new a new size chart: To create a new size chart
2. Customize available size charts: If you want to modify an existing size chart, simply select the one you want to customize from the list of available size charts.

 

1.2. Assign the Size chart with rules

1. Add the name of the size chart: This will help you easily identify the size chart

2. Assign rules for the size chart: Set up specific rules for where the size chart should appear. You can assign it based on the below depending on how you want the size chart to be applied:

• • – Country: Assign the size chart based on the customer’s location. This is useful when product sizing varies by region or country (e.g., US vs. EU sizes).
• 
  • – All Products: Apply the size chart to all products in your store. This is ideal if you have a universal size guide that applies to all your items.

• • – Products: Select specific products to assign the size chart to. This is useful if only certain products require a specific size chart.
• 
  • – Combined: Use combined rules to assign the size chart based on multiple conditions, such as a specific product category, particular product tags and product types… This allows for more granular control over where the size chart appears. Click on the Add condition button to add more combinations.

• • – Product Type: Assign the size chart based on the product type, such as “Simple Product”, “Grouped product”, “External/Affiliate product”, “Variable Product”,  or “Custom product type”. This helps if sizing varies depending on product complexity.

 

• • – Product Visibility: You can create and display a size chart based on the product visibility condition using rules that align with how products are categorized and displayed on your website. Size Chart Based on Product Visibility Conditions:

Summary of Product Visibility term impacts:

• • • exclude-from-catalog: Applies to products that are hidden from the product catalog
    • exclude-from-search: Applies to products that are hidden from search results
    • featured: Applies to featured products
    • outofstock: Applies to products marked as “Out of Stock”
    • rated-1 to rated-5: Applies to products based on their star ratings

• • – Product Categories: Apply the size chart to all products within a specific category (e.g., Shoes, Clothing, Accessories). This is helpful for organizing size charts by product type.

• • – Product Tags: Assign the size chart to products that have been tagged with specific labels (e.g., “summer collection,” “new arrival”).

 

 

• • – Product Shipping class: Use the product’s shipping class to assign the size chart that are set in WooCommerce Settings > Shipping > Class, and assigned to certain products.

This can be useful if you have different size charts for items that ship differently, such as small vs. oversized products…

3. Update: After adding the name and assigning the rules, click the “Update” button to save your changes.

4. Go to design: Once you’ve updated the size chart, a link to the design section will be created. This link allows you to customize the visual layout and design elements of the size chart. Simply click on the link to proceed with designing the chart according to your preferences.

Design Size Charts

Once you click on “Go to design,” you will be redirected to the customizer, where you can personalize the appearance and layout of your size chart.

1. Select Size Chart: Design the currently selected size chart or choose a specific size chart you want to design or edit from the list of available charts.
2. Layout: Choose the layout structure for your size chart. You can select from various predefined layouts that fit your design needs.
3. Add component(s) to the layout structure: You can click on the plus button add different components to your size chart for flexibility and customization. The available components include:
   • Tab: Organize information into tabs, useful if you have multiple sizing categories (e.g., Men’s, Women’s, Kids).
   • Accordion: This is great for collapsible sections, allowing users to expand and view detailed sizing info as needed.
   • Image: Add visuals like product illustrations, size guides, or charts to help users understand measurements better.
   • Table: Create a table to clearly list sizes, measurements, and any relevant data.
   • Text: Include text blocks to provide explanations, instructions, or extra sizing tips.
   • Divider: Use dividers to separate different components for a cleaner layout visually.
4. Edit component: After adding components, you can click the Edit button to edit each one to customize it to your needs. Adjust the content, font style, colors, and alignment to ensure the design matches your style and is easy to read.For more setting details, go to the How Does It Work > Size chart components section.
5. Publish: Once you’ve completed your size chart design and made sure everything is in place, click “Publish” to make the size chart live.

 

Customize Size Chart Templates on Product Page

You can easily customize the size chart templates that are applied to a specific product. Follow these steps to access and modify the size chart for a product:

1. On the Product Page > Customize: This will open the customization for that product.
   • 
2. Access WooCommerce Size Chart Design: In the customization options, look for the section labeled WooCommerce Size Chart Design. This is where you can modify the size chart templates for this specific product.
   • 
3. Select Size Chart: The Select Size Chart dropdown will display all the size chart templates that are applicable to this product. You can choose the size chart template that best fits the product’s needs or modify the existing one to ensure it provides accurate and relevant sizing information for your customers.

Choose Where Size Chart Displays on Product Page

When choosing where the size chart displays on the product page, you have several options to control its visibility and placement for the best user experience:

Go to your Dashboard > Size Chart > Settings > General, in the Size chart type, select available options to display the size chart on the product page:

For more setting details, go to the How Does It Work > Size chart type settings section.

• Before add to cart: This option places the size chart before the “Add to Cart” button.
• Before add to cart after variations: This option places the size chart after any product variation options (e.g., color, size, style), but still before the “Add to Cart” button.
• After add to cart: The size chart will appear right below the “Add to Cart” button on the product page.
• Popup: When customers click a link (e.g., “View Size Chart”), the size chart will appear in a popup window.
• Product tab: The size chart will be displayed in its own tab (e.g., “Size Guide”) alongside other tabs like “Description” and “Reviews.
• Top description: The size chart will be displayed at the top of the product description area.
• Bottom description: The size chart will appear at the bottom of the product description.
• After title: The size chart will be placed directly below the product title.
• After the meta: This option places the size chart immediately after the product meta information (such as SKU, categories, and tags). It keeps the size chart near relevant product details.
• None: The size chart will not be displayed on the product page.

Below are visuals of each size chart type:

• Before add to cart:

• Before add to cart after variations:

• After add to cart:

• After title:

• Popup:

• Product tab:

• Top description:

• Bottom description:

• After the meta

 

Multi Size Charts

Multi Size Charts allow you to create and manage multiple size charts for products. This feature enables you to tailor sizing information based on specific criteria, ensuring that customers receive the most relevant size guide for their selected items. You can easily assign, customize, and display these charts across your site to enhance the shopping experience.

Go to your Dashboard > Size Chart > Settings > General, enable Multi size chart on the product page:

 

Once you enable the Multi Size Chart feature, you can assign multiple size chart templates to products. This allows for flexibility in providing tailored sizing information for certain products. You can also create multi size chart by Selecting Size Chart Template on the Editing Product Page > Override

 

 

Shortcode

shortcode allows you to easily display a specific size chart on any page of your site. By simply inserting the shortcode into the page area, you can embed the designated size chart wherever you need it, making it easy to provide sizing information across multiple pages.

Go to the Dashboard > Size Chart, in the size chart list, you will see the shortcodes associated with each size chart.

 

For example, you can copy and paste the size chart shortcode in the product short description of a product:

 

Export & Import Size Chart via CSV

The Export & Import Size Chart via CSV feature allows you to efficiently manage your size charts by exporting them into a CSV file for backup or editing purposes and importing them back into your system when needed.

Follow the steps below to successfully import your size chart data using a CSV file:

1. Click “Go to design,” and you will be redirected to the Customizer section.
2. Add/Edit the Table Component:
   • Within the Size Chart Builder, click the  Add Component button.
   • From the available options, choose the Table component. This will allow you to create a table layout to display your size chart data, click on the Edit button to customize the table component.
3. Click the Import CSV button to proceed with importing your data or Export CSV button to export the current size chart table

4. Prepare Your CSV File:

Before uploading your CSV file, make sure it is properly formatted to match the table structure. A tip is that you can Export CSV file of the current size chart or export the Sample size chart data then add your detailed size chart information, and reimport this CSV file.

Ensure the file is saved in CSV format (.csv) can be used to create this file, but it must be exported as a CSV before uploading.

Select Size Chart Template on Editing Product Page

The Select Size Chart Template feature allows you to assign specific size chart templates to individual products directly from the product editing page in your WooCommerce store.

1. Go to WordPress dashboard > Products and select the product you want to edit.
2. Find the Size Chart Section under Product data.
   • 
3. Select a Size Chart Template:
   • Global: Allows you to use a predefined size chart template that applies universally across all products or a specific category of products.
   • Disable: Turn off the size chart display for the selected product.
   • Override: Allows you to select a specific size chart template that differs from the global setting
     • 
4. Update: Click update the product to save the setting.

 

General settings

The General Settings section in the size chart plugin allows you to configure basic and overarching settings.

 

1. Enable: Toggle to activate or deactivate the use of size charts on your WooCommerce store.
2. Size chart type:  You can choose the placement of the size chart on your product pages. Options may include displaying: Before Add to Cart; Before Add to Cart after Variations; After Add to Cart; Popup; Product Tab; Top Description; Bottom Description; After Title; After the Meta; None.
3. Multi size charts: Manage multiple size charts for products.
4. Custom CSS: Allows you to add your own CSS code to customize the appearance and style of your size charts.

 

 

 

Size Chart Type Settings

Size Chart Type settings for these positions share the same options:

• Before Add to Cart; Before Add to Cart after Variations; After Add to Cart; After Title; After the Meta

1. Button type: You can choose to display the size chart button under Icon & Text; Icon or Text
2. Size chart label: Add the size chart label on the front end
3. Size chart icon: Varieties of size chart icons for you to choose from that fits your style and preference
4. Button background color: This setting defines the background color on the size chart button.
5. Button color: This setting defines the text color on the size chart button.

• Popup

1. Horizontal: This setting positions the size chart popup horizontally across the product page
2. Vertical: This setting positions the size chart popup horizontally across the product page
3. Button type: You can choose to display the size chart button under Icon & Text; Icon or Text
4. Size chart label: Add the size chart label on the front end
5. Size chart icon: Varieties of size chart icons for you to choose from that fits your style and preference
6. Button background color: This setting defines the background color on the size chart button.
7. Button color: This setting defines the text color on the size chart button.

• Product Tab: Add the size chart label on the front end

 

 

Size Chart Components

Size chart components can be added to the layout structure to enhance the presentation and usability of the size chart, including Tab; Accordion; Image; Table; Text; Divider

 

A. Tab

1. New Item: Click to add new tabs
2. Available tabs: Display the created tabs
3. Title: Enter the title of the tab
4. Tab Components: Design components appearing on the tabs
5. Layout: Select layout row(s) built in the size chart tab
6. Margin: You can customize the space around the tab by adjusting the margin

 

 

B. Accordion

1. Multiple Tabs: When enabled, this feature allows multiple sections in the accordion to remain open at the same time when you click on different sections. If disabled, only the clicked section will open, while the other sections will automatically close.
2. Default First Tab: When you enable this option, the first section in the accordion always remains open, if you disable it, all sections will stay closed.
3. New Item: Click to add new sections in the accordion.
4. Available items in Accordion: Display the created sections in the accordion.
5. Title: Name of the section.
6. Accordion Components: Design components appearing on the accordion.
7. Layout: Select layout row(s) built in the size chart accordion.
8. Margin: You can customize the space around the accordion by adjusting the margin.

 

C. Image

1. Image Preview: This shows a preview of the image you upload for the size chart
2. Image URL: Enter the URL where the image is hosted
3. Image ALT: This field is for the alternative text (alt text) of the image
4. Width: Set the width of the image in pixels, allowing you to control how wide the image appears in the size chart
5. Height: Set the height of the image in pixels, determining how tall the image appears in the size chart
6. Padding: Adjust the padding around the image, which adds space between the image and other elements of the size chart, measured in pixels
7. Margin: Set the margin around the image, which creates space between the image and the border of the size chart container or adjacent content
8. Object Fit: This controls how the image fits within its container. You can choose options like ‘cover’, ‘contain’, ‘fill’, or ‘upset’, which determines whether the image will stretch, resize, or crop to fit
9. Border Style: Choose the style of the border around the image. Options may include solid, dotted, dashed, dashed, double, groove, ridge, inset, outset
10. Border Width (px): Set the width of the image border in pixels. The thicker the width, the more prominent the border will appear
11. Border Color: Select the color of the image border to match the design of your size chart or product page styling

D. Table

1. Select Template Color: Choose the overall color scheme for your size chart table
2. Add Columns: Add additional columns to your table
3. Add Row: Add extra rows to input size details
4. Header Table: Select where the header of the table should be located. You can choose to place the header in the top row, in the first column, or both
5. Header Background: Set the background color for the header row
6. Text Header: Define the color of the text in the header row
7. Header Text Bold: Enable or disable bold formatting for the header text
8. Header Text Size: Customize the font size for the text in the header
9. Column Style: This option allows you to choose how to highlight your odd and even table in rows or columns
10. Even Background: Set a background color for even-numbered rows
11. Even Text: Customize the text color for even-numbered rows
12. Odd Background: Set a background color for odd-numbered rows
13. Odd Text: Customize the text color for odd-numbered rows
14. Border Color: Choose the color for the table’s borders
15. Cell Text Size: Adjust the font size for the text inside table cells
16. Horizontal Border Width: Set the thickness of the borders between rows
17. Horizontal Border Style: Choose the style for the horizontal borders, it can be: solid, dotted, dashed, dashed, double, groove, ridge, inset, outset
18. Vertical Border Width: Set the thickness of the borders between columns
19. Vertical Border Style: Choose the style for the vertical borders, it can be: solid, dotted, dashed, dashed, double, groove, ridge, inset, outset
20. Border Radius: Define how rounded the corners of the table cells should be
21. Margin: Set the space around the table to create a clean layout on the page
22. Max Height (px): Limit the maximum height of the table in pixels to control the table’s display size
23. Import CSV, Export CSV, Sample: Import data into the table from a CSV file, export your table data as a CSV file for backup or editing, and download a sample CSV file to see the required format

E. Text

Text Component provides a versatile way to customize the textual content within your size charts. It supports a range of formatting and editing options:

1. Text Formatting: Offers basic formatting options like bold, italic, bullet points, numbering, and other text styles
2. Text Alignment: Allows you to align the text (left, center, or right) to control how the text appears
3. Add Links: Provides the ability to insert hyperlinks within the text
4. Add Media: Lets you insert images, videos, or other media directly into the size chart text section to enhance the content
5. Visual: Allowing you to edit and format the text visually without needing to write HTML code
6. Text Mode: Switch to editing the text in HTML for more advanced formatting and customization options
7. Text Margin: Adjusts the space around the text, allowing you to set margins to create a comfortable visual spacing around the text

F. Divider

 

1. Text (Optional): You can add texts to the divider if you want.
2. Select Divider Color: Choose color for the divider
3. Weight: The weight setting controls the thickness of the divider
4. Margin: You can customize the space around the divider by adjusting the margin.

Thank you for your attention!

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