{"id":19778,"date":"2021-06-25T16:41:18","date_gmt":"2021-06-25T13:41:18","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=19778"},"modified":"2021-09-24T05:56:56","modified_gmt":"2021-09-24T09:56:56","slug":"magento-2-size-chart-v3-x-developer-guide-and-api-reference","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide","title":{"rendered":"Magento 2 Size Chart v3.x Developer Guide and API Reference"},"content":{"rendered":"\n<h2 id=\"installation\">Placing Size Chart or Changing Position Manually<\/h2>\n\n\n\n<p>The<a href=\"\/magento-size-chart\"> Magento 2 Size Chart extension<\/a> allows putting the Size Chart button in any place on the page. In this case, or if the button does not show up, please follow the instructions below.<\/p>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-warning\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Important Information:<\/p>\n\n\n\n<p>If you use custom theme (or third-party extensions). In this case you will need to enable &#8220;Template Path Hints&#8221; 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.\n        Once template path hints are enabled on your website &#8211; please go to product page and find the template that covers most of the elements of the page. That&#8217;s the template you need to edit in your custom theme.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Website Frontend &#8211; Product page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>On your server please make the following steps:<\/p>\n\n\n\n<p>1. Create file:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">\/app\/design\/frontend\/&lt;Vendor>\/&lt;theme>\/Plumrocket_SizeChart\/layout\/catalog_product_view.xml<\/code><\/pre><\/div>\n\n\n\n<p>2. In the created file put the code:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n    xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;move element=\"prsizechart\" destination=\"CONTAINER_OR_BLOCK_NAME\" after=\"-\"\/>\n    &lt;\/body>\n&lt;\/page><\/code><\/pre><\/div>\n\n\n\n<p><i>CONTAINER_OR_BLOCK_NAME &#8211; name of one of the containers or blocks on the product page. You can check them in the theme layout.<\/i><\/p>\n\n\n\n<p><i>Go to:<\/i><\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-arduino\">\/app\/design\/frontend\/&lt;Vendor>\/&lt;theme>\/Magento_Catalog\/layout\/catalog_product_view.xml<\/code><\/pre><\/div>\n\n\n\n<p><i>or:<\/i><\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">\/vendor\/magento\/module-catalog\/view\/frontend\/layout\/catalog_product_view.xml<\/code><\/pre><\/div>\n\n\n\n<p><i>after=&#8221;-&#8221; means that size chart block has been placed into container.<\/i><i>CONTAINER_OR_BLOCK_NAME after all the blocks.<\/i> <i>before=&#8221;-&#8221; can be used, if you need to place it before other blocks. Instead of &#8220;-&#8221; you can use name of specific block, if you need to place size chart before or after it.<\/i><\/p>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <p>This is the code you need to paste into the created file.<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"7\"><code class=\"language-markup\">&lt;?xml version=\"1.0\"?&gt;\n    &lt;layout version=\"0.1.0\"&gt;\n    \n        &lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n            xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\"&gt;\n            &lt;body&gt;\n                &lt;move element=\"prsizechart\" destination=\"alert.urls\" before=\"-\"\/&gt;\n            &lt;\/body&gt;\n        &lt;\/page&gt;\n    \n    &lt;\/layout&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<ol><li><strong>Size Chart button position on product page.<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_size_chart_developer_guide.jpg\" alt=\"Magento 2 size chart developer guide.jpg\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Placing Size Chart or Changing Position Manually The Magento 2 Size Chart extension allows putting the Size Chart button in any place on the page. In this case, or if the button does not show up, please follow the instructions below.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[279],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.2 (Yoast SEO v17.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento 2 Size Chart v3.x Developer Guide and API Reference - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"Placing Size Chart or Changing Position Manually The Magento 2 Size Chart extension allows putting the Size Chart button in any place on the page. In this\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Size Chart v3.x Developer Guide and API Reference\" \/>\n<meta property=\"og:description\" content=\"Placing Size Chart or Changing Position Manually The Magento 2 Size Chart extension allows putting the Size Chart button in any place on the page. In this\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-25T13:41:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-24T09:56:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_size_chart_developer_guide.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Magento 2 Size Chart v3.x Developer Guide and API Reference - Plumrocket Documentation","description":"Placing Size Chart or Changing Position Manually The Magento 2 Size Chart extension allows putting the Size Chart button in any place on the page. In this","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Size Chart v3.x Developer Guide and API Reference","og_description":"Placing Size Chart or Changing Position Manually The Magento 2 Size Chart extension allows putting the Size Chart button in any place on the page. In this","og_url":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide","og_site_name":"Plumrocket Documentation","article_published_time":"2021-06-25T13:41:18+00:00","article_modified_time":"2021-09-24T09:56:56+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_size_chart_developer_guide.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide#primaryimage","inLanguage":"en-US","url":"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_size_chart_developer_guide.jpg","contentUrl":"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_size_chart_developer_guide.jpg"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide","name":"Magento 2 Size Chart v3.x Developer Guide and API Reference - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide#primaryimage"},"datePublished":"2021-06-25T13:41:18+00:00","dateModified":"2021-09-24T09:56:56+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20"},"description":"Placing Size Chart or Changing Position Manually The Magento 2 Size Chart extension allows putting the Size Chart button in any place on the page. In this","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3\/devguide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Size Chart","item":"https:\/\/plumrocket.com\/magento-size-chart"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-size-chart"},{"@type":"ListItem","position":4,"name":"v3","item":"https:\/\/plumrocket.com\/docs\/magento-size-chart\/v3"},{"@type":"ListItem","position":5,"name":"Developer Guide"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","caption":"Plumrocket"},"sameAs":["https:\/\/plumrocket.com\/docs"]}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/19778"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=19778"}],"version-history":[{"count":8,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/19778\/revisions"}],"predecessor-version":[{"id":24402,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/19778\/revisions\/24402"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=19778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=19778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=19778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}