Magento 2 Move remove block layout
Today we talk about how in Magento 2 move remove block layout. This tutorial includes how to remove block, how to move container and how to remove container.You can move block from one container to another but using the move handle. Same as you can remove any block with remove handle. First we will show the example how we remove the breadcrumbs block. Use the handle of referenceBlock and add the name reference you want to remove. You can check the layout files where the breadcrumbs block is define.
Remove Block
Now we add example code in our default.xml or you want to remove for any specific page block then add his layout file. Now you can remove breadcrumbs by simply adding this code.
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email qaisarssatti@gmail.com
*
*/ -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="breadcrumbs" remove="true"/>
</body>
</page>
You can use this example to remove any block.
Remove Container
Now we add example code in our default.xml or you want to remove for any specific page container then add his layout file. Now you can remove page.top by simply adding this code.
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email qaisarssatti@gmail.com
*
*/ -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="page.top" remove="true"/>
</body>
</page>
You can use this example to remove any block.
Move Block
For moving the block from one container to another. Just add element Name in my example i am moving the page.top block to store.menu.container. Now below is example code.
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email qaisarssatti@gmail.com
*
*/ -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<move element="page.top" destination="store.menu.container" before="-" />
</body>
</page>
You can use this example to move any block
Qaisar Satti
Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!
