Magento 2 Overriding Native Layout File

The layout can be considered as one of the core components as it represents a webpage design’s structure using an XML file where the user interface control is appropriately displayed. When you want to adjust your webpage with custom extension without messing things up in the Magento Core Files, overriding Native Layout File would be the best option for you in this situation.

In addition, in Magento 2, not all layout customizations can be performed by extending layouts. If the amount of customizations is too large, it’s better to use overriding. Overriding layout means that new files you created in the theme will be used instead of the layout files in the parent theme layout file of the base layout file.

Now let’s go into detailed instruction on how to override a native layout file in Magento 2.

Magento 2 Overriding Native Layout File

In particular, to override Magento base layout file, you will need to create a layout file .xml in the location which is mentioned below.

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/base
           |--<layout1>.xml
           |--<layout2>.xml

After you have located your file, the following layouts will be overriden by the file: <module_dir>/view/frontend/layout/<layout1>.xml <module_dir>/view/frontend/layout/<layout2>.xml

Magento 2 Override theme layouts

On the other hand, to override theme layouts, you can repeat the above step. However, this time your new layout file has to be located in another location, which is:

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/theme
            |__/<Parent_Vendor>
               |__/<parent_theme>
                  |--<layout1>.xml
                  |--<layout2>.xml

The following files will be overriden: <parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml <parent_theme_dir>/<Namespace>_<Module>/layout/<layout2>.xml

Please remember that your new layout files need to be named the same as the file’s name that you want to override.

Conclusion

Above I have just provided you the overriding Native Layout File method which allows you to adjust nice touches to your webpage without touching Magento Core Files. Hope it would be helpful for you. If you have any questions or new ideas, feel free to leave a comment below.