How to create note field in system.xml Magento 2

Here, we will explain how to add note type field in system.xml file in magento 2. Additionally, we will explain how to show module package version with this note type field.

The system.xml file allows you to manage the Commerce system configuration. For detailed information about the system.xml file, you can also check the magento blog by clicking on

The system.xml file is located under etc/adminhtml/system.xml in a given Commerce 2 extension.

Field type reference

<field>-Tag can have the several values for the type="" attribute:

It is also possible to create a custom field type. This is often done when a special button, with an action, is required. To do this requires two main elements:

  • Creating a block in the adminhtml area
  • Setting the type="" to the path to this block

Here, we will explain only for the note type field. Let’s start the work. Please check our blog to know how to add custom module  configuration in Magento2.

  • First, create system.xml file.
    File Path: app/code/Webkul/Custom/etc/adminhtml/system.xml
<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
        <tab id="webkul" translate="label" sortOrder="10">
        <section id="test" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Test Configuration</label>
            <group id="custom_product_information" translate="label" type="text" sortOrder="700" showInDefault="1"
                showInWebsite="1" showInStore="1">
                <label>Custom module Product Information</label>
                <field id="author" translate="label" type="note" sortOrder="1" showInDefault="1" showInWebsite="1"
  • Now, create ModuleInfo.php block file.
    File Path: app/code/Webkul/Custom/Block/Adminhtml/System/Config/ModuleInfo.php

namespace WebkulCustomBlockAdminhtmlSystemConfig;

use MagentoBackendBlockContext;
use MagentoFrameworkModulePackageInfoFactory;

class ModuleInfo extends MagentoConfigBlockSystemConfigFormFieldHeading
     * @var PackageInfoFactory
    protected $packageInfoFactory;

     * Constructor
     * @param Context $context
     * @param PackageInfoFactory $packageInfoFactory
     * @param array $data
    public function __construct(
        Context $context,
        PackageInfoFactory $packageInfoFactory,
        array $data = []
    ) {
        $this->packageInfoFactory = $packageInfoFactory;
        parent::__construct($context, $data);

     * Render element html
     * @param MagentoFrameworkDataFormElementAbstractElement $element
     * @return string
    public function render(MagentoFrameworkDataFormElementAbstractElement $element)
        $label = $element->getLabel();

        $info = "<p>You can add any text/html here.</p>";
        $label .= $info;

        $packageInfo = $this->packageInfoFactory->create();
        $version = $packageInfo->getVersion('Webkul_Custom');
        $label .= '<p>'.__('Version: %1', $version).'</p>';

        return sprintf(
            '<tr class="system-fieldset-sub-head" id="row_%s"><td colspan="5"><h4 id="%s">%s</h4></td></tr>',

Now, It will be shown in the System configurations as below:

Related blogs

You can also check our other wonderful blogs related to the system configurations in magento2 with the following links:
1. How to create checkbox field in system configuration Magento 2: Click here
2. How to create a Button in Configuration Section in Magento 2: Click here
3. How to Create Radio button in Admin System Configuration in Magento 2: Click here
4. Create a dependant field in admin configuration in magento 2: Click here

Source link