Product Size Charts & Guides

Overview

↑ Back to top

Product Size Charts & Guides is a powerful and flexible WooCommerce extension that allows you to create, manage, and display custom size charts and guides on your product pages. Enhance your customers’ shopping experience by providing clear, visually appealing, and context-aware sizing information for your products.

• Create unlimited size charts and guides.
• Assign charts to products by category, tag, or user role.
• Display charts as popups or extra tabs.
• Fully customize the appearance and structure of each chart.
• Assign existing pages to display their content below size charts.

Usage

↑ Back to top

Admin Area

↑ Back to top

1. Size Chart Settings

• Overview
  The main admin screen lists all your size charts. Here you can add, edit, preview, clone, or delete charts.
• Title & Description
  Each chart has a title (for identification) and an optional description. These help you organize and recognize charts in the admin area and can be shown on the frontend.
• Enabled
  Toggle whether a chart is active. Disabled charts will not appear on the frontend.
• Visibility Restrictions
  Control which products and users see each chart:
• Product Categories: Show chart only for selected categories or all.
• Product Tags: Show chart only for selected tags or all.
• User Roles: Restrict chart to specific user roles (e.g., logged-in, wholesale).
• Shortcode
  Each chart provides a unique shortcode for manual placement in posts, pages, or product descriptions.
• Actions
• Edit: Modify chart settings, content, and design.
• Preview: See a live preview of the chart.
• Clone: Duplicate a chart for quick creation of similar charts.
• Delete: Permanently remove a chart.

2. Edit Action

• Settings Section
• Settings Tab
  • Name: Chart title.
  • Description: Short description.
  • Enabled: Toggle chart visibility.
  • Visibility Restrictions: Set categories, tags, and user roles.
  • Instructions Page: Link to a WordPress page for extra help.
  • Display Mode: Choose between Popup Link or Extra Tab.
  • Link Style: Select Text Link or Button for popup mode.
• Content Tab
  • Table Structure: Add/remove columns and rows.
  • Table Content: Enter size data for each cell.
• Design Tab
  • Background Color: Set chart background.
  • Header Color: Table header background.
  • Header Font Color: Table header text color.
  • First Column Color: First column background.
  • Content Color: Table body text color.
  • Border Color: Table border color.
  • Alternating Rows Color: Background for alternating rows.
  • Border Radius: Rounded corners.
  • Padding: Chart padding.
  • Font Family: Font for the chart.
  • Header Font Size/Weight: Header text size and boldness.
  • Body Font Size/Weight: Body text size and boldness.
  • Header Text Align/Decoration: Alignment and decoration (underline, etc.) for header.
  • Body Text Align/Decoration: Alignment and decoration for body.
  • Add Cell Borders: Enable/disable cell borders.
  • Table Width: Set chart width (e.g., 100%, 600px).
  • First Column Width: Set width of first column.
• Preview Section
• Editing Content: Click on table cells to edit values directly.
• Reordering Rows: Drag and drop rows to reorder.
• Deleting Rows/Columns: Remove unwanted rows or columns with a single click.

3. Preview Action

• Instantly view how the chart will appear on the frontend, including all design and content changes.

4. Clone Action

• Duplicate an existing chart, including all settings, content, and design, to quickly create similar charts.

5. Delete Action

• Permanently remove a chart. This action cannot be undone.

Frontend

↑ Back to top

1. Popup Link

Text Link:
A simple text link appears on the product page. Clicking it opens the size chart in a modal popup.

Button:
A styled button appears on the product page. Clicking it opens the size chart in a modal popup.

Popup links/buttons are placed near the product summary or add-to-cart area, depending on your theme. The modal displays the chart with all configured design and content options. If unit switching is enabled, users can toggle between units.

2. Extra Tab

• Adds a new tab (e.g., “Size Chart”) to the product data tabs (next to Description, Reviews, etc.).
• The tab displays the chart with all design and content settings.
• If unit switching is enabled, users can toggle between units within the tab.

Use Case

↑ Back to top

• Clothing Stores: Display garment size guides (e.g., S/M/L, chest/waist/inseam).
• Footwear: Show shoe size conversion charts (EU/US/UK).
• Accessories: Provide ring, hat, or glove sizing.
• Sports Equipment: Show size recommendations for bikes, helmets, etc.
• Custom Products: Add guides for any product requiring sizing or measurement info.

FAQ

↑ Back to top

Q: Can I assign different charts to different products?
A: Yes. Use the category, tag, and user role visibility settings to control which products display each chart.

Q: How do I change the appearance of the charts?
A: Use the design and appearance settings for each chart to customize colors, fonts, borders, and more.

Q: Can I display the chart as a tab instead of a popup?
A: Yes. Set the “Display Mode” to “Extra tab” to show the chart in a new product tab.

Q: Is the plugin compatible with all themes?
A: The plugin uses standard WooCommerce hooks and should work with most themes. For best results, test and adjust design settings as needed.

Q: Can I add instructions or extra help for customers?
A: Yes. Link to any WordPress page as an “Instructions Page” for additional guidance.