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:

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

Products

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

Image

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

Price

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

SKU

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 {
  display:none;
}