1. Documentation /
  2. Smart Search & Product Filter by Searchanise /
  3. Search Results Widget

Search Results Widget

The Search Results Widget is a search results page with JavaScript code. It appears in WordPress admin panel > Pages. The page can’t be deleted before the plugin is deactivated. Every time Searchanise finishes the indexation, it refreshes the content of the page.

Important Info

The Search Results Widget is disabled by default. You can enable it in the Searchanise control panel > Search & Navigation > Search results widget section.

Adjusting the widget

You can customize the look and feel of the widget by playing with the color settings and applying Custom CSS. Here you learn how to do so.

The Search Results Widget contains filters. They are based on:

  • Common product details such as price, product tags, stock status, category
  • Global product attributes

To learn more about configuring the filters, you can here.

Template & colors

↑ Back to top

By default, the up-to-date template is set up. You can change its colors to suit your store style guide. 

Changing colors

↑ Back to top

To change colors, follow these steps:

  1. Go to the Searchanise control panel > Search & Navigation > Search results widget section > Template & Colors tab.
  2. Enter a hex color in any Color palette field or use a color-picker next to the necessary element. 
  3. Apply the changes.

Color palette description

The examples below show color highlights in red-pink for the widget elements that match a particular color option.

Color optionDescriptionExample
Product Card
TitlesChanges:
* The text color of product titles
* The color of the price range slider handles
* The text color of the filter value on hover (desktop only)
DescriptionsChanges the text color of product descriptions
Product pricesChanges the color of product prices
SKUChanges the text color of product SKUs

It is used when the “Show SKU option” is enabled (“Content” tab > “Products” part)
Item backgroundChanges the background color of products

It is used for the “Modern Black” template only
Button textChanges the text color of on-hover buttons on products
CTA button backgroundChanges the background color of on-hover buttons on products
Product Border ColorChanges the border color of the product cardsIt is not used for the new “Big Pictures” template
Filters
TitlesChanges the text color of filter titles
Titles backgroundChanges the background color of the filter titles

It is used for the “Modern Black” template and on desktop only
ValuesChanges the text color of filter values
BackgroundChanges the background color of the top and side filter panels

It is used on desktop only
It is not used for the new “Big Pictures” template
On-hover backgroundChanges:
* The background color of the active navigation panel tab
* The background color of the side filter on hover
* The background color of the navigation panel tabs on hover
* The background color of product sorting variants on hover

It is used on desktop onlyIt is not used for the new “Big Pictures” template
Filter Border ColorChanges:
* The border color of the navigation panel (desktop only)
* The border color of the top filters
* The border color of the side filters (desktop only)

It is not used for the new “Big Pictures” template
Price range filter
Key pointsChanges the color of the key points on the price range slider

It is not used for the new “Big Pictures” template
Active rangeChanges the color of a chosen range of the price range slider

It is not used for the new “Big Pictures” template
Range leftover spaceChanges the color of a leftover range of the price range slider

It is not used for the new “Big Pictures” template
PlaceholdersChanges the text color of the price range slider fields

It is not used for the new “Big Pictures” template
Grid/list product view
Grid/list iconChanges the icon color of the active product view type

It is used for the new “Big Pictures” template only
Grid/list backgroundChanges the background color of the active product view type

It is used for the new “Big Pictures” template only
“Show products” button (mobile)
TextChanges the text color of the Show [count] products button of the mobile filter panel
BackgroundChanges the background color of the Show [count] products button of the mobile filter panel
“Reset filters” button (mobile)
TextChanges the text color of the Reset filters button of the mobile filter panel
BackgroundChanges the background color of the Reset filters button of the mobile filter panel
Miscellaneous
Pagination highlightChanges the background color of the active pagination page

It is used for the new “Big Pictures” template only
Navigation highlightChanges:The text color of inactive navigation panel tabsThe text color of the current product sorting (mobile only)The color of the product view type icons (mobile only)
Navigation defaultChanges:The text color of the active navigation panel tabThe text color of the Showing [count] results for  title (desktop only)The text color of the current product sorting (desktop only)The color of the product view type icons (desktop only)It is not used for the new “Big Pictures” template
Other
Main panelChanges the background color of the navigation panel

It is not used for the new “Big Pictures” template
Additional bordersChanges:The border color of the sorting drop-down (desktop only)The border color of product view type icons (desktop only)It is not used for the new “Big Pictures” template

Resetting colors

↑ Back to top

To reset colors to the default values, follow these steps:

  1. Go to the Searchanise control panel > Search & Navigation > Search results widget section > Template & Colors tab.
  2. Click the Reset colors button. All color palettes of the current template will be changed to default values.
  3. Apply the changes.

Content

↑ Back to top

You can customize how to display product details, the categories/pages section, and other elements of the Search Result Widget, enable/disable the features of the widget: option swatches, additional buttons, infinite scrolling, etc.

To do so is possible, adjusting in the Searchanise control panel > Search & Navigation > Search results widget section > Content tab.

Content settings description

↑ Back to top
SettingDescription
Search results page
Filters positionAllows you to choose either show filters at the top of the page or on the left-hand side.
This setting is available if the Big Pictures template is set in the Template & Colors tab.
Show filters in sidebarAllows you to show filters on the left-hand side.
This setting is available if the Modern or Big Pictures Legacy templates are set in the Template & Colors tab.
Show filters top sectionAllows you to show filters at the top.
This setting is available if the Modern or Big Pictures Legacy templates are set in the Template & Colors tab.
Products per pageSets the maximum number of products displayed per page.
Default viewSets the default view mode for the search results in the Products section: grid or list.
If the Modern or Big Pictures Legacy template is set in the Template & Colors tab, this setting applies to the widget on desktop and mobile devices. If the Big Pictures template is set in the Template & Colors tab, this setting applies to the widget on desktop devices only.
Products per row for grid view on desktopSets the number of products per row for the grid view on desktop devices.
This setting is available if the Big Pictures template is set in the Template & Colors tab.
Default mobile viewSets the default view for the search results in the Products section on the mobile devices.
This setting is available if the Big Pictures template is set in the Template & Colors tab.
Default sortingSets the default sorting of the search results in the Products section.
Changing the sorting, please note that low-relevance products may be displayed first if the default sorting value differs from Relevance.
Products
Show priceDisplays the product price in the product cards.
Show list priceShows the discounted price next to the original one.
Show buttonDisplays a button in the product cards.
It shows on mobile and desktop devices.
It shows on desktop devices when the mouse pointer hovers over a product card.
There are the following options:
* View product â€“ opens the product page as clicking anywhere on a product card would. It is more of a call to action.
* Add to the card â€“ adds a product to the cart.
Show SKUDisplays SKU (the product code) in the product cards.
Additional
product fields
Displays the selected additional product field in the product cards. You can set a label for the field in the Translations & Texs section > Search Results Widget tab > Additional product field text box.
Flip images on hoverSwitches the product image from the main one to the one uploaded second when the mouse pointer hovers over the product card.
Max title stringsSets the maximum number of strings displayed in the product title in the product cards for the grid view.
Max description stringsSets the maximum number of strings displayed in the product description in the product cards.
Other
Show categories imagesDisplays the category images in the search results in the Categories section.
Categories per pageSets the maximum number of categories displayed per page in the Categories section.
Show pages imagesDisplays the page images in the search results in the Pages section.
Pages per pageSets the maximum number of pages displayed per page in the Pages section.

Adjust the content of the widget

↑ Back to top

To adjust the content of the widget, follow these steps:

  1. Go to the Searchanise control panel > Search & Navigation > Search results widget section > Content tab.
  2. Adjust the settings.
  3. Apply the changes.

Product Labels

↑ Back to top

The Product Labels feature allows you to show eye-catching labels for products in search results. You can add Discount Labels to products sold with discounts or In-stock Labels to display the product availability.

Below is an example of Discount Labels and In-stock Labels in the Search Results Widget:

You can adjust the Product Labels in the Searchanise control panel > Search & Navigation > Search results widget section > Product Labels tab.

Discount Labels

↑ Back to top

Important info

The Discount Label overrides the setting which allows showing the original product price compared with the discount product price.

To set up Discount Labels, follow these steps:

  1. Go to the Searchanise control panel > Search & Navigation > Search results widget section > Product Labels tab.
  2. Set the Discount label toggle to ON.
  3. Optionally, change the background color and the icon color (text color) of the discount label.
  4. Optionally, change the text of the Discount Label. If you enter the [discount] parameter in the text box, it will be replaced with the actual product discount.
  5. Apply the changes.

To show Discount Labels in the Instant Search Widgetyou’ll need to apply the same settings in the Instant search widget section.

In-stock Labels

↑ Back to top

You can add In-stock Labels to products in the Search Results Widget to show their availability to customers:

  • in-stock
  • pre-order (the plugin v. 1.0.12 or later) – products where allowed backorders (Product > Inventory > Allow backorders?)
  • out-of-stock

To do so, follow these steps:

  1. Go to the Searchanise control panel > Search & Navigation > Search results widget section > Product Labels tab.
  2. Set the In-stock label toggle to ON.
  3. Optionally, edit the text of the labels in the corresponding fields.
  4. Optionally, change the background color and the icon color (text color) of the labels.
  5. Apply the changes.

To show In-stock Labels in the Instant Search Widget, you’ll need to apply the same settings in the Instant search widget section.

Custom CSS

↑ Back to top

Using the Custom CSS feature, you can change styles of the widget if the settings are not enough.

Custom CSS examples

↑ Back to top

How to hide the number in the brackets of filter values?

Add the following CSS rule:

div.snize ul.snize-product-filters-list .snize-filter-variant-count {
    display: none;
}

How to hide the number in the brackets of tab headers?

Add the following CSS rule:

div.snize div.snize-main-panel-controls ul li a span {
    display: none;
}

Adjust Custom CSS

↑ Back to top

Steps:

  1. Go to the Searchanise control panel > Search & Navigation > Search results widget section > Custom CSS tab.
  2. Set the Custom CSS toggle to ON if it is OFF.
  3. Paste your CSS rules into the text area.
  4. Apply the changes.

If the applied CSS rules didn’t affect the widget appearance well, it’s always possible to switch off the Custom CSS setting and apply the changes.