Pop up search result customization – size, hover results

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

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!

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!

Dear @kmc,

We hope this message finds you well.

1. You can adjust the layout of the search results column on both mobile and desktop devices by following this link: https://prnt.sc/BbL1ryEaU1Wc

2. All of the mentioned texts are translatable using the Loco Translate plugin. Kindly try clicking the “Sync” button and then search for the strings again:
– https://prnt.sc/Y3Oymr3m7Ho4
– https://prnt.sc/bSfdRu7zNSPG

3. Regarding the incorrect search results URL, we recommend temporarily disabling all third-party plugins that are not included with XStore. You can find the list of included plugins here: https://www.8theme.com/documentation/xstore/plugins/included-plugins/. After disabling the additional plugins, please clear your browser cache and check the issue again. It is possible that one of the external plugins is causing the conflict.

Please let us know the outcome after trying the above steps.

Kind regards,
The 8Theme Team

Hi @kmc,

1. Did you change to another search form? We only saw this: https://prnt.sc/lBzkS1DDFZt0

2. It would require many customization code to achieve this search function, but you can try with this:

function custom_woocommerce_search_by_description( $query ) {
    if ( $query->is_search && $query->is_main_query() && $query->get( 'post_type' ) === 'product' ) {
        $search_term = $query->get( 's' );
        if ( ! empty( $search_term ) ) {
            $query->set( 's', '' ); // Clear default search term
            $query->set( 'meta_query', array(
                'relation' => 'OR',
                array(
                    'key'     => '_product_description', // For long description
                    'value'   => $search_term,
                    'compare' => 'LIKE',
                ),
                array(
                    'key'     => '_product_short_description', // For short description
                    'value'   => $search_term,
                    'compare' => 'LIKE',
                ),
            ) );
            $query->set( 'tax_query', array(
                'relation' => 'OR',
                array(
                    'taxonomy' => 'product_cat',
                    'field'    => 'name',
                    'terms'    => $search_term,
                    'operator' => 'LIKE',
                ),
                array(
                    'taxonomy' => 'product_tag',
                    'field'    => 'name',
                    'terms'    => $search_term,
                    'operator' => 'LIKE',
                ),
            ) );
            $query->set( 'post_type', array( 'product' ) );
            $query->set( 'post_status', 'publish' );
        }
    }
}
add_action( 'pre_get_posts', 'custom_woocommerce_search_by_description' );

Hope it helps!