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