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

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;

Search bar edges

You can make the search bar rounded with some CSS code (applies to search bar without the submit button):

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
  border-radius: 24px;

Submit button

The submit button background and text color can be changed in the “Colors” section in “Search config” tab.

Other changes can be made using CSS.

To change the background and text colors on hover, use the following snippet:

button[type="submit"].dgwt-wcas-search-submit:hover {
  background-color: black;
  color: white;

button[type="submit"].dgwt-wcas-search-submit:hover:before {
  content: '';
  border-right-color: black !important;

To move the button further away from the input box and remove the little triangle on the left, use the following CSS:

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:before {
  content: none;

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
  position: static !important;
  margin-left: 5px !important;

.dgwt-wcas-sf-wrapp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

To make the edges of the button round, use the following CSS:

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
  border-radius: 24px !important;

Placeholder color

See: How to change placeholder color.

Magnifier icon

See: How to change the magnifier icon.

Search results (live suggestions)

Suggestions colors

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


Open “Autocomplete” tab and scroll down to “Products” section.


You can Show product image by enabling the setting (see Products settings above).


You can Show price of the product by enabling the setting (see Products settings above).

To apply styling to the price, you can use something like below:

.dgwt-wcas-sp {
   font-weight: bold !important;


You can Show SKU of the product by enabling the setting (see Products settings above).

Variation SKU search – if there is an exact match of the variation SKU, the parent product as well as the variation product will be displayed. To hide the parent product, use the following CSS code:

.dgwt-wcas-suggestion-product-var + .dgwt-wcas-suggestion-product {
    display: none;

See more products label

CSS class: .dgwt-wcas-suggestion-more

To hide this label you can use simply CSS code:

.dgwt-wcas-suggestion-more {

Change any element with CSS

You can style any element of the search bar and search results with CSS.

First, you need to right click on the element you want to change and select “Inspect”:

Developer Tools will open and you’ll be able to check the CSS class of the element:

Right click on the selector, copy it and paste it into Appearance -> Customize -> Additional CSS. There, you can add any CSS rules, eg.:

.dgwt-wcas-has-desc .dgwt-wcas-sp>*, .dgwt-wcas-has-img .dgwt-wcas-sp>* {
  font-size: 26px;

It may happen that the element you selected is not styled and there are no selectors available for it in the right-hand side panel. Then, you can create your own selectors based on the classes in the left-hand side panel. Eg. an alternative selector for the price could be:

.dgwt-wcas-sp .woocommerce-Price-amount.amount {
  font-size: 26px;

If you’re not familiar with CSS, you may need to go through one of the tutorials available online, eg.