In order to do add your custom attributes to the product detail page, you must:
- Set up a custom attribute in the admin,
- Configure your custom attribute to display on the product page,
- Add your custom attribute to your product's attribute set,
- Add content to the attribute on your product's edit page.
Note the attribute code of your custom attribute.
Once that is complete, if not already setup, you must set up a custom theme:
Create theme: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-create.html
Once your theme is created, applied and configured, add the following folder to your custom theme:
[theme] / Magento_Catalog / layout
Create the following file:
[theme] / Magento_Catalog / layout / catalog_product_view.xml
Examine the following file:
vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
Determine which container you would like to display your custom attribute within and note the name of the container. We will use the name of the container in order to reference the container in the catalog_product_view.xml file.
i.e. <referenceContainer name="content">
or <referenceContainer name="product.info.main">
or <referenceContainer name="add-container-name-here">
Place this code within catalog_product_view.xml, replacing {attributeCode} with your custom attribute code:
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="product.info.main">
<block class="Magento\Catalog\Block\Product\View" name="product.attribute.{attributeCode}" template="Magento_Catalog::product/view/attribute.phtml">
<arguments>
<argument name="at_call" xsi:type="string">get{attributeCode}</argument>
<argument name="at_code" xsi:type="string">{attributeCode}</argument>
<argument name="at_label" xsi:type="string">Any Custom Attribute Label</argument>
<argument name="css_class" xsi:type="string">Any CSS Class Name</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
Flush cache & deploy static resources (you may also need to run indexer).
This will display the attribute using the default Magento 2 attribute template.
If you would like to use a custom template to display your custom attribute, use this code within the catalog_product_view.xml file:
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="product.info.main">
<block class="Magento\Catalog\Block\Product\View" name="product.attribute.custom" template="Magento_Catalog::product/view/attribute/custom.phtml">
<arguments>
<argument name="title" translate="true" xsi:type="string">Your Custom Attribute Title</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
Add the following folder to your custom theme:
[theme] / Magento_Catalog / templates / product / view / attribute
Create the following file:
[theme] / Magento_Catalog / templates / product / view / attribute / custom.phtml
Add the following code to custom.phtml, replace {attributeCode} with your custom attribute code:
<?php
$product = $block->getProduct();
$attrData = $product->getData('{attributeCode}');
$blockTitle = $this->getData('title');
if (trim($attrData) !== "") : ?>
<div class="product-full-width-section">
<h2 class="product-section-title"><?= $blockTitle; ?></h2>
<?php echo $attrData; ?>
</div>
<?php endif; ?>
Adjust the HTML code, as needed.
Flush cache & deploy static resources (you may also need to run indexer).