Step by Step Tutorial to Add Product Size Charts in WooCommerce

The WooCommerce Product Size Charts Plugin by Progos is a powerful tool that allows online store owners to create and display customizable size charts for their WooCommerce products. This tutorial will guide you through the process of installing, configuring, and setting up size charts for your products using this plugin. By the end, you’ll be able to create professional size charts to help customers choose the right product size, reducing returns and boosting satisfaction.

Prerequisites to Add Product Size Charts in WooCommerce

Before you begin, ensure you have:

• A WordPress site with WooCommerce installed and activated.
• The WooCommerce Product Size Charts Plugin purchased from CodeCanyon.
• Administrator access to your WordPress dashboard.

Step 1: Purchase and Download the Plugin

1. Visit CodeCanyon and purchase the WooCommerce Product Size Charts Plugin by Progos.
2. Download the plugin ZIP file from your CodeCanyon account under Downloads.
3. Save the file to your computer for the next step.

Step 2: Install the Plugin

Log in to your WordPress admin dashboard.

1. Navigate to Plugins > Add New.
2. Click the Upload Plugin button at the top of the page.
3. Choose the ZIP file you downloaded and click Install Now.
4. Once the plugin is installed, click Activate Plugin to enable it.

Step 3: Access the Plugin Settings

After the plugin activation, a new menu named Size Guide will appear inside the admin panel.

1. Go to Size Guide > General Settings. This is where you’ll manage all size chart settings.
2. You’ll see options to configure the global settings for size guide display
3. In the Size Guide settings, configure how the size chart is displayed:
4. • Popup: Displays the size chart in a modal popup when customers click a “View Size Chart” button.
   • Tab: Adds the size chart as a tab on the single product page.
5. Enable the Show on Shop/Category Pages option to display a size chart button near the “Add to Cart” button on shop and category pages.
6. Customize the button text (e.g., “View Size Chart”) and style to align with your theme.
7. Save your settings.

Step 4: Create a Size Chart

1. In the Size Charts section, click Add New Size Chart.
2. Title: Enter a descriptive title for the size chart (e.g., “Men’s T-Shirt Size Chart”).
3. Table Data: Use the built-in table editor to create your size chart. You can:
   • Add rows and columns for sizes (e.g., S, M, L, XL) and measurements (e.g., Chest, Length, Sleeve).
   • Input text, numbers, or even images to represent sizing information.
   • Create multiple tables within a single size chart if needed (e.g., separate tables for men’s and women’s sizes).
4. Additional Text: Add optional text before or after the size chart to provide context, such as sizing tips or measurement instructions.
5. Styling Options:
   • Customize colors for the table, text, and background to match your store’s branding.
   • Choose whether the size chart appears in a popup or as a tab on the product page.
6. Click Publish to store your size chart.

Step 5: Assign the Size Chart to Products

The plugin allows you to assign size charts to individual products, variations, categories, or brands (works with Perfect Brands WooCommerce by QuadLayers). Here’s how:

1. For Individual Products:

• Go to Products > All Products and edit the desired product.
• In the Product Data section, find the Size Guide tab or metabox.
• Select the size chart you created from the dropdown menu.
• Save the product.

2. For Product Variations:

• If your product has variations (e.g., different sizes or colors), you can assign a specific size chart to each variation.
• In the Variations tab of the product editor, select the appropriate size chart for each variation.

3. For Categories or Brands:

• Go to Products > Categories and select the category you want to assign the size chart.
• Use the Assignment Option to apply the size chart to specific product category.
• This is useful for applying a single size chart to multiple products (e.g., all shirts in the “Men’s Clothing” category).

Step 7: Test the Size Chart

• Visit your WooCommerce store’s frontend and navigate to a product page with an assigned size chart.
• Verify that the size chart displays correctly in the chosen format (popup or tab).
• Check the shop or category pages to ensure the size chart button appears and functions as expected.
• Test on mobile devices to ensure the size chart is responsive and user-friendly.

Step 8: Advanced Features

The WooCommerce Product Size Charts Plugin offers additional features to enhance functionality:

• Multiple Tables: Create multiple tables within a single size chart for complex products (e.g., combining size and fit information).
• Custom Styling: Use CSS to further customize the appearance of size charts if the built-in options are insufficient.
• Global Size Charts: Set a default size chart for all products in a category or brand, reducing manual assignment.

Troubleshooting Tips

• Size Chart Not Displaying: Ensure the size chart is assigned to the product or category and that the display settings (popup or tab) are correctly configured.
• Styling Issues: Check for theme conflicts. You may need to add custom CSS in Appearance > Customize > Additional CSS to resolve issues.
• Plugin Updates: Keep the plugin updated to avoid compatibility issues with the latest versions of WordPress and WooCommerce. Avoid updating if you’re using a nulled version, as it may break functionality.
• Support: If you encounter issues, contact Progos support through your CodeCanyon account or check the plugin’s documentation.

Conclusion

The WooCommerce Product Size Charts Plugin by Progos makes it easy to create and display professional size charts for your WooCommerce store. By following this tutorial, you can set up size charts that enhance the customer experience, reduce sizing-related returns, and improve your store’s professionalism. With features like customizable tables, flexible display options, and category-based assignments, this plugin is a must-have for e-commerce stores selling size-dependent products.

Read more articles about this plugin here: Size Chart