How To Remove Search From Header In Magento 2
The main idea was to not distract the users on the checkout page who are on the verge of conversion. Sometimes your Magento 2 store may not need the search feature and the search form in your Magento 2 theme may interfere with the user experience and be a conversion killer in such a case.
So I also implemented the programmatic method to remove search from header in Magento 2. Likewise you can also remove menu from header in Magento 2 as a result to speed up your conversion process at the checkout.
Moreover, if you want to temporarily remove the search box from header in Magento 2 store to restrict the orders due to stock unavailability or crisis, the below method can be useful:
Method to remove search from header in Magento 2:
Add this code into XML where you want to remove the header:
For example remove from all the page then add to default.xml
app/code/[Vendor]/[Module]/frontend/layout/default.xml
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="header.container"> <referenceBlock name="top.search" remove="true"/> </referenceContainer> </body> </page> |
If you want to remove any specific page, for example, order success page then add this code to checkout_onepage_success.xml
app/code/[Vendor]/[Module]/frontend/layout/checkout_onepage_success.xml
|
1 2 3 4 5 6 7 8 |
<?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> <referenceContainer name="header.container"> <referenceBlock name="top.search" remove="true"/> </referenceContainer> </body> </page> |
That’s all.
Any doubts? Feel free to mention them in the Comments section below.
I’ll help you out.
Please share the post with fellow Magento developers via social media.
Thank you.
![Top 5 Must Have Magento 2 Extensions for Improved Customer Experience [2022]](https://meetanshi.com/blog/wp-content/uploads/2021/08/Top-5-Must-Have-Magento-2-Extensions-for-Improved-Customer-Experience.jpg)
4 Comments
Hi Sanjay,
This was useful and worked perfectly for me.
Thanks a lot
Hello Rajan,
Happy to help đŸ™‚
Hi,
I am not sure what to put on [Vendor]/[Module].
Can you give an example and be more precise?
Thanks !
Hello,
The above code is for a custom module. You need to place the code in the existing module. Please refer https://meetanshi.com/blog/magento-2-module-development/
If you are not using the custom module, you need to add the code in the theme’s path
If app/design/frontend/[ThemeFolderName]/[ThemeName]/Magento_Theme/layout/default.xml exists, add the below code and if not, create the default.xml and place this code:
Thank you.