Use code MAG25 to get $25 off! Limited time offer on Cloudways Magento hosting.
AVAIL NOW

How to Override Block in Magento 2

Many of our users and readers send queries on how to override block in Magento 2 since editing core files is not a recommended practice. In this guide, I’m going to answer all those queries.

I am going to teach you how to override blocks in Magento 2, but before starting the tutorial, let’s understand what a block is?

What is a Block?

The PHP classes used to connect or create a link between layout and templates are called Blocks. As a class, it is a set of methods that handle and controls the Magento UI Blocks. It has the following features:

  • A block can have more blocks.
  • A block can be utilize in different pages and blocks.

Now I hope you understand the concept of Magento 2 Blocks. Now it’s time to start working on rewriting a Magento 2 Block. For this, I will override Magento 2 Contact Form block.

You need to create a custom module to override block in Magento 2. If you are not familiar, then first check out this guide: How to Create a Module in Magento 2.

Now let’s begin!

Create Directories

directories structure

Configure Module

Create module.xml in app/code/Magenticians/Modulecontact/etc and add the following code to it:

Register Module

Create registration.php in app/code/Magenticians/Modulecontact and add this code to it:

Override di.xml File

Now I will override di.xml file. Create di.xml in app/code/Magenticians/Modulecontact/etc and add this code to it:

In <preference for=””> I have added which block I want to override and in <preference type=””>  I have mentioned where to override it.

Override Contact Form

It’s time to override contact form. Create ContactForm.php in app/code/Magenticians/Modulecontact/Block and add this code in it:

In the code above I have created a function getText().

The block is now overridden and to show its output on the frontend, a template file is required. To do so, override form.phtml and contact_index_index.xml files.

Override contact_index_index.xml

Create contact_index_index.xml in app/code/Magenticians/Modulecontact/view/frontend/layout and add this code to it:

In the code above, <referenceBlock name="contactForm" remove="true"/>  is added to remove the original contact form so that I can show only the new overridden Contact Form.

Override form.phtml

Go to vendor/magento/module-contact/view/frontend/templates from the root directory of your store and copy the form.phtml file to  app/code/Magenticians/Modulecontact/view/frontend/templates. Now you just need to update the form.phtml by adding this code:

<?php echo $block->getText(); ?>

The final form.phtml will looks like this:

I have added <?php echo $block->getText(); ?>  under <div class="field note no-label">  in order to display it in a clear and decent format.

Run Commands

Go to the root directory of your store and run the following commands:

Result

Launch your store and go to the contact form and you will see the desired result:

result block override magento 2

Final Words

After following this guide, you should be able to override block in Magento 2. You can override more blocks with the same approach as mentioned in the guide and utilize them according to your needs. Want to discuss something regarding this guide? Just use the comment box below and I will get back to you!

About Author

Syed Muneeb Ul Hasan is an expert in PHP and Magento, he prefers to educate users in implementing and learning Magento. When not working, he loves to watch cricket.