Magento 2 create a theme extending file or override a layout

Rather than copy extensive page layout or page configuration code and then modify what you want to change, in the Magento system, you only need to create an extending layout file that contains the changes you want.

To add an extending page configuration or generic layout file:

  1. Put the layout file in the following location:
<theme_dir>
 |__/<Namespace>_<Module>
   |__/layout
     |--<layout1>.xml
     |--<layout2>.xml

For example, to customize the layout defined in <Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml, you need to add a layout files with the same name in your custom theme, like following:

<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

To add an extending page layout file:

  1. Put the file in the following location:
<theme_dir>
 |__/<Namespace>_<Module>
   |__/page_layout
     |--<layout1>.xml
     |--<layout2>.xml

Magento 2 override a layout

Not all layout customizations can be performed by extending existing layouts. If the amount of customizations is large, you can use the overriding function for the needed layout file. This means that the new file that you place in the theme will be used instead of the parent theme layout file of base layout file.

In this article, page layouts, page configurations, and generic layouts are referred to as layout files, as the mechanism of overriding is similar for all of them.

Layout files with instructions that override the default or parent theme files are referred to as overriding layout files.

Examples of customizations that involve overriding layouts

Examples of customizations that involve overriding layouts:

  • Suppressing method invocation.

    Overriding is not necessary if a block has a method that cancels the effect of the originally invoked method. In this case, you can customize the layout by adding a layout file where the canceling method is invoked.

  • Modifying method arguments.
  • Canceling block/container removal using the remove attribute.
  • Setting XML attributes of blocks and containers.

    Certain attributes, like htmlClass, htmlId, label attributes can be changed in extending layouts.

  • Removing block arguments.
  • Modifying and suppressing handles inclusion.
  • Removing all handle instructions by declaring an overriding layout file with an empty handle.

How to override a Magento2 layout

This section discusses how to override:

Override Magento2 base layouts

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

  1. 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

Override Magento2 theme layouts

To add an overriding theme file (to override a parent theme layout):

  1. Put a layout file 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/<layout1>.xml

To override page layout files, use ‘page_layout’ directory name instead of ‘layout’

Magento 2 Customization mistakes

Although the layout overriding mechanism provides great customization flexibility, it’s possible to use it to add logically irrelevant changes. We strongly recommend you not make the following changes:

  • Changing block name or alias. The name of a block should not be changed, and neither should the alias of a block remaining in the same parent element.
  • Changing handle inheritance. For example, you should not change the page type parent handle.
0 Likes
783 Views

You may also like

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter message.