This article explains how to replace the native search bar in the Storefront theme by Automattic.
FiboSearch plugin features built-in integration with this theme. It means you can replace the default search bars by selecting a single checkbox.
If you have activated the Storefront theme or the child theme of Storefront theme, you should see the following screen in the plugin settings:
WooCommerce → FiboSearch → Starting (tab)
Select the option Replace them and the search bar should be replaced.
Default Storefront settings make the search bar rather short. It generates problems even with the placeholder text, “Search for products…”, which often doesn’t into the search bar.
To solve this, you have to resort to a custom CSS. To add it, head to Customize → Additional CSS → paste the following code:
.site-branding {
width:25%!important;
}
.site-search {
width:65%!important;
display: flex;
justify-content: right;
}
.site-search .dgwt-wcas-search-wrapp {
margin: 0;
}
@media(max-width: 768px) {
.site-search {
display: none;
}
}
Of course, you can customize the code and adjust it to fit your needs.
The results should look like this:
