Assuming I have a webshop with shoes, jackets, t-shirts, ect. for men and women, what would be the best way to implement size charts for ant of these products, in a way that they show in the product page.

I really do not know how, but I would like to see of it's possible but customizing the code, and not by purchasing any expensive extension.

xml code:

<referenceBlock name="product.info.options.wrapper">
    <block class="Magento\Framework\View\Element\Template"
           before="product.info.options.swatches" />

Best and easiest way to add and manage size charts using custom attribute and / or custom cms block.

Create a product attribute and have size chart as image, upload size chart image and save path in product attribute. And on template check if custom_attribute have value or not, if does then show that size chart where ever you want.

Also if it is html size chart you want then , create static block for different product types and add block id in custom attribute.


1 - Create a product text attribute "sizechart" and add in your attribute sets

2 - Create your static blocks for different chart sizes and add static block id in that field of each product ( however if you want to add size chart on category basis then you can add category check in sizechart.pthml to show respective size chart )

3 - Create a template "sizechart.phtml" in YOUR-THME/Magento_Catalog/templates/product/view/ and add code :

$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
<?php if ($_product->getData('sizechart')): ?>
    <a href="#" class="opener_sizechart">Sizechart</a>
    <div class="sizechartholder">
       echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($_product->getAttributeText('sizechart'))->toHtml();?>
<?php endif; ?>

4 - Now, call this template in your catalog_product_view.xml file using below code ( place that code where you want to call this file ):

<container name="product_video_shop" htmlTag="div" htmlClass="sizechart">
    <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.video" template="product/view/sizechart.phtml"/>

5 - Finally, you have to add jquery / js to show this block in popup

  • Hi. How should the code look for this: "And on template check if custom_attribute have value or not, if does then show that size chart where ever you want." Mar 28 '18 at 6:54
  • What would be the correct syntax for adding the static block ID in the created field for each product? Mar 28 '18 at 10:30
  • In admin Content->Block when you create a block you provide Block title and Block id etc. you have to add block id in that product attribute text field ( block id should not have any spaces i.e women-size-chart) add women-size-chart in that product attribute text field Mar 28 '18 at 10:34
  • Ok; i have done it like that, with the code on the template (the template was already called in the xml); but now I get a white screen :( is there any configuration related to 'required', 'System', 'Visible', 'Scope', 'Searchable', 'Use in Layered Navigation', 'Comparable' or any other one that should be taken into account? Mar 28 '18 at 11:08
  • what is attribute name you have created ? "sizechart" ? Mar 28 '18 at 11:22

Yes, It can be possible by customizing the code. for this, you need to create your custom module in this module you need to create a grid(with insert, update and delete) which allows you to Import size chart. This grid is needed because you have lots different products in your webshop and It can be possible that some product has different size chart (i.e men and women has different).

After that, you need to create a new product attribute with custom source model and in this source model, you can define the set title of size chart(from the grid which you created). later on, assign this attribute to attribute set which you are using. now just open the product which you want to assign the size chart and save size chart option.

On frontend side, you will get Id of size chart attribute so based don this Id you need to display size chart. (this is just overview how you can develop this)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.