X hide

Magento 2 Size Chart v2.x Developers Guide and API Reference

From Plumrocket Documentation

You are viewing:  Size-chart-wiki-icon-32.png  Size Chart


Placing Size Chart or Changing Position Manually

If you need to put Size Chart button in any other place on the page, or if does not show up - please follow the instructions below.

Attention green.png Important Information:

If you use custom theme (or third-party extensions). In this case you will need to enable "Template Path Hints" option in your Magento backend. This will let you see the path and name for this template. More information on how to enable template path hints can be found in this article.
Once template path hints are enabled on your website - please go to product page and find the template that covers most of the elements of the page. That's the template you need to edit in your custom theme.


Changes to be made Website Frontend - Product page

On your server please make the following steps:

1. Create file:

 app/design/frontend/<Vendor>/<theme>/Plumrocket_SizeChart/layout/catalog_product_view.xml


2. In the created file put the code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
 <move element="prsizechart" destination="CONTAINER_OR_BLOCK_NAME" after="-"/>
</body>
</page>


CONTAINER_OR_BLOCK_NAME - name of one of the containers or blocks on the product page. You can check them in the theme layout.

Go to:

app/design/frontend/<Vendor>/<theme>/Magento_Catalog/layout/catalog_product_view.xml 

or:

vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml

after="-" means that size chart block has been placed into container.
CONTAINER_OR_BLOCK_NAME after all the blocks.
before=”-” can be used, if you need to place it before other blocks. Instead of “-” you can use name of specific block, if you need to place size chart before or after it.


Code Example

This is the code you need to paste into the created file.

<?xml version="1.0"?>
<layout version="0.1.0">
 
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
 !!-<move element="prsizechart" destination="alert.urls" before="-"/>-!!
</body>
</page>
 
</layout>


  1. Size Chart button position on product page.

Magento 2 size chart developer guide.jpg


Size Chart Extension for Magento 2 Size Chart Extension for Magento 2

Buy Magento 2 Size Chart Extension on Plumrocket Store
Click below to check key features of this extension, view live demo and screenshots:
Navigation