How to Add a Category Attribute with WYSIWYG editor in Magento 2


Magento 2 category entity provides a number of attributes by default. Still, we need a custom attribute sometimes to improve the functionality of category. Today we will see How to add a category attribute with WYSIWYG editor in Magento 2.

To add a custom attribute into the system first we need to create either an Install or an Upgrade Data script.

Create InstallData file

Create InstallData.php file under app/code/Vendor/Module/Setup directory and add below code.

namespace Codextblog\Categoryattr\Setup;

use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;

class InstallData implements InstallDataInterface

    private $eavSetupFactory;

     * Constructor
     * @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory
    public function __construct(EavSetupFactory $eavSetupFactory)
        $this->eavSetupFactory = $eavSetupFactory;

     * {@inheritdoc}
    public function install(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

                'type' => 'text',
                'label' => 'Promotion Text',
                'input' => 'textarea',
                'sort_order' => 333,
                'source' => '',
                'global' => 1,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => null,
                'wysiwyg_enabled' => true,
                'is_html_allowed_on_front' => true,
                'group' => 'General Information',
                'backend' => ''

In this file, we have added a promotion_text attribute into the system. Once you run this script it will create an attribute in the eav_attribute table.

Now we have to create ui_component of this attribute, which tells Magento to add this attribute into category form.

Create category_form ui component file

Create category_form.xml file under app/code/Vendor/Module/view/adminhtml/ui_component directory with below code.

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi=""
	<fieldset name="general">
		<field name="promotion_text">
			<argument name="data" xsi:type="array">
				<item name="config" xsi:type="array">
					<item name="class" xsi:type="string">Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg</item>
					<item name="formElement" xsi:type="string">wysiwyg</item>
					<item name="label" xsi:type="string" translate="true">Promotion Text</item>
					<item name="wysiwygConfigData" xsi:type="array">
						<item name="settings" xsi:type="array">
							<item name="theme_advanced_buttons1" xsi:type="string">bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code</item>
							<item name="theme_advanced_buttons2" xsi:type="boolean">false</item>
							<item name="theme_advanced_buttons3" xsi:type="boolean">false</item>
							<item name="theme_advanced_buttons4" xsi:type="boolean">false</item>
							<item name="theme_advanced_statusbar_location" xsi:type="boolean">false</item>
						<item name="files_browser_window_url" xsi:type="boolean">false</item>
						<item name="height" xsi:type="string">100px</item>
						<item name="toggle_button" xsi:type="boolean">false</item>
						<item name="add_variables" xsi:type="boolean">false</item>
						<item name="add_widgets" xsi:type="boolean">false</item>
						<item name="add_images" xsi:type="boolean">false</item>
					<item name="template" xsi:type="string">ui/form/field</item>
					<item name="source" xsi:type="string">category</item>
					<item name="wysiwyg" xsi:type="boolean">true</item>
					<item name="dataScope" xsi:type="string">promotion_text</item>
					<item name="sortOrder" xsi:type="number">33</item>
					<item name="rows" xsi:type="number">8</item>

After adding this code you should see the category attribute with WYSIWYG editor in category edit form.

Note: To display WYSIWYG editor, Please make sure WYSIWYG Options are enable from Magento 2 admin > Store > Configuration > General > Content Management section.

Hope this post helps you.To receive update about this type of code snippet, please like us on Facebook and follow us on Twitter.

Want to ask a question or leave a comment?

Leave a Comment

(1 Comment)

  • sanjeev

    How to show this attribute value in frontend

  • All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

    Was this post helpful? Please support Us!

    Follow us on twitter or Like us on facebook.


    To Avoid Spam Downloads, We Want Your Email

    We will send you download link right
    away. Please submit form below.

    Increase Your
    Magento 2

    Get Weekly Tutorial
    to your Inbox
    Subscribe Me
    Subscribe Here