// PHP Action function highlight_text($text, $keyword) { return preg_replace('/(' . preg_quote($keyword, '/') . ')/i', '<strong>$1</strong>', $text); } add_action('wp_ajax_rst_ajax_search', 'rst_ajax_search_action'); add_action('wp_ajax_nopriv_rst_ajax_search', 'rst_ajax_search_action'); function rst_ajax_search_action() { global $wp_query; $s = isset($_POST['s']) ? sanitize_text_field($_POST['s']) : ''; if ($s) { $args = array( 'post_type' => 'product', 'post_status' => 'publish', 'posts_per_page' => 10, 's' => $s, ); $the_query = new WP_Query($args); $wp_query = $the_query; $i = 0; if ($the_query->have_posts()) : ?> <div class="rst-search-result-product"> <span class="result-head">PRODUCTS<span>(<?php echo esc_html($the_query->found_posts); ?>)</span></span> <div class="rst-list-result-product"> <div class="rst-list-result-product-column"> <?php while ($the_query->have_posts()) : $the_query->the_post(); $product_id = get_the_ID(); $i++; $product = wc_get_product($product_id); $sku = $product->get_sku(); if($i == 6){ echo '</div><div class="rst-list-result-product-column">'; } ?> <div class="rst-item-result-product"> <div class="rst-item-result-product-thumb"> <?php echo get_the_post_thumbnail($product_id, 'woocommerce_thumbnail'); ?> </div> <div class="rst-item-result-product-meta"> <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> <?php if($sku){ ?> <span>SKU: <?php echo esc_html($sku); ?></span> <?php } ?> </div> </div> <?php endwhile; ?> </div> </div> <?php if ($the_query->found_posts > 10) { ?> <div class="wiew_all_product_wrap"> <a href="<?php echo esc_url(home_url('/?s=' . $s . '&post_type=product')); ?>" class="wiew_all_product">View all products </a> </div> <?php } ?> </div> <div class="rst-search-result-meta"> <?php $args = array( 'taxonomy' => 'product_cat', 'number' => 2, 'orderby' => 'name', 'name__like' => $s, 'hide_empty' => false, ); $tags = get_terms($args); $total = count($tags); //var_dump($tags); if (!empty($tags) && !is_wp_error($tags)) { $y = 0; ?> <div class="rst-search-result-meta-box rst-search-result-meta-box-product-cat"> <span class="result-head">CATEGORIES<span>(<?php echo $total; ?>)</span></span> <ul> <?php foreach ($tags as $tag) { $y++; $tag_link = get_tag_link($tag->term_id); $term = get_term($tag->term_id); $thumbnail_id = get_term_meta( $tag->term_id, 'thumbnail_id', true ); $thumbnail_url = wp_get_attachment_url( $thumbnail_id ); $parent_terms = []; while ($term->parent != 0) { $term = get_term($term->parent); if (!is_wp_error($term) && $term) { $parent_terms[] = $term; } } $in = ''; if (!empty($parent_terms)) { $in = 'in '; $reversed_array = array_reverse($parent_terms); $z = 0; foreach ($reversed_array as $item) { $z++; if($z == 1){ $in = $in . esc_html($item->name); }else{ $in = $in . ' > ' . esc_html($item->name); } } } $title_tag = highlight_text($tag->name,$s); ?> <li><a href="<?php echo esc_url($tag_link); ?>" class="taxonomy-link-meta"> <?php if ( $thumbnail_url ) { ?> <img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="" /> <?php } ?> <div> <h4><?php echo $title_tag; ?></h4> <?php if($in){ ?> <span><?php echo $in; ?></span> <?php } ?> </div> </a></li> <?php //if($y == 2) break; } ?> </ul> </div> <?php } ?> <?php $args = array( 'taxonomy' => 'post_tag', 'number' => 1, 'name__like' => $s, 'hide_empty' => true, ); $tags = get_terms($args); if (!empty($tags) && !is_wp_error($tags)) { ?> <div class="rst-search-result-meta-box"> <span class="result-head">TAGS</span> <ul> <?php foreach ($tags as $tag) { $tag_link = get_tag_link($tag->term_id); $title_tag = highlight_text($tag->name,$s); ?> <li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li> <?php } ?> </ul> </div> <?php } ?> <?php $args_post = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 1, 's' => $s, ); $the_query_post = new WP_Query($args_post); if ($the_query_post->have_posts()) : ?> <div class="rst-search-result-meta-box"> <span class="result-head">POSTS</span> <ul> <?php while ($the_query_post->have_posts()) : $the_query_post->the_post(); $tag_link = get_the_permalink(); $title_tag = highlight_text(get_the_title(),$s); ?> <li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li> <?php endwhile; ?> </ul> </div> <?php endif; wp_reset_query(); ?> </div> <?php else : echo '<p class="no-result">No results</p>'; endif; wp_reset_query(); } exit; } //Js Call jQuery('.rst-search .rst-wcas-search-input').on("input", function(e) { e.preventDefault(); var dInput = this.value; if (dInput.length >= 2) { jQuery('.rst-search-result').addClass('show'); jQuery('.rst-wcas-proccesing').addClass('show'); jQuery('.rst-wcas-close').removeClass('show'); var ajax_url = jQuery('.ajax_url').val(); jQuery.ajax({ type: "POST", url: ajax_url, data: { 'action' : 'rst_ajax_search', 's' : dInput, } }).done(function(data){ var items = jQuery(data); jQuery('.rst-wcas-proccesing').removeClass('show'); jQuery('.rst-wcas-close').addClass('show'); jQuery('.rst-search-result-inner').html(items); }); } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter