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

Optimize Your Store by Magento 2

Our Magento-certified experts come up with best-in-class solutions to improve conversions, increase sales and also provide a great user experience.

Get a Quote

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?

Ready to drive online revenue

Get In Touch

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

  1. 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?

    1. 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.

    1. 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.

      1. 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.

  2. 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

  3. 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.

    1. 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.

  4. 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

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

  5. 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

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

  6. Hi,

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

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

    1. 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.

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

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

      1. 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.

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

    1. 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

  9. 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

  10. 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

    1. 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.

      1. 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.

  11. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *