How to Conditionally Remove Block From Layout in Magento 2

Magento 2 Chirag Updated on April 13, 2020

Magento 2 Pages are built upon the layout XML files. Those XML files contain Containers and those Containers are wrap blocks inside them. Sometimes as per business logic, we have to hide or remove those blocks from the layout. There are two methods of removing the block from the layout in Magento 2.

Remove Block From Layout using XML File
Conditionally Remove Block From Layout using Event Observer

In this post, we will first see how we can remove the block from rendering using an XML file. And then we will see how to conditionally remove a block from a layout using an observer. The second method is useful when you want to remove some blocks if some condition matches.

Remove Block From Layout using XML File

One of easiest method to remove block from layout is just removed it from layout XML file. The syntax is like below

<referenceBlock name="block_name" remove="true"/>

Here you just need to pass the block name. For example, you want to remove the wishlist link from the sidebar on the customer account page. Then you need to override the customer_account.xml file into your theme or module and insert the below code in that file.

<?xml version="1.0"?>
<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="customer-account-navigation-wish-list-link" remove="true"/>
    </body>
</page>

Conditionally Remove Block From Layout using Event Observer

Sometimes you would like to conditionally remove block from layout. In that case you have to use Magento 2 event layout_generate_blocks_after. For example you would like to remove wishlist link for certain customer group only. To do this,
Step 1: Define the event in events.xml file.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
 <event name="layout_generate_blocks_after">
        <observer instance="Codextblog\Demo\Observer\Frontend\Removeblocks" name="codextblog_layout_generate_blocks_after"/>
 </event>
</config>

Step 2: Define Observer file Removeblocks.php and add below code in file.

<?php

namespace Codextblog\Demo\Observer\Frontend;

use Magento\Framework\Event\ObserverInterface;

class Removeblocks implements ObserverInterface
{
    public function execute(Observer $observer)
    {
       //your condition here
       $layout = $observer->getLayout();
       $layout->unsetElement('customer-account-navigation-wish-list-link');
    }
}

Based on your business logic, you can select either way of remove block from the layout in Magento 2. Feel free to write a comment if you face any difficulty while implementing any of above approaches. I’d be happy to help you to achieve your task.

(2 Comments)

Jane July 15, 2021

Hi
I have used “Conditionally Remove Block From Layout using Event Observer” and it works . But I am struct with one issue. Actually the scenario is that When the customer is not logged in then i have to hide some header blocks (which is achieved by following your code). But when I logged in I want to show those header blocks. Problem is that those blocks are getting cached so even after I logged in or navigate to some pages after logging those blocks aren’t visible. Can you please suggest how i can achieve this. Thanks in Advance.

Chirag July 24, 2021

I think after logging you should navigate customer to non cache page so that it is removed from cache and then after customer navigate to any pages they will get the updated header blocks.

Dedicated Magento 2 Blog