Skip to main content
General

How to Display Custom Attribute Value in Product View/List Page in Magento 2?

By |March 2, 2016 February 8th, 2022No Comments

Magento 2, the next generation Magento service platform, has numerous enhancements and has addressed issues that have emerged over the years.

How to Display Custom Attribute

This article explains how to display custom attribute value in the Product view/list page in Magento 2.

Below are the steps to create and show the attribute values in the product details page and list page.

Step 1:

Create a new attribute ‘demo_link’ in Magento backend under STORES->Attributes->Product.

To Display, the new attribute in List Page, set the value “YES” to “Used in Product Listing” under storefront Properties while creating the attribute.

Step 2:

Assign the newly created Attribute to Default attribute set in STORES->Attributes->Attribute Set.

Step 3:

Now you can see the attribute ‘demo_link’ in the manage product section. You can enter the appropriate value.

Note: It is assumed that you know how to create and assign the attribute to the attribute set. This article does not provide those details.

Step 4:

To display the attribute value in product list page, add the below code in app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_Catalog/templates/product/list.phtml

code-audit

Display the attribute value in the Product View Page

To Display the new attribute in View Page, you can set the value “YES” to “Visible on Catalog Pages on Storefront” under storefront Properties from the backend. It will display your attribute under the “More Infomation” tab.
If you want to display your attribute next to the “Add to Cart” button then you need to follow the below steps.

Step 5:

Override the catalog_product_view.xml to include the attribute in your view page by creating the new theme structure.
For creating theme structure refer http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

As a further step in the process, it is essential that you add the below code in app/design/frontend///Magento_catalog/layout/override/base/catalog_product_view.xml

You can add this section inside the product.info.main container. You can add your block next to the product.info.overview block. This will be displayed next to the short description.

Step 6 :

As the next step in the process, it is necessary to create a new ” demo.phtml” file under app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_Catalog/templates/product/view/ with the below code

That’s it. Now you will be able to view the attribute value in product view page.

Before Adding Custom Attribute

After Adding Custom Attribute

custom-attribute

Hope the blog helped you to understand how to create custom attribute value in Product View/List Page.

Magento development service includes its features that involves technical understanding in Magento 2. Learn how to add custom attribute value to product viewlist page in Magento 2

Kavitha M

Author Kavitha M

Kavitha is a Certified Magento Developer Plus Software Developer at DCKAP. A typical Gen Z, she has a great amount of drive and works hard . For her , coding is as much fun as it is work. Loves chess and traveling.

More posts by Kavitha M

Discover What You’re Missing

Get the weekly email full of actionable ideas and insights you can use at work and home.