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

p1-tiny

After Adding Custom Attribute

p2-tiny

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

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Request a Quote Today

Request a Quote

Leave a Reply

44 Comments on "How to Display Custom Attribute Value in Product View/List Page in Magento 2?"


Guest
Sri
1 month 5 days ago

its not working for me…………..

Guest
uday
3 months 21 days ago

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?

Guest
Vinay Suryawomshi
5 months 25 days ago

Hi, How do display Drop Down Attribute

Kavitha M
Guest
kavitha
4 months 28 days ago

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.

Guest
Mohana
7 months 18 days ago

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

Kavitha M
Guest
Kavitha M
7 months 15 days ago

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.

Guest
mohana
7 months 14 days ago

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.

Kavitha M
Guest
Kavitha M
7 months 8 days ago

Please check if you are using any other custom theme which overrides your catalog_product_view.xml

Guest
Moahana
7 months 17 days ago

Got the result . Thank you

Guest
Jayaprakash
1 year 1 month ago

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

Guest
Fred
1 year 3 months ago

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.

admin
Admin
1 year 1 month ago

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.

Guest
Atyk
1 year 2 months ago

Hi Fred, i search the same solution for a configurable product, have you find a solution ?

Guest
Wadel
1 year 3 months ago

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

Guest
Yagnik
1 year 5 months ago

Nice Article

Kavitha M
Author
1 year 5 months ago

Hi Yagnik,

Thanks for your appreciation.
Please subscribe to our blogs.

Guest
Darren Sutherland
1 year 6 months ago

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

Kavitha M
Author
1 year 6 months ago

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" >

Guest
Darren Sutherland
1 year 6 months ago

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

Kavitha M
Author
1 year 6 months ago

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" >

Kavitha M
Author
1 year 8 months ago

Hi,

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

Guest
Abid
1 year 9 months ago

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

Guest
Chirag Parmar
1 month 6 days ago

once again missing some code. So i put only missing code here

<span class="value" >

<?php endif;
}

Guest
Chirag Parmar
1 month 6 days ago

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.

Guest
Chirag Parmar
1 month 6 days ago

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;
}

Guest
Chirag Parmar
1 month 6 days ago

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;
}

Kavitha M
Author
1 year 8 months ago

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.

Kavitha M
Author
1 year 8 months ago

Hi Abid,

I am working on this.
Will get back to you.
Thanks for your comments.

Guest
Abid
1 year 9 months ago

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

Kavitha M
Author
1 year 8 months ago

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

Guest
Richard
2 years 3 months ago

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

Guest
vijay
2 years 5 months ago

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

admin
Admin
2 years 4 months ago

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.

Guest
Audex
2 years 7 months ago

Nice, but it does not work in Virtual Product 🙁

admin
Admin
2 years 7 months ago

Hi,

Thanks for your comments.
Let me discuss this with the author and get back to you.

admin
Admin
2 years 7 months ago

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.

Guest
Zeeshan Lakhani
2 years 9 months ago

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.

admin
Admin
2 years 9 months ago

Hi Zeeshan,
We will send the code as separate links today.
Thanks.

Guest
Zeeshan Lakhani
2 years 9 months ago

if i can get those in a separate link cause for some paste bin is blocked by my ISP.

admin
Admin
2 years 9 months ago

Hi Zeeshan,
We will the code as separate links today.
Thanks.

Guest
Zeeshan Lakhani
2 years 9 months ago

nevermind. LOL

Guest
Oleh
2 years 9 months ago

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

admin
Admin
2 years 9 months ago

Hi Oleh,

Thanks.
Keep visiting our blog page.

Guest
Genga Sree M B
1 year 3 months ago

very nice article. Great job 😀