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

 

Add Checkbox in Layered Navigation Filter on Category page in Magento 2

If you are looking to add checkbox in Layered navigation filter on the category page in Magento 2 then you are on the correct page.

Here I will explain how we can simply add the checkbox filter on the list page and from the designer perspective you will also have a custom class on the Magento 2 Layered navigation filter.

You just have to copy the below code and then paste it in your theme and you check your result amazingly will see that the checkbox filter is coming on the list page.

Add Checkbox in Layered Navigation Filter

 

Magento 2 Checkbox Filter in Layered Navigation

Go to the Magento installation directory:

app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/filter.phtml

app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/view.phtml

 

How To Add Checkbok in Layered Navigation Filter in Magento 2

app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/filter.phtml

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

?>
<?php
/** @var \Magento\LayeredNavigation\Block\Navigation\FilterRenderer $block */
/** @var \Magento\Framework\Escaper $escaper */
/** @var \Magento\LayeredNavigation\ViewModel\Layer\Filter $viewModel */
$viewModel = $block->getData('product_layer_view_model');
?>
<?php if($filter instanceof Magento\CatalogSearch\Model\Layer\Filter\Price ):?>
<?php $range = $this->getPriceRange($filter);?>
<?php $url = $this->getFilterUrl($filter);?>
<script>
var price_url = "<?=$url;?>";
require([
'jquery',
'priceUtils',
"jquery/ui",
'domReady!'
], function($,utils){
updateLabel = function() {
var priceFormat = <?php /* @escapeNotVerified */ echo $this->helper('Magento\Tax\Helper\Data')->getPriceFormat($block->getStore()); ?>;
var min = utils.formatPrice($( "#price-slider" ).slider( "values", 0 ), priceFormat);
var max = utils.formatPrice($( "#price-slider" ).slider( "values", 1 ), priceFormat);
$( "#amount" ).val(min + " - " + max);
};
$("div#price-slider").slider({
range: true,
min: <?=$range['min']?>,
max: <?=$range['max']?>,
values: [ <?=$range['min']?>, <?=$range['max']?> ],
slide: function( event, ui ) {
updateLabel();
},
change: function( event, ui ) {
window.location.href = price_url.replace("price=","price="+ui.values[0]+"-"+ui.values[1]);
}
});
updateLabel();
});
</script>


<p>
<label for="amount"><?= __('Price range:') ?></label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="price-slider"></div>

<?php else:?>
<ol class="items">
<?php foreach ($filterItems as $filterItem): ?>
<li class="item">
<?php if ($filterItem->getCount() > 0): ?>
<form>
<span class="check-box">
<input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $escaper->escapeUrl($filterItem->getUrl()) ?>")'/>
</span>
<a
href="<?= $escaper->escapeUrl($filterItem->getUrl()) ?>"
rel="nofollow"
><?= /* @noEscape */ $filterItem->getLabel() ?><?php
if ($viewModel->shouldDisplayProductCountOnLayer()): ?><span
class="count"><?= /* @noEscape */ (int) $filterItem->getCount() ?><span
class="filter-count-label"><?php
if ($filterItem->getCount() == 1): ?>
<?= $escaper->escapeHtml(__('item')) ?><?php
else:
?><?= $escaper->escapeHtml(__('item')) ?><?php
endif;?></span></span>
<?php endif; ?></a></form>
<?php else: ?>
<form>
<span class="check-box">
<input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $escaper->escapeUrl($filterItem->getUrl()) ?>")'/>
</span>
<span>
<?= /* @noEscape */ $filterItem->getLabel() ?><?php
if ($viewModel->shouldDisplayProductCountOnLayer()): ?><span
class="count"><?= /* @noEscape */ (int) $filterItem->getCount() ?><span
class="filter-count-label"><?php
if ($filterItem->getCount() == 1): ?>
<?= $escaper->escapeHtml(__('items')) ?><?php
else:
?><?= $escaper->escapeHtml(__('items')) ?><?php
endif;?></span></span>
<?php endif; ?>
</span>
</form>
<?php endif; ?>
</li>
<?php endforeach ?>
</ol>
<?php endif;?>

 

Step 2:

app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/view.phtml

<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/

// @codingStandardsIgnoreFile
?>
<?php
/**
* Category layered navigation
*
* @var $block \Magento\LayeredNavigation\Block\Navigation
*/
?>

<?php if ($block->canShowBlock()): ?>
<div class="block filter" id="layered-filter-block" data-mage-init='{"collapsible":{"openedState": "active", "collapsible": true, "active": false, "collateral": { "openedState": "filter-active", "element": "body" } }}'>
<?php $filtered = count($block->getLayer()->getState()->getFilters()) ?>
<div class="block-title filter-title" data-count="<?php /* @escapeNotVerified */ echo $filtered; ?>">
<strong data-role="title"><?php /* @escapeNotVerified */ echo __('Shop By') ?></strong>
</div>
<div class="block-content filter-content">
<?php echo $block->getChildHtml('state') ?>

<?php if ($block->getLayer()->getState()->getFilters()): ?>
<div class="block-actions filter-actions">
<a href="<?php /* @escapeNotVerified */ echo $block->getClearUrl() ?>" class="action clear filter-clear"><span><?php /* @escapeNotVerified */ echo __('Clear All') ?></span></a>
</div>
<?php endif; ?>
<?php $wrapOptions = false; ?>
<?php foreach ($block->getFilters() as $filter): ?>
<?php /* @escapeNotVerified */ $cstring = preg_replace("/[^a-zA-Z]+/", "", $filter->getName()); ?>
<?php if ($filter->getItemsCount()): ?>
<?php if (!$wrapOptions): ?>
<strong role="heading" aria-level="2" class="block-subtitle filter-subtitle"><?php /* @escapeNotVerified */ echo __('Shopping Options') ?></strong>
<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": false}}'>
<?php $wrapOptions = true; endif; ?>
<div data-role="collapsible" class="filter-options-item filter-options-title <?php echo strtolower($cstring); ?>" >
<div data-role="title" class="filter-options-title <?php echo strtolower($cstring); ?>"><?php /* @escapeNotVerified */ echo __($filter->getName()) ?></div>
<div data-role="content" class="filter-options-content"><?php /* @escapeNotVerified */ echo $block->getChildBlock('renderer')->render($filter); ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php if ($wrapOptions): ?>
</div>
<?php else: ?>
<script>
require([
'jquery'
], function ($) {
$('#layered-filter-block').addClass('filter-no-options');
});
</script>
<?php endif; ?>
</div>
</div>
<?php endif; ?>

 

Now, Run Following Command:

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