The WooCommerce search results page has a significant impact on the customer experience. As you may know already, if customers have a better user experience, they will be happier. That may result in better conversion rates and higher sales. You may boost sales and expand your business by personalizing the results of product searches.
The default WooCommerce search results page serves its purpose well, but if you want to improve the user experience for your visitors, you might want to consider other options. Customizing WooCommerce search results pages is one option.
This post will provide you with a comprehensive tutorial on how to customize the WooCommerce search results page. Let’s get started!
What is a search results page?
A WooCommerce search results page is simply a page with a specific page template that provides additional information for users who search on your website. The template files used by different WooCommerce themes vary. A search.php template file is included by some. This is only a template that shows the search results; it is not a search page. A template file with the name searchform.php is also present. This template file creates the search box form and is frequently present in the sidebar of many themes. You may easily duplicate it from the Default theme if your theme doesn’t already have one.
Why you should customize the search results page?
WooCommerce by default includes a built-in product search feature. However, it has significant drawbacks. This can prevent your customers from finding the goods they’re looking for.
Consequently, you might be losing out on sales. Customers can stop visiting your online store if they can’t find what they’re looking for.
What causes this to occur? Title, content, and excerpts are the only parts of posts and pages that are indexable by WooCommerce’s default search. When conducting a search, it doesn’t take any custom field content into account.
This is a problem because a lot of the information about your WooCommerce products is kept in custom fields. Your WooCommerce product categories, tags, reviews, and other unique properties won’t be indexed as a result.
Visitors are directed to a page that provides all the information that matches their search when they type a word or phrase into the search box on your WooCommerce website. “A search results page” is the name of such a page.
Some of the main advantages of personalizing your WooCommerce search results page are listed below:
- Keep the visitor interested in the information on your website.
- Increase the time visitors spend on your site while decreasing bounce rates.
- Personalize the customer experience.
- Make it simple for visitors to find what they want.
In this article, we’ll illustrate 3 methods for customizing WooCommerce’s search results page: using Woostify Premium version, modifying the search.php file, and using the WooCommerce Product Table plugin.
Method 1: Customize the WooCommerce product search results page by using Woostify
If you want a simple but effective method to edit product search results pages, we suggest using the Woostify theme.
Woostify theme is a lightweight WooCommerce theme that focuses on boosting sales for online stores. It comes with both free and paid versions. With the Woostify free theme, you have all features to create a simple online store. But if you wish to include more functions in your eCommerce site like the ability to customize the product search results page, you need to upgrade to the premium version.
Woostify offers you a premium addon – WooBuilder that helps you easily build up any page in an online store such as a single product page, shopping page, category page, cart page, checkout page, and product search results page. It also comes with other add-ons like Ajax Product Search, and Smart Product Filter that gives you more options to customize the product search results page.
To create a product search results page with WooBuilder, you should follow the detailed steps below:
Step 1: Enable WooBuilder on your site
From your WordPress dashboard, navigate to Woostify Options:
Then, you will see the list of Woostify addons. Scroll down to WooBuilder, and click on the Activate link text.
Step 2: Create a product search results page
Once activating the addon, hit the Settings text to start creating a page.
Now, you need to press the Add New button to add a new page.
Choose the type of page. We are creating a product search results page, so I will choose Search Page.
In the Name Your Template box, just type in the name of the page you want. Then, hit the CREATE TEMPLATE button.
Step 3: Customize the product search results page
In this step, you can add any widget to your search results page, but normally, we will use some Woostify Product widgets like Woostify – Product default image, Woostify – Product Title, etc.
For further details about these add-ons, you can take a look at the following information:
Woostify – Product default image: this addon displays the images of the product that appears on the search results page.
Woostify – Product Title: this addon shows the name of the product that appears on the search results page.
Woostify – Product price: this addon shows the price of the product on the search results page.
Woostify – Product rating: this addon shows the rating of the product on the search results page. The rating is displayed as 5 stars level.
Woostify – Product content: this addon shows the product’s description.
Woostify – Product Add to Cart: This add-on displays an add to cart button under the name of the product.
To make other custom changes to the product search results, you can read the following posts:
Step 4: Publish the search page
After finishing all changes, do not forget to save everything by clicking Publish / Update button in the bottom left corner of the page. Finally, you should visit the website front to see if the search page you have created works well.
Method 2: Manually customize the product search results page by modifying the Search.php file
This method requires coding knowledge, so this is the best suitable approach for experienced users who are familiar with PHP and CSS coding. Also, businesses hire LAMP developers if there is a need to build a web application with more advanced product search features.
Step 1: Create a child theme
To make sure there will be not any issues in your theme, we highly recommend you use a child theme. As we are using the Woostify theme, we can easily create a child theme by filling out this form. Or if you are using any other theme, you can follow their guides to get a child theme.
Step 2: Create a search.php file
After you’ve made a child theme, the code from your previous theme has to be copied into a search.php file in your new child theme.
You can access this old code by either using FTP to open the relevant files on your server or by visiting Appearance > Editor > Search.php in your WordPress dashboard.
Step 3: Change the default title
You may now replace the default title in your child theme’s search.php file with the following:
<h1 class="search-title"> <?php echo $wp_query->found_posts; ?> <?php _e( 'Search Results Found For', 'locale' ); ?>: "<?php the_search_query(); ?>" </h1>This will display the title, as well as the number of posts found and the search keyword. “25 Search Results Found For My Search Query,” for example, would appear.
This is a simple method for customizing the search results page. So, if you want greater flexibility, proceed to the second method.
Method 3: Customize the WooCommerce search results page by using a plugin
You have various possibilities for customizing your WooCommerce search results page. While you could always go into the search.php code, there are various plugins that can be used to make comparable modifications.
The ideal functionality for you and your site will be determined by you. Small personal websites may profit from free plugins, however, larger sites may require a paid solution. In this tutorial, I will show you how to edit the product search results page WooCommerce by using WooCommerce Product Table.
Step 1: Determine what information to display in search results
WooCommerce Product Table gives you full control over every column in your search results, allowing you to display more information than WooCommerce default search.
You can include the following:
- Name, a brief, or long description, price, SKU, category, tag, and other basic product information.
- Product Attributes
- Individual taxonomies
In the plugin’s settings, go to WooCommerce > Settings > Products > Product tables to choose which columns to add.
Then, pick Columns and select the columns you want to add.
Step 2: Determine your search logic
Visitors can search any column in the WooCommerce Product Table using an instant Ajax search box by default.
This could include categories, tags, custom fields, and so on, depending on what you set up in step one.
However, if you have a huge number of products (thousands), this could lead to performance concerns. In this instance, WooCommerce Product Table’s lazy load function will come in handy.
There is no limit to the number of products that can be listed in the same table utilizing lazy load. However, it changes the logic of the search method.
If you don’t want to employ lazy loading, you can use the Product limit setting to limit the number of goods to include. You may also construct several search forms for different product categories or tags:
Step 3: Custom the Add to cart column
If you don’t want to employ lazy loading, you can use the Product limit setting to limit the number of goods to include. You may also construct several search forms for different product categories or tags:
Customers can add things to their carts directly from the search results page if an add to cart section is included.
The Add to cart column settings allow you to personalize how this works. You may:
- Allow customers to add several things to their cart by including a checkbox.
- Include a quantity selector if your consumers commonly purchase in bulk.
Choose whether to handle product variants with a drop-down menu or by making each variation its own row in your search results.
Step 4: Include product filters (Optional)
You may add WooCommerce product filters to the search results page using the Table Controls section, allowing customers to further tailor their search results.
You can apply filters to your table’s columns or develop your own custom filters, which allow you to apply filters to data that isn’t visible in your table, for example:
- WooCommerce categories
- WooCommerce tags
- Custom taxonomies
- Custom fields
These options will affect the filters that appear above the search results.
If you want to try something different, you can use WooCommerce Product Table’s specialized widgets, which allow you to add filters to any widget area. The filters applied via widgets, unlike the filters above the search results, do not employ Ajax. Customers must reload the page to apply filters on the sidebar.
Step 5: Create a search form for the front end
Here, you can use the [product table] shortcode to create a search form for the front end.
Customers can search through all of your items by default using the shortcode. If you have a large number of items, you can create several search forms for distinct product categories or tags by using the category or tag shortcode option.
[product_table category=”t-shirts”], for instance, may be applied to create a particular t-shirt search form.
Apart from the three methods above, you can create a search results page template with Elementor. Please check it in detail here.
Please take a look at the section below if you want to display only products on the search results page. This is extremely useful for those who are running an online store with WooCommerce.
How to show only products on the search results page in WooCommerce?
I’ll demonstrate the way to make a WordPress search results page only display WooCommerce products. The section below helps you display only products on the search results page. This is extremely useful for those who are running an online store with WooCommerce.
Step 1: Have your WooCommerce products ready
First and foremost, ensure that you have some WooCommerce products on your site. If your site currently lacks products, you can add them by going to Products > Add New in your WordPress Dashboard.
Step 2: Add code to the Functions.php file
WordPress has no default options/features for controlling what appears on the search results page; a search results page will display everything related to the chosen term. This comprises pages, posts, and items, among other things.
Here, we will add a simple code snippet to the functions.php file to limit the search results to WooCommerce products only. To ensure that there are no issues with the main theme, create a child theme, as we did in the first step of Method 1 in the section above.
From the WordPress dashboard, go to Appearance > Theme File Editor.
Once on the Theme File editor page, select functions.php
Then, copy the following code snippet and paste it at the end of the functions.php file.
// Only show products in the front-end search results
add_filter('pre_get_posts','lw_search_filter_pages');
function lw_search_filter_pages($query) {
// Frontend search only
if ( ! is_admin() && $query->is_search() ) {
$query->set('post_type', 'product');
$query->set( 'wc_query', 'product_query' );
}
return $query;
}
Once finished, remember to click the Update button to save what you have done.
That’s all. Your search results page now only displays WooCommerce products. Go to your site and test it to see how it works on your eCommerce site.
In conclusion,
There are several techniques to improve client satisfaction and revenue. Your online business may stand out and prosper by paying attention to even the smallest elements, like the search results page.
Among the 3 methods mentioned above, I highly recommend you, implement method 3 to create a custom product search results page in your store because of its simple process. And this guide is extremely useful and suitable for newbies who have just started their online business with WooCommerce.
We hope that your online store will greatly benefit from our in-depth guide to customizing the search results page in WooCommerce.
If you have any queries, don’t hesitate to ask them in the comments below.
Introducing WoostifyBlocks beta - Our new plugin for Gutenberg page builder is ready to test 