Hide description and/or images in autocomplete dropdown in Algolia plugin for WordPress

Here is a quick tip to hide either the images or the descriptions from the autocomplete dropdown in the WordPress plugin.

You need to add the following rules to your styles.css file of your active theme:

// Hide the description snippet.
.aa-dropdown-menu .aa-suggestion .suggestion-post-content {
    display: none;
}

// Hide the image thumbnails.
.aa-dropdown-menu .suggestion-post-thumbnail {
    display: none;
}

Here is what it looks like:

Feel free to share your own tips & tricks :wink:

2 Likes

Great! Thank you for sharing this tip.

Can you please tell me how to hide index Title (e.g. POSTS)? Also, please check out this page https://snag.gy/KMwXSB.jpg

Thanks

1 Like

Here is yet another rule to hide the heading titles :wink:

.aa-dropdown-menu .autocomplete-header {
  display: none;
}

Thanks for asking!

1 Like

Thank you for your quick reply. This is what I was looking for.

Can you please give me a tip how to get this drop menu looks like this https://snag.gy/UCgnHh.jpg ? I want to display “Heart icon” and the popularity of words, looks like your example in above link.

Can you please tell how to hide Tag icon before my words, please see the link https://snag.gy/wsSVG6.jpg. How to do that?

Thanks

Thanks

1 Like

Hi @petinstaphotos,
The example we showcased is a mock.

You could definitely re-produce the look and feel but you would have to do the styling on your end, because we did it with Sketch .

Depending on the information you want to display, you’ll need to push custom attributes. Here is a full guide about that aspect.

And you’ll also have to customize the autocomplete template.

Can you please tell how to hide Tag icon before my words, please see the link https://snag.gy/wsSVG6.jpg. How to do that? I would like to index my Tag and Taxonomy, but I want to display just context and nothing more (no icon).

Thanks

You can hide the icon with the following rule:

.suggestion-link svg {
	display: none;
}

Cheers

1 Like

This is what I was looking for! Awesome! Tnx

thanks for this tutorial but where can i find the custom css to style?

Hey @healthable,

The CSS rules can be added to the styles.css file of your active theme.

where can i get the code? the one instead the css folder in the plugin?

@healthable
In general it is loocated un the root folder of your active theme.
If your theme is ‘awesome-theme’, then it will be inside:

wp-content/themes/awesome-theme/styles.css.

As an alternative, you should also be able to access that css file from the editor from your wordpress admin.

I hope that helps.

I know where my CSS it am talking about algolia css for the WordPress plugin am going to style

Owe, sorry if I mis-understood that.
The default css for the autocomplete menu are in our plugin folder, in css/algolia-autocomplete.css

Does that help?

same as the instant search result page?

Hey,

No, the search results page is under css/algolia-instantsearch.css.

I hope that helps,