Search Highlight - What Is That?
With the Advanced Woo Search plugin, you can display search results as you type. It is also possible to highlight words inside the search results list that match the search query.
Highlighted search words
By default, highlighted words are wrapped in the strong tag, making them bold. Below, we will cover how to change these styles, for example, by making all highlighted words red.
Highlighted search words in red color
How to Enable Search Highlighting
First, let's look at how to enable the search word highlighting feature.
Go to the plugin settings page and click on the Search Results tab.
Scroll down to the Highlight words option and make sure it is enabled.
'Highlight words' option
Now that the 'Highlight words' feature is enabled, let's change its styles.
How to Change Search Highlighting Styles
We will cover several examples of how to change the highlighting styles.
Style 1: Red Color
Red color for highlighted words
Let’s make our highlighted search words red.
To do this, you can use the following custom css:
.aws-search-result .aws_result_content strong {
color: red;
}
Style 2: Yellow Background
Yellow background for highlighted words
HTML has a special tag for markups: mark. By default, it has a yellow background, but this may vary depending on your current theme styles.
In this example, let's replace the default strong tag with the mark tag. To do this, use the following code snippet:
add_filter( 'aws_highlight_tag', function ( $tag ) {
return 'mark';
} );