Hi,
Thank you for contacting us and I'd be happy to assist.
As there is no direct feature available to apply images to the taxonomy search field's options, you'll need some workaround.
1. You'll need to create a taxonomy view, that creates a list of all the terms included in the taxonomy for which you'd like to include these image logos. The role of this view will only be to generate the custom CSS code, for the taxonomy search field's background image styling.
A new taxonomy view can be created from WP Admin -> Toolset -> Views. Please note, that as the taxonomy view can't be created using the blocks editor, you'll need to enable the classic/legacy views first from WP Admin -> Toolset -> Settings -> General. For the "Editing experience" setting, make sure that the "Show both the legacy and Blocks interface and let me choose which to use for each item I build" option is selected.
2. For this example, I'm going to use the default taxonomy "Category" and I've added an image type taxonomy field "category-logo" for this taxonomy.
The code in the loop editor section of the taxonomy view will look like this:
[wpv-layout-start]
[wpv-items-found]
<style>
.wpv-filter-form .radio label[for*="post_category-"] {
display: block;
padding: 0% 0% 0% 5%;
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: contain;
}
<!-- wpv-loop-start -->
<wpv-loop>
.wpv-filter-form .radio label[for="post_category-[wpv-taxonomy-slug]"] { background-image: url('[types termmeta='category-logo' output='raw'][/types]'); }
</wpv-loop>
<!-- wpv-loop-end -->
</style>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Please note how we first include some default CSS style for all the category search field options and then inside the view's loop, include a specific style that targets each term's radio field option through the term slug and applies the background image from the "category-logo" field.
3. Once this view is ready, you can include it on the same page as the view with the search form.
( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-view )
[wpv-view name="taxonomy-view-name"]
Note: You'll replace "taxonomy-view-name" with the actual name of your taxonomy view.
I hope this example will help and please let me know if you need any further assistance around this.
regards,
Waqar
