Change Default Search Placeholder Text in Magento 2

So in this article, I am going to explain how we can replace Magento 2 Search placeholder text in the search box. So in order to change default search placeholder, we can follow the below way.

In order to change the default text "Search entire store" in Magento 2 search box, we have to override the default Magento_Search template file.

Copy from:

Magento_Root_Directory/vendor/magento/module-search/view/frontend/templates/form.mini.phtml

Paste into

Magento_Root_Directory/app/design/frontend/Wishusucess_ThemeVender/Wishusucess_ThemeName/Module_Search/templates/form.mini.phtml

 

Magento 2 Change Default Search Placeholder

Change Magento 2 Catalog Search Text

As a Magento developer many times we faced a lot of challenges so here I am going to explain how easily you can just change the Magento 2 catalog search default text. As we know Magento 2 use two types of catalog search which combined gives best user experience to their customer.

  • Quick Catalog Search
  • Catalog Advanced Search.

Quick Catalog Search

Magento 2 Quick Catalog Search provides facilities to just type the phrase and get the matched product result on the product result page. So here we will change the default placeholder text of that catalog search.

<?php
/**
* Author: Hemant Singh
* Developer Hemant Singh Magento 2 Developer
* Website http://www.wishusucess.com/
*/
// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis
?>
<?php
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
/** @var $configProvider \Magento\Search\ViewModel\ConfigProvider */
$helper = $this->helper(\Magento\Search\Helper\Data::class);
$configProvider = $block->getData('configProvider');
?>
<div class="block block-search">
<div class="block block-title"><strong><?= $block->escapeHtml(__('Search')) ?></strong></div>
<div class="block block-content">
<form class="form minisearch" id="search_mini_form"
action="<?= $block->escapeUrl($helper->getResultUrl()) ?>" method="get">
<div class="field search">
<label class="label" for="search" data-role="minisearch-label">
<span><?= $block->escapeHtml(__('Search')) ?></span>
</label>
<div class="control">
<input id="search"
<?php if ($configProvider->isSuggestionsAllowed()):?>
data-mage-init='{"quickSearch":{
"formSelector":"#search_mini_form",
"url":"<?= $block->escapeUrl($helper->getSuggestUrl())?>",
"destinationSelector":"#search_autocomplete",
"minSearchLength":"<?= $block->escapeHtml($helper->getMinQueryLength()) ?>"}
}'
<?php endif;?>
type="text"
name="<?= $block->escapeHtmlAttr($helper->getQueryParamName()) ?>"
value="<?= /* @noEscape */ $helper->getEscapedQueryText() ?>"
placeholder="<?= $block->escapeHtmlAttr(__('Search...')) ?>"
class="input-text"
maxlength="<?= $block->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
role="combobox"
aria-haspopup="false"
aria-autocomplete="both"
autocomplete="off"
aria-expanded="false"/>
<div id="search_autocomplete" class="search-autocomplete"></div>
<?= $block->getChildHtml() ?>
</div>
</div>
<div class="actions">
<button type="submit"
title="<?= $block->escapeHtml(__('Search')) ?>"
class="action search"
aria-label="Search"
>
<span><?= $block->escapeHtml(__('Search')) ?></span>
</button>
</div>
</form>
</div>
</div>

 

Change Placeholder Default Text in Magento 2

This is the simple way to change the Magento 2 placeholder text in Magento 2 in the search input box. You just have to copy the module search en_US.csv file and just paste it into your theme directory and then just change the text whatever you want.

Copy from

Magento_Installation_Directory/vendor/magento/module-search/i18n/en_US.csv

Paste into

Magento_Installation_Directory/app/design/frontend/Wishusucess_ThemeVender/Wishusucess_ThemeName/Module_Search/i18n/en_US.csv

Now search the text "Search entire store" and change the name as per your requirement and run the below command.

 

Now, Run Following Command:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

php bin/magento cache:flush

 

Hire Magento 2 Expert Developer to Develop Your Store

 

Related Post:

Custom Shipping Text Filed: Show Custom Text Magento 2

Search AutoComplete: Magento 2 Module Add All Category for Search

Share Product on WhatsApp: With Products Image And URL in Magento 2

 

Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Magento Store: Best 36 Magento Websites Example in The World

SEO Packages: How Much Do SEO Packages Cost in India, SEO Pricing

 

Leave a Reply