Ask for a feature

Marketplace Size Chart For Magento 2

The Marketplace Size Chart for Magento 2 extension will now allow the marketplace sellers to add the size charts for their products under their own seller panel.  The sellers will be able to add two types of size charts templates –

  • Normal
  • Configurable

The customers can refer the size chart to identify their accurate size. This extension is helpful for the customers as they can easily check their fit so that they can accordingly select their product size.

Note:
As this extension is an add-on the of the marketplace module, so you must have first installed the Magento2 Marketplace to make use of this extension.

This extension will work with only – Simple, Virtual and Configurable product types.

Features Of Marketplace Size Chart For Magento 2

  • Sellers can add templates to their products while adding new products.
  • Templates can be created for user-defined attributes in case of configurable type.
  • Templates can be created for custom options in case of simple type.
  • In the case of size chart templates for simple products, there is an option to add price row.
  • While the simple product is assigned a size chart template, Custom Options are created automatically for that product as per the template.
  • Price row can be added or removed from the templates, it will affect the price of custom options of the product.
  • Admin can decide, which attributes should be shown while creating new templates, in the store configuration.
  • Works with products like Simple, Virtual and Configurable.
  • While being created, products can be assigned a template which will be displayed at the frontend.
  • Sellers can create new templates and edit the old ones.
  • Admin can access the templates created by sellers and admin itself.
  • In the case of simple products, the custom options will be displayed in the templates at the front-end.
  • Admin and seller can create size charts for the products to be displayed on product view page.

Installation Of Marketplace Size Chart For Magento 2

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.
Install-Marketplace-Size-Chart-Magento2
After the successful installation, you have to run these commands in the Magento2 root directory.

First command- php bin/magento setup:upgrade

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

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

After running the commands, you have to flush the cache from Magento2 admin panel by navigating through->System->Cache management as shown below.
Cache-Management-Marketplace-Size-Chart-For-Magento2

MultiLingual Configuration – Marketplace Size Chart For Magento 2

For Multilingual support, please navigate. Store->Configuration->General ->Locale Options. And select your desired language from the Locale option.
Multi-Lingual

Language Translation – Marketplace Size Chart For Magento 2

For module translation, please navigate the following path in your system app/code/Webkul/MPSizeChart/i18n. Open the file named en_US.CSV for editing.
Language-Translation-1

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

After editing the CSV file, save it and then upload it to the same folder. Now your module translation is complete.
Language-Translation-3-1

Admin’s Configuration

The admin will navigate to Stores>Configuration>Marketplace>Size Chart Settings. Here, the admin will select the attribute codes that will be available for the sellers to use. The selected attributes will be shown while creating new templates at the seller’s end. Lastly, tap the save button to save the configuration.
Heading name goes here

Seller’s End – Configuration and Workflow

After the successful installation of the extension, the seller will navigate to the Marketplace block and under that will find the “Size Chart” menu.

Initial-Size-Chart-Option

Tapping the size chart menu option brings up the page “Size Chart Templates“. Here, the seller will find the already added templates(If any) and can add two types of size chart templates

  • Normal and
  • Configurable

Size-Chart-Template

Size Chart – Normal

To add a normal size chart, the seller will click on the “Normal” under the “Add New Template” drop-down. After that, the seller will have to enter the –

  • Template Name 
  • Template Code and
  • Add Custom options(these custom options become the column names).
  • Choose the Image file for the size chart template.
  • Lastly, click on the “Continue” button to proceed further.

Add-Template-1

After you tap the Continue button, the seller will enter the Option title and the corresponding Option values. The seller will then enter the values for the corresponding option values. The seller can also add the custom price for each of the custom options by checking the option “Add Custom Price“.
Add-Template-2

Now, click the “Save” button to save this normal size chart.

Add Size Chart To Products

To add the size chart to the normal products, the seller will navigate through New Products-> and then add a new product or edit an already added product. After, filling all the product information go to the “Select Option” and select the template that you want to apply on this product of yours and after that click the “Save” button.
Add-New-Product-Size-Chart

Now, when the customers check this product at the front-end they will see the “View Size Chart” option.

Front-End-Normal

You can select the custom options for this product as we had added the price for each of the custom values while creating the size chart.
Heading name goes here

Clicking the “View Size Chart” brings up the size chart for the product.
Simple-Sizechart-Marketplace-Size-Chart-For-Magento-2

Size Chart – Configurable

To add a configurable size chart template, the seller will click on the “Configurable” under the “Add New Template” drop-down as shown below in the snapshot.

Config-Select-To-Add-Template

After that, the seller will have to enter the –

  • Template Name 
  • Template Code and
  • Select the Custom options(the custom attributes allowed by the admin for creating the size chart are visible here to choose for the sellers) that will be used to create the size chart column headers automatically.
  • Now you need to enter the option values for the selected custom option. We have selected the “Color” attribute here and added the option values for the two color variations.
  • Choose the Image file for the size chart template.
  • Lastly, click on the “Save” button to save this size chart.

Config-Add-Template

Now, after clicking the “Save” button the configurable size chart is saved.

Add Configurable Size Chart To Configurable Products

To add the size chart to the configurable products, the seller will navigate through New Products-> and then add a new product or edit a previously added configurable product. Now, fill all the product information and go to the “Select Option”, select the template that you want to apply to this configurable product. Lastly, click the “Save” button.
Config-Edit-Product-Add-Config-Template

At the front-end, customers will see the “View Size Chart” option on the product page.
Config-Front-End

Clicking the “View Size Chart” brings up the size chart for the configurable product.
Config-View-Size-Chart

The customer is able to add the color variation product to the cart via the size chart itself by tapping the “Add To Cart” button.

Admin’s End – Configuration & Workflow

The admin can create the size charts for his products and can access the templates created by the marketplace sellers by navigating to Marketplace Management->Marketplace Size Chart->View Templates.

Admin-Main-Add-Template

Tap the “View Templates” menu option to bring up another page.
Admin-Add-Template-Initial

Here the admin can

  • View the size charts added by the marketplace sellers and his own.
  • Add Size charts of two types – Normal and Configurable.
Adding Normal Size Chart Template –

To add a normal size chart, the admin will select “Normal Product Template” under the Add Template drop-down option as shown below in the snapshot.
Admin-Add-Template-Initial

To add a normal size chart, the admin will click on the “Normal Product Template” under the “Add Template” drop-down. The admin will have to enter the –

  • Template Name 
  • Template Code and
  • Add Custom options(these custom options become the column names).
  • Click the Continue button to add the custom option values.

Admin-New-TemplateClicking Continue brings up the table with the Custom Options as column headers. Here, the admin will enter the –

  • Options and their values for the Custom Options.
  • Check the “Add Custom Price“(If required) option to add custom price to these option values.
  • Choose the Image for the size chart.
  • Click the Save button to save the size chart.

Admin-Save-Sizechart

Add Normal Size Chart To Products

To add the size chart to the normal products, the admin will navigate through Products->Catalog->Add Product and then click to add a new product or edit an already added product to add the size chart. For this example, we have created a new product – Men’s Boxers.

Now, after filling in all the product information go to the “Webkul Marketplace Size Chart ” section. Here, the admin will select the template that he wants to apply to this product and click the “Save” button.
Admin-Add-Simple-Product-Template

Customers will see the “View Size Chart” option on the product page.
Admin-View-Normal-Frontend

You can select the custom options for this product. Price is added for each of the custom values whilst creating the size chart.
Magento2-Marketplace-Size-chart
Clicking the “View Size Chart” brings up the size chart for the product.
Admin-Normal-Sizechart

Add Configurable Size Chart

To add a configurable size chart template, the admin will click on the “Configurable Product Template” under the “Add Template” drop-down as shown below in the snapshot.

Admin-Add-Template-Initial

To create the configurable size chart, the admin will have to enter the –

  • Template Name 
  • Template Code and
  • Select the Attribute that will be used to create the size chart column headers automatically.
  • Now you need to enter the option values for the selected custom option. We have selected the “Color” attribute here and added the option values for the two color variations.
  • Choose the Image file for the size chart template.
  • Click on the “Save” button to save this size chart.

Admin-Configurable-Sizechart

Now, after clicking the “Save” button the configurable size chart is saved.

Add Configurable Size Chart To Products

To add the size chart to the Configurable products, the admin will navigate through Products->Catalog-> and then add a new configurable product or edit an already added configurable product to add the size chart. For this example, we have created a new product – Men Polo T-Shirt.

Now, after filling in all the product information go to the “Webkul Marketplace Size Chart ” section. Here, the admin will select the template that he wants to apply to this product under the “Select Template” section and click the “Save” button.

Admin-Apply-Sizechart

At the front-end, customers will see the “View Size Chart” option on the product page.

Clicking the “View Size Chart” brings up the size chart for the configurable product.
Admins-Sizechart-Fronend

Customers can add the color variation product to the cart from the size chart itself by clicking the “Add To Cart” button.

Admin – Size Chart Management

The admin can also check the size charts of the marketplace sellers. The admin will navigate to  Marketplace Management->Marketplace Size Chart->View Templates. Here, the admin can select the size chart of the sellers and can edit it by clicking the “Edit Template” link as shown below.

Check-Seller-Size-Chart

Clicking the “Edit Template” brings up the page to edit the selected seller’s size chart template. After editing, save the seller’s template.
Save-Seller-Sizechart

That’s all for the Marketplace Size Chart For Magento 2. If you have any issue feel free to add a ticket and let us know your views to make the module better at webkul.uvdesk.com

Current Product Version - 2.0.0

Supported Framework Version - 2.0.x, 2.1.x

. . .

Ask a Feature

Index