1/ What is Magento 2 Core Layout?

The basic components of a page are layouts, containers, and blocks. A layout represents the structure of a web page. Containers represent the placeholders within that web page structure. And blocks represent the UI controls or components within the container placeholders.

In this blog, We are going to explain how to override Magento 2 layout. A layout xml file in Magento 2 describes the page structure.

It is highly recommended that you should override layout files when you want to completely remove the use of the core’s layout files and define your own layout.

Do NOT rewrite Magento 2 core files. To keep your modification safe, you should override or extend layout files in your custom theme.

2/ 2 types of Magento 2 Core Layout: Base and Theme Layout

Magento 2 layouts are divided into two types of layouts: Base layout and Theme layout. This is the main differences between them.

2.1/ Base Layout

Base layout files are provided by the module. We can find these files on this path: 

  • Configurations and general layout files: {module_dir}/view/frontend/layout/
  • Page layout files: {module_dir}/view/frontend/page_layout/

2.2/ Theme Layout

Theme layouts are provided by Magento themes. We can find them on this path:

  • Configurations and general layout files: {theme_dir}/Namespace_Module/layout/
  • Page layout files: {theme_dir}/Namespace_Module/page_layout/

3/ Override a Core Layout

When we perform customization, we can override the layouts, which means the new files that you placed in the theme will be used instead of the parent theme layout files or base layout files.

3.1/ Override Base Layout

To add an overriding base layout file (to override a base layout provided by the module):

Put a layout file with the same name in the following location:

<theme_dir>

  |__/<Namespace_Module>

     |__/layout

       |__/override

          |__/base

            |--<layout1>.xml

            |--<layout2>.xml

These files override the following layouts:

  • <module_dir>/view/frontend/layout/<layout1>.xml
  • <module_dir>/view/frontend/layout/<layout2>.xml

For example:

  • <theme_dir>/Magento_Customer/layout/override/base/default.xml will override
  • vendor/magento/module-customer/view/frontend/layout/default.xml (or app/code/Magento/Customer/view/frontend/layout/default.xml if you use github version)

3.2/ Override Theme Layout

To override a parent theme layout:

Put the layout files with the same name in the following location:

<theme_dir>

  |__/<Namespace_Module>

     |__/layout

       |__/override

         |__/theme

             |__/<Parent_Vendor>

                |__/<parent_theme>

                   |--<layout1>.xml

                  |--<layout2>.xml

These files override the following layouts:

  • <parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
  • <parent_theme_dir>/<Namespace>_<Module>/layout/<layout2>.xml

To override page layout files, use the page_layout directory name instead of layout.

4/ Conclusion

Overriding layout files creates a favorable condition for theme customization. However, you need to remember that the overridden layout file is not affected by any changes to the main files, which in turn can lead to problems in future when upgrading Magento 2 if you do not check carefully the files being updated.

Therefore, overriding should be used very carefully and only where it is really necessary and you can not do without it.

Thank you for reading Magenest blog. We hope that this article can help you with overriding layouts.