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.
Leave a Reply
44 Comments on "How to Display Custom Attribute Value in Product View/List Page in Magento 2?"
its not working for me…………..
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?
Hi, How do display Drop Down Attribute
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.
I tried this blog as you given as same, but i didnot get the result in my magento 2.2 product page
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.
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.
Please check if you are using any other custom theme which overrides your catalog_product_view.xml
Got the result . Thank you
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
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.
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.
Hi Fred, i search the same solution for a configurable product, have you find a solution ?
Works great. Thanks. but how do i ensure it only appears on products in a specific attribute set?
Nice Article
Hi Yagnik,
Thanks for your appreciation.
Please subscribe to our blogs.
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
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" >
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
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" >
Hi,
you can get the values as usual like attribute values as getNrCars(); in .phtml file.
Please subscribe to our blogs.
Thanks.
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
once again missing some code. So i put only missing code here
<span class="value" >
<?php endif;
}
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.
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;
}
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;
}
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.
Hi Abid,
I am working on this.
Will get back to you.
Thanks for your comments.
confused with the path, some thing mssing .
app/design/frontend///Magento_catalog/layout/override/base/catalog_product_view.xml
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
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
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
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.
Nice, but it does not work in Virtual Product 🙁
Hi,
Thanks for your comments.
Let me discuss this with the author and get back to you.
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.
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.
Hi Zeeshan,
We will send the code as separate links today.
Thanks.
if i can get those in a separate link cause for some paste bin is blocked by my ISP.
Hi Zeeshan,
We will the code as separate links today.
Thanks.
nevermind. LOL
Thank you, very useful post, it helped me a lot and saved my time.
Hi Oleh,
Thanks.
Keep visiting our blog page.
very nice article. Great job 😀