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.

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 & Style

↑ Back to top

By default, the up-to-date template is set up. You can change its colors to suit your store’s 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 & Style 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 red-pink color highlights for widget elements that match a particular color option.

Color option	Description	Example
Product Card
Title	Changes: * 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)
Description	Changes the text color of product descriptions
Product price	Changes the color of product prices
Crossed-out original price	Changes the text color of product prices before the discount
Sale price	Changes the text color for discounted product prices
SKU	Changes the text color of product SKUs It is used when the “Show SKU option” is enabled (“Content” tab > “Products” part)
Item background	Changes the background color of products It is used for the “Modern Black” template only
Button text	Changes the text color of on-hover buttons on products
CTA button background	Changes the background color of on-hover buttons on products
Product Border Color	Changes the border color of the product cardsIt is not used for the new “Big Pictures” template
Filters
Titles	Changes the text color of filter titles
Titles background	Changes the background color of the filter titles It is used for the “Modern Black” template and on desktop only
Values	Changes the text color of filter values
Background	Changes the background color of the top and side filter panels It is used on desktops only It is not used for the new “Big Pictures” template
On-hover background	Changes: * 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 Color	Changes: * 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 points	Changes the color of the key points on the price range slider It is not used for the new “Big Pictures” template
Active range	Changes the color of a chosen range of the price range slider It is not used for the new “Big Pictures” template
Range leftover space	Changes the color of the price range slider It is not used for the new “Big Pictures” template
Placeholders	Changes 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 icon	Changes the icon color of the active product view type It is used for the new “Big Pictures” template only
Grid/list background	Changes the background color of the active product view type It is used for the new “Big Pictures” template only
“Show products” button (mobile)
Text	Changes the text color of the Show [count] products button of the mobile filter panel
Background	Changes the background color of the Show [count] products button of the mobile filter panel
“Reset filters” button (mobile)
Text	Changes the text color of the Reset filters button of the mobile filter panel
Background	Changes the background color of the Reset filters button of the mobile filter panel
Miscellaneous
Pagination highlight	Changes the background color of the active pagination page It is used for the new “Big Pictures” template only
Navigation highlight	Changes: The text color of inactive navigation panel tabs The text color of the current product sorting (mobile only) The color of the product view type icons (mobile only)
Navigation default	Changes: The text color of the active navigation panel tab The 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 panel	Changes the background color of the navigation panel It is not used for the new “Big Pictures” template
Additional borders	Changes: 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 & Style tab.
2. Click the Reset colors button. All color palettes in the current template will be changed to default values.

3. Apply the changes.

Changing font

↑ Back to top

By default, Searchanise widgets use your theme’s font family. If you’d like, you can change it in the Instant Search Widget. Here’s how:

1. In the Searchanise Search & Filter control panel, go to:
   Search & Navigation > Search results widget > Template & Style > Typography part.
2. Change the Font setting.
3. Apply the changes.

That’s it. Your widgets will now display in the new font.

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

Setting	Description
Search results page
Filters position	Allows you to choose either to 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 sidebar	Allows 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 section	Allows 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 page	Sets the maximum number of products displayed per page.
Default view	Sets 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 desktop	Sets 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 view	Sets the default view for the search results in the Products section on mobile devices. This setting is available if the Big Pictures template is set in the Template & Colors tab.
Default sorting	Sets 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 price	Displays the product price in the product cards.
Show original price	If Show price is enabled. Shows the original product price compared with the discounted product price if the product has a discount.
Original price position	If Show original price is enabled. Adjusts the position of the original crossed-out price relative to the sale price.
Highlight saving	If Show original price is enabled. Displays the discount amount as “Save …”. You can choose how the value is displayed (percentage or number) in Translations & Texts > Search Results Widget: To show an absolute value, use save amount To show a percentage, use save_percent
Zero price action Zero price text	If Show price is enabled. You can choose how free products are displayed using 3 options: Show zero price; Hide zero price; Hide zero price, show text instead – with this option, you can specify custom text for free products in the Zero price text field.
Show CTA button	Displays 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 SKU	Displays 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 & Texts section > Search Results Widget tab > Additional product field text box.
Flip images on hover	Switches the product image from the main one to the one uploaded second when the mouse pointer hovers over the product card.
Max title strings	Sets the maximum number of strings displayed in the product title in the product cards for the grid view.
Max description strings	Sets the maximum number of strings displayed in the product description in the product cards.
Other
Show categories images	Displays the category images in the search results in the Categories section.
Categories per page	Sets the maximum number of categories displayed per page in the Categories section.
Show pages images	Displays the page images in the search results in the Pages section.
Pages per page	Sets 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 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

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. Click the Edit button next to the Discount label.
3. Switch the Show label toggle to On.
4. Optionally, change the background color and the text color of the discount label.
5. 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.
6. Click the Save label button in the top-right corner.

To show Discount Labels in the Instant Search Widget, you’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. Click the Edit button next to the In-stock label.
3. Switch the Show label toggle to On.
4. Optionally, change the background color and the text color of the labels.
5. Optionally, change the text of the labels.
6. Click the Save label button in the top-right corner.

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 the 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’s appearance well, it’s always possible to switch off the Custom CSS setting and apply the changes.