Reading list Switch to dark mode

    User Guide for Magento 2 Size Chart

    Updated 25 October 2023

    Magento 2 Size Chart Module allows the admin to add a size chart for products. Admin can create size chart templates and can use those templates while adding the size chart on any product.

    The size chart will be displayed on the web-store product page. Magento 2 Size Chart Module helps the buyer to view the size chart and hence allows customers to easily find the right size and increases customer satisfaction.

    Note –

    Check the plugin working in the video mentioned below –

    CcPc6km0nfw

    Features

    • Enable/disable the module.
    • Create, delete, and edit the Size Units.
    • Mass delete and change the status of Size Units.
    • Create, delete, and edit the Body Measurements.
    • Upload the image of Body Measurements.
    • Mass delete and change the status of Body Measurements.
    • Create, delete, and edit the Size Chart Template.
    • Upload the specific images of the Measurements for the Custom Size Chart Form.
    • Set the Size Chart Template to the specific product.
    • Customers can check the size chart for the product.
    • Customers can also give his/her custom Measurements using the Custom Size Chart Form.

    Installation

    Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. You need to transfer this app folder into the Magento2 root directory on the server as shown below.

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    Installation

    After the successful installation, you have to run these commands in the Magento2 root directory.

    First command- php bin/magento setup:upgrade

    command

    Second Command – php bin/magento setup:di:compile
    2 command

    Third Command – php bin/magento setup:static-content:deploy
    3 command

    After running the commands, you have to flush the cache from Magento admin panel by navigating through->System->Cache management as shown below.

    Installation

    Language Translation

    If you need to do the module translation, please navigate to the following path in your system app/code/Webkul/SizeChart/i18n.
    Open the file named en_US.CSV for editing as shown in the below screenshot.

    Magento2 Change CSV language file

    Once you have opened the file for editing. Replace the words after the†comma(,)†on the right with your translated words.

    i18file_magento2_size_chart

    After editing and translating the CSV file, you need to save the translated file name according to your region language and country code such as – de_DE.CSV. Then upload the translated file to the same folder from where you have obtained it. Now your module translation is complete.

    Magento2 Change CSV Language file

    Initial Configuration Settings

    After the successful installation of the Magento 2 Size Chart module, the admin can go to Stores > Configuration > Webkul-> Size Chart. From here, the admin can make the initial configuration settings for the extension.

    192.168.15.157_CEP2_pub_admin_admin_system_config_edit_section_sizechart_key_a634fdc2b77f255e4df4bb0e1aabe4a6869592e5771b6d52e29ea11beb9b4bff_screenshot

    Here, the admin will be able to –  

    • Enable or disable the extension for use in the store. Apart from that, after enabling the extension the side panel option Size chart appears in the admin panel.

    For the customer size chart, the admin can configure the –

    • Acknowledgment to the customers.
    • Add the acknowledgment note for the customers visible in the size chart pop-up.
    • Enter the footer note.

    Lastly, save the configuration settings.

    Size Chart Options

    After the successful installation and configuration, the Size Chart menu option is visible to the admin.

    192.168.15.157_CEP2_pub_admin_admin_dashboard_index_key_4f54b59c2eb441ce4fe829649e68e324b8714f274586ae227baa68c26646e413_screenshot

    Here, the admin has three options to configure –

    • Size Units
    • Measurements
    • Size Chart Templates

    Let’s go through each of them.

    Size Unit Creation

    Under this section, the admin can create the size units for the size chart as required. If you have already created the size units then they will be listed under this section.

    192.168.15.157_CEP2_pub_admin_sizechart_sizeunits_index_key_8147c64aea5fc319ae47d4c3276c7e24252d121d8b1f2a42782729163051f317_screenshot

    Apart from that, the admin can do bulk action that includes – deletion and updating of the size units status as enable or disable as per the snapshot below.

    Screenshot-from-2023-09-01-12-11-22

    To add a new size unit, tap the Add Unit button on the top right-hand corner, and that brings up the below section.

    192.168.15.157_CEP2_pub_admin_sizechart_sizeunits_newunit_key_b464f4a78deb282d94181e4e6d859bacdbc91258de99d2fb2aa5b8db52c5d2a0_screenshot

    Here, for the Size Unit Information enter the size unit that you want to create and set the status as enabled or disabled as required.

    Lastly, save the size unit by tapping the Save Unit button. A success message for the same is shown and the newly created size unit is listed under the section.

    192.168.15.157_CEP2_pub_admin_sizechart_sizeunits_index_key_8147c64aea5fc319ae47d4c3276c7e24252d121d8b1f2a42782729163051f317_screenshot-1

    After creating the size units, the admin can edit them by tapping the edit link for the respective size unit.

    Measurement Creation

    Under this section, the admin can create the measurements for the size chart as required. If you have already created the measurements then they will be listed under this section.

    192.168.15.157_CEP2_pub_admin_sizechart_measurements_index_key_fccf31cdb2ba36519041bfc635e48d6d1b35e92aac82f5e7135ec1f68a1964d0_screenshot

    Apart from that, the admin can do bulk action that includes – deletion and updating of the measurement status as enabled or disabled as per the snapshot below.

    Screenshot-from-2023-09-01-12-22-48

    To add a new measurement, tap the Add Measurement button on the top right-hand corner, and that brings up the below section.

    192.168.15.157_CEP2_pub_admin_sizechart_measurements_newmeasurement_key_04b39fae8bc76685e6aa0284638028e7fbd74f2e94f4805a73b77247c4eec01a_screenshot

    Here, for the Measurement Information enter the Measurement that you want to create, set the status as enabled or disabled, and upload an image for the measurement.

    Lastly, save the measurement by tapping the Save Measurement button. A success message for the same is shown and the newly created measurement is listed under the section.

    192.168.15.157_CEP2_pub_admin_sizechart_measurements_index_key_fccf31cdb2ba36519041bfc635e48d6d1b35e92aac82f5e7135ec1f68a1964d0_screenshot-1

    After creating the measurements, the admin can edit them by tapping the edit link for the respective measurement.

    192.168.15.157_CEP2_pub_admin_sizechart_measurements_edit_id_5_key_28f312f7258da8822697ae2ad2a4379cb3e3a267c861fa204f7b9d8ebe903b47_screenshot

    Size Chart Template Creation

    Under this section, the admin will find all of the created size chart templates as required and can delete or add more templates.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_index_key_e6c3319ba715c178ab4edf36b82867ccc9c7f14b58f33101438853ee3c073c5a_screenshot

    Apart from that, the admin can do bulk action that includes – deletion and updating of the size chart template status as enabled or disabled as per the snapshot below.

    The admin can also edit and of the created size chart templates as required by tapping the edit link for the respective template.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_index_key_e6c3319ba715c178ab4edf36b82867ccc9c7f14b58f33101438853ee3c073c5a_screenshot-1

    To add a new size chart template, the admin will tap the Add Template button, and that brings up the below section.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_newtemplate_key_ec16d23e37f47ebe0b08c21d8c3bbd67a38cc95e1bfc85bfa5633f3d33a545f0_screenshot

    Here, for the size chart template –

    • Enter the template name.
    • Enter the template code.
    • Set the status of the template as Enable d or Disabled.
    • Choose the size units and the measurements.

    After the above settings tap the Generate Template button.

    Now, enter the values for the sizes(in range as well) available as required.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_newtemplate_key_ec16d23e37f47ebe0b08c21d8c3bbd67a38cc95e1bfc85bfa5633f3d33a545f0_screenshot-3

    Then, upload the measurement images as required and save the template.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_newtemplate_key_ec16d23e37f47ebe0b08c21d8c3bbd67a38cc95e1bfc85bfa5633f3d33a545f0_screenshot-2

    After saving the size chart template, the admin will be able to see a success message and the size chart will be listed under the section.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_index_key_e6c3319ba715c178ab4edf36b82867ccc9c7f14b58f33101438853ee3c073c5a_screenshot-2

    After saving the template you can edit the template as well as per the snapshot below.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_edit_id_2_key_b90e38ffeecf22ddb4d1c05565fec0169a613fece12344701e8270d0225a6164_screenshot-1

    The admin can also edit the uploaded measurement images for the size template.

    192.168.15.157_CEP2_pub_admin_sizechart_templates_edit_id_2_key_b90e38ffeecf22ddb4d1c05565fec0169a613fece12344701e8270d0225a6164_screenshot-2

    Add Size Chart Template to Product

    To assign a template to the product, navigate through Catalog->Products and edit a product.

    Navigate to the Size Chat Section and from the drop-down option select a template to apply to the product as required.

    Screenshot-from-2023-09-01-13-55-15

    After that, save the product.

    Size Chart Option On Product Page

    Now, the size chart option for the product will be visible on the product page as per the image below.

    192.168.15.157_CEP2_pub_tshirt.htmlscreenshot

    Tapping the Size Chart button brings up the pop-up as shown below with the details to refer to the available sizes for the product.

    192.168.15.157_CEP2_pub_tshirt.htmlscreenshot-2

    One chart is the default size chart for the product and the other allows the customers to enter their custom size values for the respective product.

    192.168.15.157_CEP2_pub_tshirt.htmlscreenshot-4

    The customer will enter the values for the required sections of the product, and choose their body type as plump, normal, or Sportive. After that, check the acknowledgment and tap the save measurement button.

    Now, the custom-size data is visible on the product page to the customers.

    192.168.15.157_CEP2_pub_tshirt.htmlscreenshot-5

    Thereafter, the customer can add the product to the cart and proceed further. Within the cart, the customers can see their selected size as required.

    192.168.15.157_CEP2_pub_tshirt.htmlscreenshot-6

    The entered size values are visible on the shipping method section page.

    192.168.15.157_CEP2_pub_checkout_screenshot

    The entered size values are visible on the place order page under the order summary as well.

    192.168.15.157_CEP2_pub_checkout_screenshot-1

    After placing the order, the selected size details are visible in the respective order history.

    192.168.15.157_CEP2_pub_sales_order_view_order_id_13_screenshot

    The same details are visible in the order confirmation mail as well.

    mail.google.com_mail_u_1__ogblscreenshot

    The store admin can also see the customer entered custom values for the product size as per the snapshot below.

    192.168.15.157_CEP2_pub_admin_sales_order_view_order_id_13_key_58498a91ca761552a4c9264000b5695dc83bfa8f6b77d1f0f7ae423fe274abea_screenshot

    Support

    That is all about the Magento 2 Size Chart Module. If you have any queries regarding the plugin, please contact us at Webkul Support System.

    If you’re looking to create a custom e-commerce website, it’s a great idea to hire Magento developers who can help you build a powerful and scalable online store.

    You can also check our complete Magento 2 extensions.

    Current Product Version - 4.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content