Return to previous page

Pop up search result customization – size, hover results

This topic has 6 replies, 2 voices, and was last updated 2 days, 20 hours ago ago by Luca Rossi

kmc

Participant

June 29, 2025 at 09:26

Please see image attached

1. How to disable this “select options” when hovering.
2. How to make the product image display results smaller?
3. how to change the text view all results?
4. when there are more than 4 results, I see one line has 5 products but one product information is not displayed fully and also another line for 6th product. Can we make it slider or display properly?

Files is visible for topic creator and
support staff only.

#448369 Copied

5 Answers
Luca Rossi

Support staff

June 30, 2025 at 09:16
Hi @kmc,

– Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

.etheme-search-ajax-results footer.footer-product { display: none; } .etheme-search-ajax-results .autocomplete-suggestion { min-width: 200px; max-width: 200px; }

– Add the following code under functions.php file locates in your child theme:

function n2t_text_strings( $translated_text, $text, $domain ) { switch ( $translated_text ) { case 'View all results' : $translated_text = 'Your Custom Text Will Go Here'; break; } return $translated_text; } add_filter( 'gettext', 'n2t_text_strings', 20, 3 );

Kind regards,
The 8Theme Team
#448440 Copied
kmc

Participant

June 30, 2025 at 17:28

Thank you however there are 2 more issues.
– when the product is variable product with discount, the text is messed up (see screen shot)
– can we make the result image toggle as per product archive page?

Files is visible for topic creator and
support staff only.

#448503 Copied
Luca Rossi

Support staff

July 1, 2025 at 09:19
Hi @kmc,

Please delete this previous code:

.etheme-search-ajax-results .autocomplete-suggestion { min-width: 200px; max-width: 200px; }

Then add this custom CSS codes:

.etheme-search-ajax-results .price.etheme-search-form-item-price > * { display:block; } .etheme-search-ajax-results .price.etheme-search-form-item-price > * { display:block; } .etheme-search-form[type=popup] .autocomplete-suggestions { display: flex; flex-basis: 24%; flex-wrap: wrap; gap: 1%; } .etheme-search-ajax-results .autocomplete-suggestion { width: 24%; min-width: 24%; }

Hope it helps!
#448568 Copied
kmc

Participant

July 1, 2025 at 09:33

Thanks for the quick reply but two issues:

1. when there is no discount and variable products, the prices diplayed in 3 rows in stead of 1 row

2. the postion of “view more products” are wrong.

Files is visible for topic creator and
support staff only.

#448570 Copied
Luca Rossi

Support staff

July 1, 2025 at 13:28
Hi @kmc,

Please update the previous CSS codes to this:

.etheme-search-ajax-results .price.etheme-search-form-item-price del, .etheme-search-ajax-results .price.etheme-search-form-item-price ins { display:block; } .etheme-search-form[type=popup] .autocomplete-suggestions { display: flex; flex-basis: 24%; flex-wrap: wrap; gap: 1%; } .etheme-search-ajax-results .autocomplete-suggestion { width: 24%; min-width: 24%; } .etheme-search-form-more { width: 100%; }

Let us know how it goes!
#448610 Copied
Viewing 6 results - 1 through 6 (of 6 total)