How to Customize WooCommerce Product Search Results Page

8

Would you like to customize your WooCommerce product search results page?

By default, WordPress and WooCommerce have limited search capabilities. By customizing your product search results, you’ll be able to increase sales and grow your business.

In this article, we’ll show a few easy ways you can customize your WooCommerce product search results page to provide a better user experience.

How to Customize WooCommerce Product Search Results PageHow to Customize WooCommerce Product Search Results Page

Why Customize WooCommerce Product Search Results Page?

By default, WooCommerce comes with a built in product search feature. However, it has serious limitations. This could mean that your customers won’t be able to find the products they’re looking for.

As a result, you may be losing potential sales. If your customers can’t find what they’re looking for, then they may not come back to your online store.

How does this happen? The default WooCommerce search only indexes the title, content, and excerpt of posts and pages. It doesn’t consider any content within custom fields while performing a search.

That’s a problem because a great deal of your WooCommerce product data is stored in custom fields. As a result, none of your WooCommerce product categories, tags, reviews, and other special attributes will be indexed.

Luckily, you can solve this problem using a WooCommerce product search plugin.

That being said, let’s take a look at some examples of how you might improve your WooCommerce product search results page.

Here is what you will learn from this guide. You can click the link to skip ahead to the section you’re interested in.

Making WooCommerce Product Data Searchable

The first thing you need to do is install and activate the SearchWP plugin. For more details, see our step by step guide on how to install a WordPress plugin.

SearchWP is the best custom search plugin for WordPress, and is used by over 30,000 websites. It’s also one of the best plugins for WooCommerce because it delivers more relevant product results to your customers.

Note: You’ll need at least the Pro plan to access WooCommerce integration.

Upon activation, you need to visit the SearchWP » Settings page and switch to the ‘Support’ tab to enter your license key. You can find it in your account area on the SearchWP site.

Paste Your SearchWP License KeyPaste Your SearchWP License Key

Next, you need to install and activate the WooCommerce Integration extension.

You can download it from your account area on the SearchWP website and install it as you would install any other WordPress plugin.

Install the WooCommerce Integration ExtensionInstall the WooCommerce Integration Extension

Now you are ready to set up your SearchWP custom search engine.

Simply go to the SearchWP » Settings page and make sure you’re on the ‘Engines’ tab. Once there, you need to click the ‘Sources & Settings’ button.

Click on the 'Sources & Settings' ButtonClick on the 'Sources & Settings' Button

This will bring up a popup where you should make sure the checkbox next to ‘Products’ is checked. This will allow SearchWP to index your WooCommerce products.

WooCommerce product reviews are stored as comments. If you want to make reviews searchable, then you should also check the ‘Comments’ box.

Check the Products and Comments BoxesCheck the Products and Comments Boxes

Once you’ve done that, click on the ‘Done’ button to close the popup.

Now you need to scroll down to the ‘Products’ section. Notice that by default, the plugin will only look at the product title, content (description), slug, and excerpt (short description).

Click the 'Add/Remove Attributes' Button in the Products SectionClick the 'Add/Remove Attributes' Button in the Products Section

You can extend SearchWP’s reach by clicking on the ‘Add/Remove Attributes’ button.

This will bring up a popup where you can include specific custom fields and taxonomies in searches. For this tutorial, we’ve added the ‘color’ and ‘size’ custom fields, and the taxonomies ‘product categories’ and ‘product tags’.

Add Custom Fields and Taxonomies to the Search EngineAdd Custom Fields and Taxonomies to the Search Engine

You can now click the ‘Done’ button, and you should notice that those custom fields and taxonomies have been added to the products section of SearchWP.

After that, you can adjust the weight of each attribute. If you’d like to make a specific attribute more important in search results, then simply move the slider to the right.

Adjust the Importance of Each AttributeAdjust the Importance of Each Attribute

When you’re done, go ahead and click on the ‘Save Engines’ button at the top of the screen to save your settings.

SearchWP will then start rebuilding your search index in the background. After that, the plugin will be ready to start delivering more relevant search results to your WooCommerce store.

Click the 'Save Engine' ButtonClick the 'Save Engine' Button

SearchWP will automatically use any search forms on your online store. However, if you need to add a search form, then see our step by step guide on how to create a custom WordPress search form. This will also teach you how to style the results page using custom CSS.

Now you can go to your WooCommerce store to try out the search feature. We’ll search for the product category ‘hoodies’, and all products in that category will be displayed.

Product Search Results Page PreviewProduct Search Results Page Preview

To learn more, see our guide on how to make a smart WooCommerce product search.

Customizing Which Products Will Be Shown on Search Results Pages

By default, SearchWP will include all of the products in your online store in the search results. However, you may wish to specify which products should or should not be displayed.

For example, you can automatically exclude products if they fall under certain conditions, like if they are discontinued or out of stock. Or you might only display products that are on sale or come with free shipping.

For example, the AeroPress WooCommerce store lets you search for products with free shipping. This is a great incentive for customers to make a purchase.

AeroPress Product Search Results PageAeroPress Product Search Results Page

To get started, you should click the ‘Edit Rules’ button in SearchWP’s Products section.

Click the 'Edit Rules' ButtonClick the 'Edit Rules' Button

Right now there are no rules. You can create as many rules as you need.

To create your first rule, you need to click the ‘Add Rule’ button.

Click the 'Add Rule' ButtonClick the 'Add Rule' Button

Now you can specify the conditions for which products should be shown or excluded from search results. For this tutorial, we’ll exclude all out of stock products.

First, you should select ‘Exclude entries if’ from the first drop down menu. Then select the ‘Product visibility’ taxonomy and type ‘outofstock’ in the field next to it.

Creating a Rule to Exclude Out of Stock ProductsCreating a Rule to Exclude Out of Stock Products

If you like, you can add additional conditions that should be excluded by clicking the ‘OR’ button. Once you’re finished adding rules, click the ‘Done’ button.

Now all you need to do is press the ‘Save Engines’ button at the top to store your changes.

Click the 'Save Engine' ButtonClick the 'Save Engine' Button

To learn about more ways you can make use of SearchWP’s rules, see our guide on how to exclude specific pages, authors, and more from WordPress search.

Displaying Product Search Results in Live Mode

Live search will improve the search experience on your WooCommerce store by automatically showing search results as your customers type their queries.

For example, Good Dye Young offers live search results on their hair and makeup products.

Relevant products and articles are immediately displayed while the customer types their search query, providing a better user experience.

Good Dye Young Product Search Results PageGood Dye Young Product Search Results Page

To add this to your own store, all you need to do is install and activate the free SearchWP Live Ajax Lite Search plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, your WooCommerce search forms will automatically provide live search.

Live Search PreviewLive Search Preview

For more details, see our guide on how to add live search to your WordPress site.

Finding Partial Matches and Other Advanced Features

Partial matching will help your customers to find what they are searching for, even if they don’t type the whole word or use the correct spelling.

For example, the Magna-Tiles online store has partial matching enabled. Customers only need to type part of a product name to find it in the search results.

Magna-Tiles Product Search Results PageMagna-Tiles Product Search Results Page

To enable partial matching in SearchWP, you should navigate to SearchWP » Settings and click on the Advanced tab.

On this page, you can enable some settings that will make it easier for your users to find what they are looking for.

SearchWP Advanced SettingsSearchWP Advanced Settings

Check any of these options that you would like:

  • Partial matches will also display results that don’t quite match the term that is being searched for.
  • Automatic “Did you mean?” corrections will suggest a slightly different search term that will match more products in your online store.
  • Supporting “quoted/phrase searches” will allow your users to use quotes when searching for exact phrases.
  • Highlighting terms in results will make it easier for your customers to find what they are looking for in the search results.

We hope this tutorial helped you learn how to customize the WooCommerce product search results page. You may also want to learn how to add wholesale pricing in WooCommerce, or check out our list of the best email marketing services.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Social Media Auto Publish Powered By : XYZScripts.com