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

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


Guest
Jayaprakash
5 months 1 day 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
7 months 20 hours 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
5 months 26 days 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
6 months 20 days ago

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

Guest
Wadel
7 months 21 days ago

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

Guest
Yagnik
9 months 20 days ago

Nice Article

Kavitha M
Author
9 months 11 days ago

Hi Yagnik,

Thanks for your appreciation.
Please subscribe to our blogs.

Guest
Darren Sutherland
10 months 4 days 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
9 months 29 days 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
10 months 4 days 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
9 months 29 days 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 22 hours 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 29 days 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

Kavitha M
Author
1 year 21 days 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 21 days ago

Hi Abid,

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

Guest
Abid
1 year 30 days 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 21 days 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
1 year 7 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
1 year 8 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
1 year 8 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
1 year 11 months ago

Nice, but it does not work in Virtual Product 🙁

admin
Admin
1 year 11 months ago

Hi,

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

admin
Admin
1 year 11 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 29 days 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 29 days ago

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

Guest
Zeeshan Lakhani
2 years 29 days ago

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

admin
Admin
2 years 29 days ago

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

Guest
Zeeshan Lakhani
2 years 29 days ago

nevermind. LOL

Guest
Oleh
2 years 1 month ago

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

admin
Admin
2 years 30 days ago

Hi Oleh,

Thanks.
Keep visiting our blog page.

Guest
Genga Sree M B
7 months 2 days ago

very nice article. Great job 😀