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

Magento 2, the next generation Magento 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 Product view/list page in Magento 2.

Below are the steps to create and show the attribute values in 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 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

Display the attribute value in 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 “More Infomation” tab.
If you want to display your attribute next to “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 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

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

READY TO DRIVE SALES?

Ready to drive online revenue

Get In Touch

Launching Magento 2 Extensions

By Jayakanth R . 4 min read

How to Add Custom Header and Footer Links in Magento 2?

By Gayathri S . 17 comments . 4 min read

46 thoughts on “How to Display Custom Attribute Value in Product View/List Page in Magento 2?”

Yeah says:

November 5, 2019 at 5:37 pm

awesome!

Reply
suresh says:

October 9, 2019 at 2:42 pm

Actually i am using magento 2.0 v its not working…..?

Reply
Sri says:

June 13, 2019 at 4:15 pm

its not working for me…………..

Reply
uday says:

March 27, 2019 at 9:54 pm

Hi Kavitha,
Great article, I need to achieve the following:
I need to capture custom measurments while buying a dress, so when a person clicks Buy now button I need to put up a popup which capture 3-4 measurments like waist, sholder.
I need to store this as part of order details. Any idea how I can achieve that?

Reply
Vinay Suryawomshi says:

January 23, 2019 at 5:58 pm

Hi, How do display Drop Down Attribute

Reply
1. kavitha says:
  
  February 20, 2019 at 5:08 pm
  
  Even the drop down attribute has stored for a particular product as a string value. you can use the same code and display at frontend.
  
  Reply
Mohana says:

November 30, 2018 at 4:53 pm

I tried this blog as you given as same, but i didnot get the result in my magento 2.2 product page

Reply
1. Moahana says:
  
  December 1, 2018 at 1:18 pm
  
  Got the result . Thank you
  
  Reply
2. Kavitha M says:
  
  December 3, 2018 at 8:51 pm
  
  Check whether the custom attribute is enabled and set the value “yes” to “visible on catalog pages on storefront” and “used in product listing” at the backend.
  
  Reply
  1. mohana says:
    
    December 4, 2018 at 4:10 pm
    
    yeah, i checked .it’s saved an Yes. now the custom attribute are getting. But i used to edit any changes in catalog_product_view.xml wishlist , social icon button and short description field are hidden.
    
    Reply
    1. Kavitha M says:
      
      December 11, 2018 at 9:21 am
      
      Please check if you are using any other custom theme which overrides your catalog_product_view.xml
      
      Reply
Jayaprakash says:

June 14, 2018 at 6:25 pm

Hi Kavitha,

I need a customs checkout form for specific product attribute how to add

our product medical prescriptions yes or no buttons if yes mean one form load and no mean another form loaded can you help me magento2

Reply
Fred says:

April 15, 2018 at 9:59 pm

Hi,

It works fine for simple products, however it does not work for configurable products.
I’m trying to show a custom attribute value to change dynamically just like the SKU number for a configurable product. I’ve tried many solution found on the net but none of them seem to work for a configurable.

Is there a solution for this?

Thank you.

Reply
1. Atyk says:
  
  April 27, 2018 at 2:54 pm
  
  Hi Fred, i search the same solution for a configurable product, have you find a solution ?
  
  Reply
2. admin says:
  
  May 21, 2018 at 12:08 pm
  
  Hi,
  
  Excuse us for the late reply.
  Go to the app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_catalog/layout/catalog_product_view.xml.
  Inside the XML, you will find the container name “product.info.main”. Add your custom block before closing the container and save the file.
  Please clear the cache in the backend and do a check. If everything’s done correctly, the custom attribute for configurable products will be shown.
  
  Thank you,
  Technical Team,
  DCKAP.
  
  Reply
Wadel says:

March 26, 2018 at 9:05 am

Works great. Thanks. but how do i ensure it only appears on products in a specific attribute set?

Reply
Yagnik says:

January 26, 2018 at 7:01 pm

Nice Article

Reply
1. Kavitha M says:
  
  February 4, 2018 at 7:31 pm
  
  Hi Yagnik,
  
  Thanks for your appreciation.
  Please subscribe to our blogs.
  
  Reply
Darren Sutherland says:

January 12, 2018 at 10:53 am

Hi

I have the file catalog_product_view.xml in the directory app/design/frontend///Magento_catalog/layout which is a different directory

Do I create the app/design/frontend///Magento_catalog/layout/override/base/catalog_product_view.xml file and directory?

Thank you

Reply
1. Kavitha M says:
  
  January 18, 2018 at 1:22 pm
  
  Hi,
  We assume you need to display custom attribute link in product detail page.
  To get the demolink before the Add to Cart Button, you can perform the following steps
  1.In the file app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_catalog/layout/catalog_product_view.xml,
  add the below code inside the “product.info.addtocart” block
  
  getDemoLink
  demo_link
  demo_link
  Demo Link
  itemprop=”demo_link”
  
  2.Then overwrite the vendor/magento/module-catalog/templates/product/view/addtocart.phtml in your theme folder as
  app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_Catalog/templates/product/view/addtocart.phtml
  and add the below code after the
  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);
  ?>
  
  <div class="value" >
  
  Reply
Darren Sutherland says:

January 12, 2018 at 9:47 am

Hi

I must be doing something wrong

Where in the app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_Catalog/templates/product/list.phtml file do I add. getDemoLink(); ?>

I would like it to be added just before the Add to Cart Button

Reply
1. Kavitha M says:
  
  January 18, 2018 at 1:22 pm
  
  Hi,
  We assume you need to display custom attribute link in product detail page.
  To get the demolink before the Add to Cart Button, you can perform the following steps
  1.In the file app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_catalog/layout/catalog_product_view.xml,
  add the below code inside the “product.info.addtocart” block
  
  getDemoLink
  demo_link
  demo_link
  Demo Link
  itemprop=”demo_link”
  
  2.Then overwrite the vendor/magento/module-catalog/templates/product/view/addtocart.phtml in your theme folder as
  app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_Catalog/templates/product/view/addtocart.phtml
  and add the below code after the
  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);
  ?>
  
  <div class="value" >
  
  Reply
Kavitha M says:

November 15, 2017 at 7:49 pm

Hi,

you can get the values as usual like attribute values as getNrCars(); in .phtml file.
Please subscribe to our blogs.
Thanks.

Reply
Abid says:

October 18, 2017 at 12:39 am

Okay – thank you!
this was really helpful.
BUT, what if I have two attributes e.g., car_model and car_year and I want to club them together into single line .e.g., it should show as
Suitable For : Toyota Corolla 2002-2010
where
Suitable For == attribute label
Toyota Corolla == car_model
2002-2010 == car_year

Reply
1. Kavitha M says:
  
  October 26, 2017 at 11:40 am
  
  Hi Abid,
  
  I am working on this.
  Will get back to you.
  Thanks for your comments.
  
  Reply
2. Kavitha M says:
  
  October 26, 2017 at 12:50 pm
  
  Hi Abid,
  
  If you want to display more than one custom attributes to be display in frontend, you can directly fetch it in demo.phtml like this,
  
  $carModel =$_product->getResource()->getAttribute(‘car_model’)->getFrontend()->getValue($_product);
  
  $carYear =$_product->getResource()->getAttribute(‘car_year’)->getFrontend()->getValue($_product);
  
  Now you have the values in $carModel,$carYear and display it as per your wish.
  
  Please let me know if this resolved your issue.
  Thanks.
  
  Reply
3. Chirag Parmar says:
  
  June 12, 2019 at 11:22 am
  
  Hello
  In demo.phtml file, you have to take array of attributes like this :
  $_helper = $this->helper(‘MagentoCatalogHelperOutput’);
  $_product = $block->getProduct();
  $_code = $block->getAtCode();
  $attributes = array(“car_model”, “car_year”);
  $_className = $block->getCssClass();
  $_attributeLabel = $block->getAtLabel();
  $_attributeType = $block->getAtType();
  $_attributeAddAttribute = $block->getAddAttribute();
  
  foreach ($attributes as $attribute) {
  if ($_attributeLabel ) {
  $_attributeLabel = $_product->getResource()->getAttribute($attribute)->getFrontendLabel();
  }
  $_attributeValue =$_product->getResource()->getAttribute($attribute)->getFrontend()->getValue($_product);
  
  :
  <span class="value" >
  
  <?php endif;
  }
  
  Reply
4. Chirag Parmar says:
  
  June 12, 2019 at 11:25 am
  
  In my previous reply, some text are missing. So i post once again.
  In demo.phtml file, you have to take array of attributes like this :
  $_helper = $this->helper(‘MagentoCatalogHelperOutput’);
  $_product = $block->getProduct();
  $_code = $block->getAtCode();
  $attributes = array(“car_model”, “car_year”);
  $_className = $block->getCssClass();
  $_attributeLabel = $block->getAtLabel();
  $_attributeType = $block->getAtType();
  $_attributeAddAttribute = $block->getAddAttribute();
  
  foreach ($attributes as $attribute) {
  if ($_attributeLabel ) {
  $_attributeLabel = $_product->getResource()->getAttribute($attribute)->getFrontendLabel();
  }
  $_attributeValue =$_product->getResource()->getAttribute($attribute)->getFrontend()->getValue($_product);
  
  :
  <span class="value" >
  
  <?php endif;
  }
  
  Reply
5. Chirag Parmar says:
  
  June 12, 2019 at 11:26 am
  
  once again missing some code. So i put only missing code here
  
  <span class="value" >
  
  <?php endif;
  }
  
  Reply
  1. Chirag Parmar says:
    
    June 12, 2019 at 11:31 am
    
    After span class=value, some code are automatically removed. After span class put echo $_attributeAddAttribute; and echo $_attributeValue; <?php endif; }
    
    Request to admin for this problem. Sorry for multiple comments.
    
    Reply
Abid says:

October 17, 2017 at 4:18 pm

confused with the path, some thing mssing .
app/design/frontend///Magento_catalog/layout/override/base/catalog_product_view.xml

Reply
1. Kavitha M says:
  
  October 26, 2017 at 11:39 am
  
  Hi Abid,
  Thanks for your comments.
  Please use this (enter your vendor name and theme name)
  app/design/frontend///Magento_catalog/layout/override/base/catalog_product_view.xml
  
  Reply
Richard says:

March 21, 2017 at 6:50 pm

Hi – thanks for this I have it working in 2.1.4 – I had to use this code for the product list page though…

productAttribute($_product, $_product->getDemoLink(), ‘demo_link’); ?>

Is there a way to pull in tier prices on to the product list page? I see tier_price is also in the attribute list but I am unsure of the syntax. Thanks

Reply
vijay says:

February 17, 2017 at 12:37 pm

Hi,very nice work and usefull.Can you post the article regarding how to add date picker at prodcut view/list or how to display any custom message at product view/list page in magento

Reply
1. admin says:
  
  February 21, 2017 at 3:52 pm
  
  Hi Vijay,
  
  Thanks for your comments. Sure. We will try to come up with the article which you have mentioned.
  Please subscribe to our blog.
  Thanks again.
  
  Reply
Audex says:

December 8, 2016 at 8:04 pm

Nice, but it does not work in Virtual Product 🙁

Reply
1. admin says:
  
  December 8, 2016 at 9:50 pm
  
  Hi,
  
  Thanks for your comments.
  Let me discuss this with the author and get back to you.
  
  Reply
  1. admin says:
    
    December 9, 2016 at 4:07 pm
    
    Hi,
    We checked for virtual products and it works fine without any issues. We suspect there may be some other customization which may affect your virtual products. Also, please check if you have assigned the “custom attribute” to right “attribute set” which connects with your virtual product.
    Please let us know if this resolves your issue. Thanks.
    
    Reply
Zeeshan Lakhani says:

October 17, 2016 at 6:19 pm

Hey for some reason my ISP is blocking all the iframes. Is it possible if I can get those link here or just the content inside link? I would really appreciate it.

Thank you.

Reply
1. Zeeshan Lakhani says:
  
  October 17, 2016 at 6:21 pm
  
  if i can get those in a separate link cause for some paste bin is blocked by my ISP.
  
  Reply
  1. Zeeshan Lakhani says:
    
    October 17, 2016 at 6:24 pm
    
    nevermind. LOL
    
    Reply
  2. admin says:
    
    October 18, 2016 at 10:49 am
    
    Hi Zeeshan,
    We will the code as separate links today.
    Thanks.
    
    Reply
2. admin says:
  
  October 18, 2016 at 10:48 am
  
  Hi Zeeshan,
  We will send the code as separate links today.
  Thanks.
  
  Reply
Oleh says:

October 7, 2016 at 1:26 am

Thank you, very useful post, it helped me a lot and saved my time.

Reply
1. admin says:
  
  October 17, 2016 at 10:56 am
  
  Hi Oleh,
  
  Thanks.
  Keep visiting our blog page.
  
  Reply
  1. Genga Sree M B says:
    
    April 13, 2018 at 7:23 pm
    
    very nice article. Great job 😀
    
    Reply