Magento 2: How to Display Custom Product Attribute in Product list / view page

You must display maximum product attributes in Product list / View page to provide as much information to customers about the product as possible. Every product has certain attributes and before buying a product, customers first see their attributes. Although Magento 2 provides a rich list of Product attributes by default, often times you may need to display other product specific attributes. This article explains in easy steps how to create and display custom product Attribute in Product View page.

Suppose you want to display Product warranty attribute on product view page, this attribute is not included in default Magento product attributes. To do so, you can follow the steps below.

Step 1: Create a new attribute ‘warranty’ in Magento back end under STORES->Attributes->Product.
Set the values to “YES” in “Visible on Product View Page on Front-end” and “Used in Product Listing” options under storefront Properties while creating the attribute to display it in Product list and view pages.

Step 2: Assign the new attribute ‘warranty’ to the default attribute set in STORES->Attributes->Attribute set.

Step 3: Now you will see the attribute while creating the products. You can give whatever value you want.

Step 4: Edit the catalog_product_view.xml file and update the following content. You can add this section inside the product.info.main container. You can add your block next to product.info.overview block. So it will be displayed next to the short description.

<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.demo" template="product/view/demo.phtml" after="-">
<arguments>

<argument name="at_call" xsi:type="string">getWarranty</argument>

<argument name="at_code" xsi:type="string">warranty</argument>

<argument name="css_class" xsi:type="string">warranty </argument>

<argument name="at_label" xsi:type="string">warranty </argument>

<argument name="add_attribute" xsi:type="string">itemprop="warranty "</argument>

</arguments>

</block>

Step 5: Create a new file warranty.phtml under mageno2root/vendor/magento/module-catalog/view/frontend/templates/product/view with the below content.

<?php

$_helper = $this->helper('Magento\Catalog\Helper\Output');

$_product = $block->getProduct();

$_code = $block->getAtCode();

$_className = $block->getCssClass();

$_attributeLabel = $block->getAtLabel();

$_attributeType = $block->getAtType();

$_attributeAddAttribute = $block->getAddAttribute();

 

if ($_attributeLabel && $_attributeLabel == 'default') {

$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();

}

$_attributeValue =$_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);

?>

<?php if ($_attributeValue): ?>

<div class="product attibute <?php echo $_className?>">

<?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php echo $_attributeLabel?></strong><?php endif; ?>

<div class="value" <?php echo $_attributeAddAttribute;?>><?php echo $_attributeValue; ?></div>

</div>

<?php endif; ?>

2 thoughts on “Magento 2: How to Display Custom Product Attribute in Product list / view page

Leave a Reply

Your email address will not be published. Required fields are marked *