Displaying Custom Product Attribute on Product Page

Whenever we create a custom product attribute, we might need to show it on the product page. It can be shown in two forms:

  1. In existing product tab (in More Information tab)
  2. In new tab (by adding a new one)

1. In Existing Product Tab

To show an attribute in More Information tab, you need to set Visible on Catalog Pages on Storefront to yes for the attribute.

After this, you will be able to see the attribute as shown here:

2. In new tab

Sometime we might need to add a new tab and show the attribute value in that (mainly for the attributes of type Text Area or if any customization is required in how the value is getting shown). In this case, we need a custom module or theme. Just follow these basic steps:

Note: We will be using an attribute with name Test Attribute and code test_attribute for reference. You may do the modification based on your attribute

  1. Create app/code/Vendor/ModuleName/view/frontend/layout/catalog_product_view.xml or app/design/frontend/Vendor/ThemeName/Magento_Catalog/layout/catalog_product_view.xml as per your requirement
  2. Then add this code to the file:
    <?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">
     <referenceBlock name="product.info.details">
     <block class="Magento\Catalog\Block\Product\View\Description" name="product.test_attribute" template="product/view/attribute.phtml" group="detailed_info">
     <argument name="at_call" xsi:type="string">getTestAttribute</argument>
     <argument name="at_code" xsi:type="string">test_attribute</argument>
     <argument name="css_class" xsi:type="string">test_attribute</argument>
     <argument name="at_label" xsi:type="string">none</argument>
     <argument name="title" translate="true" xsi:type="string">Test Attribute</argument>
  3. It should be noted that we are using method call getTestAttribute as the attribute code is test_attribute. Modify it as per the requirement
  4. Save the file and that’s it. The attribute will be shown on Product page in new tab as shown here: