{"id":15848,"date":"2018-05-22T13:06:15","date_gmt":"2018-05-22T11:06:15","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=15848"},"modified":"2019-09-19T08:47:06","modified_gmt":"2019-09-19T06:47:06","slug":"displaying-tabs-with-attribute-values-on-magento-2-product-page","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html","title":{"rendered":"How to Display Tabs with Attribute Values on Magento 2 Product Page"},"content":{"rendered":"\n<p>While working on a new Magento 2 theme, one of our front end developers had a task to display the attribute value as a separate tab on the product page. This was something our team has never faced before, so we had to figure out the way to do it on the spot. In this article, we have decided to show you the solution we came up with while working on this issue.<\/p>\n<p><!--more--><\/p>\n<p>The expected result looks like this:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"lazy aligncenter wp-image-15860 size-full\" src=\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" data-src=\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/05\/image62.png\" alt=\"image6\" width=\"730\" height=\"305\" title=\"How to Display Tabs with Attribute Values on Magento 2 Product Page\"><\/p>\n<p>&nbsp;<\/p>\n<p>Attributes are attached to the Attribute Set and are filled for a product&nbsp;(click on the image to open it in full size):<\/p>\n<p><a href=\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/05\/image43.png\"><img decoding=\"async\" loading=\"lazy\" class=\"lazy aligncenter wp-image-15850 size-full\" src=\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" data-src=\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/05\/image43.png\" alt=\"image4\" width=\"1763\" height=\"984\" title=\"How to Display Tabs with Attribute Values on Magento 2 Product Page\"><\/a><\/p>\n<p>Our solution was to create a file <strong>catalog_product_view.xml<\/strong> in our own theme and a new template&nbsp;<b>customattribute.phtml<\/b> inside the theme to display the attribute value (of course it can be done using the module&rsquo;s approach, but we have done it inside the theme).<\/p>\n<p>Here is the location of the file (replace the red text with your own theme): <strong>design\/frontend\/BelVG\/MyTheme\/Magento_Catalog\/layout\/catalog_product_view.xml<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;?xml version=\"1.0\"?&gt;\r\n&lt;page layout=\"1column-full-width\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\"&gt; &nbsp;&nbsp;&lt;body&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;referenceBlock name=\"product.info.details\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block class=\"Magento\\Catalog\\Block\\Product\\View\" name=\"supplement_facts.tab\" template=\"Magento_Catalog::product\/view\/customattribute.phtml\" group=\"detailed_info\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;arguments&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument translate=\"true\" name=\"title\" xsi:type=\"string\"&gt;Supplement Facts&lt;\/argument&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument name=\"code\" xsi:type=\"string\"&gt;supplement_facts&lt;\/argument&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/arguments&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/block&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block class=\"Magento\\Catalog\\Block\\Product\\View\" name=\"faq.tab\" template=\"Magento_Catalog::product\/view\/customattribute.phtml\" group=\"detailed_info\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;arguments&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument translate=\"true\" name=\"title\" xsi:type=\"string\"&gt;Video Info&lt;\/argument&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument name=\"code\" xsi:type=\"string\"&gt;faq&lt;\/argument&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/arguments&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/block&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block class=\"Magento\\Catalog\\Block\\Product\\View\" name=\"additional_information.tab\" template=\"Magento_Catalog::product\/view\/customattribute.phtml\" group=\"detailed_info\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;arguments&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument translate=\"true\" name=\"title\" xsi:type=\"string\"&gt;Product Sheet&lt;\/argument&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument name=\"code\" xsi:type=\"string\"&gt;additional_information&lt;\/argument&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/arguments&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/block&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/referenceBlock&gt;\r\n&nbsp;&nbsp;&lt;\/body&gt;\r\n&lt;\/page&gt;<\/pre>\n<p>The key points of this xml are:<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>&lt;<\/strong><b>block <\/b><b>class<\/b><b>=&rdquo;Magento\\Catalog\\Block\\Product\\View&rdquo; <\/b><b>name<\/b><b>=&rdquo;supplement_facts.tab&rdquo; <\/b><b>template<\/b><b>=&rdquo;Magento_Catalog::product\/view\/customattribute.phtml&rdquo; <\/b><b>group<\/b><b>=&rdquo;detailed_info&rdquo;<\/b><strong>&gt; <\/strong><span style=\"font-weight: 400;\">where the <\/span><b>name <\/b><span style=\"font-weight: 400;\">&nbsp;should be unique; the <\/span><b>template <\/b><span style=\"font-weight: 400;\">should contain the location of the template responsible for rendering the attribute content; the <\/span><b>group<\/b><span style=\"font-weight: 400;\"> should be equal to <\/span><b>detailed_info<\/b><span style=\"font-weight: 400;\">;<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>&lt;<\/strong><b>argument <\/b><b>translate<\/b><b>=&rdquo;true&rdquo; <\/b><b>name<\/b><b>=&rdquo;title&rdquo; <\/b><b>xsi<\/b><b>:type<\/b><b>=&rdquo;string&rdquo;<\/b><strong>&gt;Supplement Facts&lt;\/<\/strong><b>argument<\/b><strong>&gt;<\/strong><span style=\"font-weight: 400;\"> is the name of the tab; notice that the name of the argument is &ldquo;title&rdquo;;<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>&lt;<\/strong><b>argument <\/b><b>name<\/b><b>=&rdquo;code&rdquo; <\/b><b>xsi<\/b><b>:type<\/b><b>=&rdquo;string&rdquo;<\/b><strong>&gt;supplement_facts&lt;\/<\/strong><b>argument<\/b><strong>&gt; <\/strong><span style=\"font-weight: 400;\">is the name of the attribute; notice that the name of the argument is &ldquo;code&rdquo;.<\/span><\/li>\n<\/ul>\n<p>Here is the location of the file (replace the red text with your own theme): <strong>design\/frontend\/BelVG\/MyTheme\/Magento_Catalog\/templates\/product\/view\/<br>\ncustomattribute.phtml<\/strong><\/p>\n<pre class=\"lang:php decode:true\">&lt;?php echo $block-&gt;escapeHtml($block-&gt;getProduct()-&gt;getData($this-&gt;getCode())); ?&gt;<\/pre>\n<p>This is where we get the product data based on the attribute code.<\/p>\n<p>Here is what we get as a result:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"lazy aligncenter wp-image-15861 size-full\" src=\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" data-src=\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/05\/image34.png\" alt=\"image3\" width=\"733\" height=\"257\" title=\"How to Display Tabs with Attribute Values on Magento 2 Product Page\"><\/p>\n<p>&nbsp;<\/p>\n<p>This is how you display tabs with attribute values using the theme method. If something is still unclear, please leave your questions in the comment section below.<\/p>\n<div class=\"module_in_content_container\"><a href=\"https:\/\/store.belvg.com\/product-tabs.html\" class=\"link_to_module\" target=\"_blank\" rel=\"noopener\"><\/a><div class=\"module_content\"><img src=\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/05\/product_tabs_m2_400.png\" width=\"400\" height=\"400\" alt=\"product_tabs_m2_400\" class=\"module_image\" title=\"How to Display Tabs with Attribute Values on Magento 2 Product Page\"><div class=\"module_content_part\"><h3 class=\"title\">Product Tabs for Magento 2<\/h3><p class=\"module_content_text\">Take your online store to the new level with this Magento 2 extension<\/p><a href=\"https:\/\/store.belvg.com\/product-tabs.html\" class=\"link_2_to_module\" target=\"_blank\" style=\"display:inline-block\" rel=\"noopener\"><span class=\"read-more\">Download here<\/span><\/a><\/div><\/div><\/div>\n<p>Want to upgrade your Magento store? Check out our&nbsp;<a href=\"https:\/\/store.belvg.com\/tabs.html\" target=\"_blank\" rel=\"noopener\">Tabs<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/store.belvg.com\/simple-product-tabs.html\" target=\"_blank\" rel=\"noopener\">Simple Product Tabs for Magento 2<\/a>.<\/p>\n\n","protected":false},"excerpt":{"rendered":"How to display tabs with attribute values on Magento 2 product page.","protected":false},"author":12,"featured_media":15856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[474,389,524],"tags":[],"class_list":["post-15848","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-ecommerce","category-magento2-development","category-magento-speed-optimization","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"A tutorial on displaying tabs with attribute values on Magento 2 product page: how to do it inside a theme instead of using the module&#039;s approach.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Aliaksandr Simonchik\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#article\",\"name\":\"Tabs with Attribute Values on M2 Product Page | BelVG Blog\",\"headline\":\"How to Display Tabs with Attribute Values on Magento 2 Product Page\",\"author\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/alex-simonchik#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/How_to_Display_Tabs_with_Attribute.jpg\",\"width\":770,\"height\":433},\"datePublished\":\"2018-05-22T13:06:15+02:00\",\"dateModified\":\"2019-09-19T08:47:06+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#webpage\"},\"articleSection\":\"ECOMMERCE, Magento 2 Development, Magento Speed Optimization, Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/belvg.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento2-development#listItem\",\"name\":\"Magento 2 Development\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento2-development#listItem\",\"position\":2,\"name\":\"Magento 2 Development\",\"item\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento2-development\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#listItem\",\"name\":\"How to Display Tabs with Attribute Values on Magento 2 Product Page\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#listItem\",\"position\":3,\"name\":\"How to Display Tabs with Attribute Values on Magento 2 Product Page\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento2-development#listItem\",\"name\":\"Magento 2 Development\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#organization\",\"name\":\"BelVG Blog\",\"description\":\"Magento and Prestashop articles\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/alex-simonchik#author\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/alex-simonchik\",\"name\":\"Aliaksandr Simonchik\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6553917a81b1da7866b8b875368df6cbbec56413c3438694df8539de7fb092c0?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Aliaksandr Simonchik\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#webpage\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html\",\"name\":\"Tabs with Attribute Values on M2 Product Page | BelVG Blog\",\"description\":\"A tutorial on displaying tabs with attribute values on Magento 2 product page: how to do it inside a theme instead of using the module's approach.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/alex-simonchik#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/alex-simonchik#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/How_to_Display_Tabs_with_Attribute.jpg\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html\\\/#mainImage\",\"width\":770,\"height\":433},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#mainImage\"},\"datePublished\":\"2018-05-22T13:06:15+02:00\",\"dateModified\":\"2019-09-19T08:47:06+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/\",\"name\":\"BelVG Blog\",\"description\":\"Magento and Prestashop articles\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Tabs with Attribute Values on M2 Product Page | BelVG Blog","description":"A tutorial on displaying tabs with attribute values on Magento 2 product page: how to do it inside a theme instead of using the module's approach.","canonical_url":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#article","name":"Tabs with Attribute Values on M2 Product Page | BelVG Blog","headline":"How to Display Tabs with Attribute Values on Magento 2 Product Page","author":{"@id":"https:\/\/belvg.com\/blog\/author\/alex-simonchik#author"},"publisher":{"@id":"https:\/\/belvg.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/05\/How_to_Display_Tabs_with_Attribute.jpg","width":770,"height":433},"datePublished":"2018-05-22T13:06:15+02:00","dateModified":"2019-09-19T08:47:06+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#webpage"},"isPartOf":{"@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#webpage"},"articleSection":"ECOMMERCE, Magento 2 Development, Magento Speed Optimization, Image"},{"@type":"BreadcrumbList","@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/belvg.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/category\/magento2-development#listItem","name":"Magento 2 Development"}},{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/category\/magento2-development#listItem","position":2,"name":"Magento 2 Development","item":"https:\/\/belvg.com\/blog\/category\/magento2-development","nextItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#listItem","name":"How to Display Tabs with Attribute Values on Magento 2 Product Page"},"previousItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#listItem","position":3,"name":"How to Display Tabs with Attribute Values on Magento 2 Product Page","previousItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/category\/magento2-development#listItem","name":"Magento 2 Development"}}]},{"@type":"Organization","@id":"https:\/\/belvg.com\/blog\/#organization","name":"BelVG Blog","description":"Magento and Prestashop articles","url":"https:\/\/belvg.com\/blog\/"},{"@type":"Person","@id":"https:\/\/belvg.com\/blog\/author\/alex-simonchik#author","url":"https:\/\/belvg.com\/blog\/author\/alex-simonchik","name":"Aliaksandr Simonchik","image":{"@type":"ImageObject","@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/6553917a81b1da7866b8b875368df6cbbec56413c3438694df8539de7fb092c0?s=96&d=mm&r=g","width":96,"height":96,"caption":"Aliaksandr Simonchik"}},{"@type":"WebPage","@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#webpage","url":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html","name":"Tabs with Attribute Values on M2 Product Page | BelVG Blog","description":"A tutorial on displaying tabs with attribute values on Magento 2 product page: how to do it inside a theme instead of using the module's approach.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/belvg.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#breadcrumblist"},"author":{"@id":"https:\/\/belvg.com\/blog\/author\/alex-simonchik#author"},"creator":{"@id":"https:\/\/belvg.com\/blog\/author\/alex-simonchik#author"},"image":{"@type":"ImageObject","url":"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/05\/How_to_Display_Tabs_with_Attribute.jpg","@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html\/#mainImage","width":770,"height":433},"primaryImageOfPage":{"@id":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html#mainImage"},"datePublished":"2018-05-22T13:06:15+02:00","dateModified":"2019-09-19T08:47:06+02:00"},{"@type":"WebSite","@id":"https:\/\/belvg.com\/blog\/#website","url":"https:\/\/belvg.com\/blog\/","name":"BelVG Blog","description":"Magento and Prestashop articles","inLanguage":"en-US","publisher":{"@id":"https:\/\/belvg.com\/blog\/#organization"}}]}},"aioseo_meta_data":{"post_id":"15848","title":"Tabs with Attribute Values on M2 Product Page | #site_title","description":"A tutorial on displaying tabs with attribute values on Magento 2 product page: how to do it inside a theme instead of using the module's approach.","keywords":null,"keyphrases":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-11-03 18:37:09","updated":"2026-11-03 18:37:09"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/belvg.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/belvg.com\/blog\/category\/magento2-development\" title=\"Magento 2 Development\">Magento 2 Development<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow to Display Tabs with Attribute Values on Magento 2 Product Page\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/belvg.com\/blog\/"},{"label":"Magento 2 Development","link":"https:\/\/belvg.com\/blog\/category\/magento2-development"},{"label":"How to Display Tabs with Attribute Values on Magento 2 Product Page","link":"https:\/\/belvg.com\/blog\/displaying-tabs-with-attribute-values-on-magento-2-product-page.html"}],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/posts\/15848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/comments?post=15848"}],"version-history":[{"count":0,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/posts\/15848\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/media\/15856"}],"wp:attachment":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/media?parent=15848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/categories?post=15848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/tags?post=15848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}