Featured →
Find your WordPress way

How to create a search results page with Elementor (Elementor PRO Tutorial)

Table of Contents

Important links

Creating a search results template in Elementor PRO

Using Elementor PRO theme builder you'll be able to create a completely customized search results page for your Elementor website!

This will be vital for any website that has content that need to be found by users: blogs, e-commerce stores, listing websites, etc.

In this tutorial I am going to show you how to create a custom search results template in Elementor including the following elements:

  • Title that includes the searched term
  • A short description
  • A search box to repeat the search in case of need
  • The list of the search results

You will be able to do all this by simply using the Elementor PRO theme builder settings.

A quick example of the search results page we will create during this tutorial.

elementor search results tutorial

Advanced search results customization

To achieve a professional setup pf your search results page, you can add some important customizations:

  • Use the Elementor Loop Grid to display the search results items in a highly customized way

And by using two powerful free plugins you'll be able to add even more powerful options:

  • Exclude simple website pages from the search results (and show only products and/or blog posts)
  • Customize completely the search results page title
  • Highlight the searched terms in the search results page (titles and excerpts)

We'll see how to achieve the first two features using the free Code Snippets plugin and for the last one we will use the free Highlight Search Terms plugin.

Code Snippets to customize your Elementor search page

You can use these snippets inside the free Code Snippets plugin, as I show you in the video tutorial.

Limit search results to posts and products

if (!is_admin()) {
function mv_search_filter($query) {
if ($query->is_search) {
$query->set('post_type', array( 'post','product'));
}
return $query;
}
add_filter('pre_get_posts','mv_search_filter');
}

Delete the “Search results for:” title

add_filter( 'gettext', function( $text ) {
    if ( 'Search Results for: %s' === $text ) {
        $text = '%s';
    }

    return $text;
} );

Conclusions

Are you ready to create your own search results page with Elementor? Scroll at the top of this post and watch the full tutorial 😉

Check my Elementor PRO Tutorial if you want to learn how to create a great Elementor website from scratch!

Views: 45

Pascal Claro

YouTuber & WordPress Enthusiast, founder @ WP Roads. Happy husband and father based in Paris. I love to share news, tutorials and reviews about WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Important Links

Subscribe to get WordPress news, tutorials & reviews directly in your inbox.