Customize search appearance

Table of Contents

You can manage colors via the plugins settings page. Go to WooCommerce -> FiboSearch and make sure you have enabled advanced settings.


Search bar colors

Open “Search bar” tab and scroll down to the “Colors” section

There is no option to change the placeholder color. If you want to change the default browser placeholder color because of e.g. WCAG 1.4.3, read this article.

Search bar width

A search bar stretches to the size of the HTML parent element. In the WooCommerce -> FiboSearch -> Search bar (tab) you can set “Max form width”. If you leave this field blank, a search bar will become 100% width of the HTML parent element. If it’s too large, set write 600 in “Max form width” field to keep the search bar not wider than 600px.

Sometimes HTML parent element is too narrow. In this case you can force search width using CSS. Below is code that force search bar width to 600px on desktop and 320px on mobile:

.dgwt-wcas-search-wrapp {
  width: 600px;
}

@media (max-width: 600px) {
  .dgwt-wcas-search-wrapp {
    width: 320px;
  }
}

Submit button

@todo | it will be finished soon


Search results (live suggestions)

Suggestions colors

Open “Autocomplete” tab and scroll down to “Suggestions Colors” section.

Image

@todo | it will be finished soon

Price

@todo | it will be finished soon

SKU

@todo | it will be finished soon

See more products label

CSS class: .dgwt-wcas-suggestion-more

To hide this label you can use simply CSS code:

.dgwt-wcas-suggestion-more {
  display:none;
}