Override a Layout in Magento 2

Override a Layout in Magento 2

In this article I am going to explain what is a layout overriding and what is a basic difference from layout extending. So at first let’s figure out what is a layout in Magento. The structure of all pages is described in layout file. Basically, layout is a XML file, where page elements arrangement is assigned with a help of instructions and declarations. Here we are talking about containers (for example header, footer) and blocks ( for example search in header, newsletter in footer).

Depending on the role of layout file, we can divide them into the following types: page layout, page configuration and generic layout. Since the overriding mechanism is the same for all of this files, we call them just layout files. If you want to get more information about types of layout files, please follow the link.

There is a necessity to change layout files that usually comes during the building of a website. Theoretically, we can find and modify these files directly in the core or in the default Magento theme. But we highly recommend not to do this, because all the modifications could be erased by update files in case you upgrade Magento. To keep these files safe you should create them in extending and overriding layout files inside your current theme.

Some facts about extending layout file

Extending layout file is used for modifying of the default one, without replacing, but сhanging and amplifying it with the instructions. To create extending layout file for certain module you must create a folder in the directory of your theme and name it as a module, then create a folder with name layout, and only after place layout file that you want to extend into it.

For example to extend checkout_cart_index.xml file in Magento_Checkout module, we need to build the following structure:

Override a Layout in Magento 2

And right after you have created checkout_cart_index.xml file you can make required changes.

Creating overriding layout file

It would be enough to create extending layout file to make some small changes in default layout files. But in case of numerous changes it would be much easier to override existing layout file. To perform that you must create an overriding layout file in the directory of your theme. You can override base layouts and theme layouts as well. The mechanism is pretty similar, but there are some distinctions. So let’s consider concrete examples.

Creating overriding base layout file

For instance, we need to override base file checkout_cart_index.xml in Checkout_Module (Please see the picture below)

Override a Layout in Magento 2

For that we must create a file with the same name in our theme directory as follows:

Override a Layout in Magento 2

Similarly, it is possible to do for the other modules.

Creating overriding theme layout file

For example we need to override checkout_cart_index.xml file in Magento_Checkout module of parent theme.

Override a Layout in Magento 2

For that we must create a file with the same name in our theme directory as follows:

Override a Layout in Magento 2

Similarly, it is possible to do for the other modules.

Conclusion

Overriding layout files give ample opportunities for flexible configuration of the theme. However it should be used very carefully and only where it is really needed. Here are several recommendations that we want to share with you after all:

  • Use overriding in case you can not afford desirable effect through extending
  • Do not change names and aliases of blocks
  • Do not change handle inheritance


Post a new comment

top