{"id":3518,"date":"2019-11-07T16:04:31","date_gmt":"2019-11-07T10:34:31","guid":{"rendered":"https:\/\/magecomp.com\/support\/?post_type=manual_documentation&#038;p=3518"},"modified":"2020-10-20T18:09:38","modified_gmt":"2020-10-20T12:39:38","slug":"size-chart-frontend","status":"publish","type":"manual_documentation","link":"https:\/\/magecomp.com\/support\/docs\/magento-2-size-chart-extension\/size-chart-frontend\/","title":{"rendered":"Size Chart on frontend"},"content":{"rendered":"<p>Once you are all set with global, category specific and product specific size chart, you can see them on frontend. The size chart will prioritize from product to category to global means if you have set product specific chart, it will show rather than category chart set.<\/p>\n<p><strong>Global Size Chart in frontend:<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-9714\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/5_global-chart-on-frontend.jpg\" alt=\"global-chart-on-frontend\" width=\"1010\" height=\"613\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/5_global-chart-on-frontend.jpg 1010w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/5_global-chart-on-frontend-300x182.jpg 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/5_global-chart-on-frontend-768x466.jpg 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/5_global-chart-on-frontend-600x364.jpg 600w\" sizes=\"(max-width: 1010px) 100vw, 1010px\" \/><\/p>\n<p><strong>Category Specific Size Chart in frontend:<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9715\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/6_category-specific-size-chart.jpg\" alt=\"category-specific-size-chart\" width=\"1008\" height=\"585\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/6_category-specific-size-chart.jpg 1008w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/6_category-specific-size-chart-300x174.jpg 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/6_category-specific-size-chart-768x446.jpg 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/6_category-specific-size-chart-600x348.jpg 600w\" sizes=\"(max-width: 1008px) 100vw, 1008px\" \/><\/p>\n<p><strong>Product Specific Size Chart in frontend:<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9716\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/7_product-specific-size-chart.jpg\" alt=\"product-specific-size-chart\" width=\"1046\" height=\"557\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/7_product-specific-size-chart.jpg 1046w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/7_product-specific-size-chart-300x160.jpg 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/7_product-specific-size-chart-1024x545.jpg 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/7_product-specific-size-chart-768x409.jpg 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/7_product-specific-size-chart-600x320.jpg 600w\" sizes=\"(max-width: 1046px) 100vw, 1046px\" \/><\/p>\n<p><strong>Size Chart in Product Page content in frontend:<\/strong><\/p>\n<p>If you have set<strong> \u201cShow Size Chart in\u201d <\/strong>option to <strong>\u201cProduct Page Content\u201d<\/strong>\u00a0than size chart will be displayed in product view page content rather in popup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9717\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/8_size-chart-in-product-page-content.jpg\" alt=\"size-chart-in-product-page-content\" width=\"1255\" height=\"805\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/8_size-chart-in-product-page-content.jpg 1255w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/8_size-chart-in-product-page-content-300x192.jpg 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/8_size-chart-in-product-page-content-1024x657.jpg 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/8_size-chart-in-product-page-content-768x493.jpg 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/11\/8_size-chart-in-product-page-content-600x385.jpg 600w\" sizes=\"(max-width: 1255px) 100vw, 1255px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3507,"menu_order":4,"template":"","manualdocumentationcategory":[1999],"manual_doc_tag":[],"class_list":["post-3518","manual_documentation","type-manual_documentation","status-publish","hentry","manualdocumentationcategory-m2-size-chart"],"_links":{"self":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/3518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation"}],"about":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/3518\/revisions"}],"predecessor-version":[{"id":9718,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/3518\/revisions\/9718"}],"up":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/3507"}],"wp:attachment":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/media?parent=3518"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manualdocumentationcategory?post=3518"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_doc_tag?post=3518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}