Create and add custom product attribute to product view page

Create and Add Custom Attribute To Product View Page

Running short of time? Get PDF of the blog in your mail.

In this blog we will discuss how to create a custom product attribute and show it on the product view page similar to other product attributes like sku.

How to create custom product attribute and add it to product view page programmatically

Before starting this session, I recommend if you haven’t created any module in Magento 2 earlier then refer to the Hello World Module, to understand the request flow of Magento 2 refer to the Magento 2.0 request Flow and to understand the Magento 2 architecture refers to the Magento 2.0 Architecture.

Now, I hope you have the basic knowledge of Magento 2, so let’s begin with today’s task.

We have divided this blog into two sections, first we will see how to create a custom product attribute programmatically then we will see how can we show that attribute on product view page without overwriting any core file, so let’s start the quest.

1. Create a custom product attribute:

First, create an empty module then, create an app/code/Ced/HelloWorld/Setup/InstallData.php file in your module then, use the below code into it,

<?php 

namespace Ced\HelloWorld\Setup;

use Magento\Framework\Setup\ModuleContextInterface;

use Magento\Framework\Setup\ModuleDataSetupInterface;

use Magento\Framework\Setup\InstallDataInterface;

use Magento\Eav\Setup\EavSetupFactory;




class InstallData implements InstallDataInterface

{

  private $eavSetupFactory;




  public function __construct(EavSetupFactory $eavSetupFactory) {

      $this->eavSetupFactory = $eavSetupFactory;

  }




  public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)

  {




      /**** Attribute names and there data*****/

       /* [atr-Code, atr-group, atr-type, label, input, required,default] */




       $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

       $attributes = [

          ['name' => 'custom_attribute',

              'group' => 'Product Details',

              'type' => 'text',

              'label' => 'Custom Attribute',

              'class' => 'validate-number',

              'input' => 'text',

              'is_used_in_grid' => 1,

              'required' => true,

              'sort_order' => 20],

          /*can duplicate the array for more attributes*/

       ];

      foreach ($attributes as $key => $value) {

          $eavSetup->addAttribute(

              \Magento\Catalog\Model\Product::ENTITY,

              $value['name'],   /* Custom Attribute Code */

               [

                  'group' => $value['group'],/* Group name in which you want to display your custom attribute */

                  'type' => $value['type'],/* Data type in which formate your value save in database*/

                  'backend' => (isset($value['backend'])) ? $value['backend'] : '',

                  'frontend' => '',

                  'label' => $value['label'], /* lablel of your attribute*/

                  'input' => $value['input'],

                  'frontend_class' => ((isset($value['class'])) ? $value['class'] : ''),

                  'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,

                  'visible' => (isset($value['visible'])) ? $value['visible'] : true,

                  'required' => $value['required'],

                  'source' => (isset($value['source'])) ? $value['source'] : '',

                  'option' => (isset($value['option'])) ? $value['option'] : '',

                  'user_defined' => (isset($value['user_defined'])) ? $value['user_defined'] : false,

                  'sort_order' => 50,

                  'default' => (isset($value['default'])) ? $value['default'] : '',

                  'note' => (isset($value['note'])) ? $value['note'] : '',

                  'searchable' => true,

                  'filterable' => true,

                  'comparable' => true,

                  'visible_on_front' => false,

                  'used_in_product_listing' => true,

                  'unique' => false,

                  'is_used_in_grid' => (isset($value['is_used_in_grid'])) ? $value['is_used_in_grid'] : 0,

              ]

          );

      }
  }
}

After adding the above code in InstallData.php, run the commands given below:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy 

php bin/magento cache:clean

php bin/magento cache:flush

After running commands you will see that your custom attribute will be created.

2. Show the custom product attribute on the product view page:

To do this, create a layout file Ced/HelloWorld/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>

    <page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" 
           xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

           <body>

            <referenceContainer name="product.info.main">

                <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.custom_attribute"

                  template="Magento_Catalog::product/view/attribute.phtml" after="product.info.sku">

                    <arguments>

                        <argument name="at_call" xsi:type="string">getCustomAttribute</argument>

                        <argument name="at_code" xsi:type="string">custom_attribute</argument>

                        <argument name="css_class" xsi:type="string">custom_attribute</argument>

                        <argument name="at_label" xsi:type="string">default</argument>

                        <argument name="add_attribute" xsi:type="string">itemprop="custom_attribute"</argument>

                    </arguments>

                </block>

            </referenceContainer>

        </body>

</page>

Now run the below two commands for clearing cache and then reload the product page,

php bin/magento cache:clean

php bin/magento cache:flush

That’s it from our end. We hope that this blog will be helpful for you in creating a custom product attribute and you can easily add it to the product view page programmatically.