SearchWP

News

Add Custom WooCommerce Search Widget

Want to add a custom product search widget to WooCommerce?

Adding a search widget to your online store helps your site visitors to find products faster. By doing this, you get to boost conversion and improve user experience.

In this article, we’ll show you how to add a custom WooCommerce search widget the easy way.

Why Add a Custom Product Search Widget to WooCommerce?

Product search is an important part of the eCommerce shopping experience. If your store visitors can’t find the products they need, they may look elsewhere.

The default WooCommerce product search feature is slow and lacks the power your store needs. It doesn’t index product attributes, categories, tags, and reviews. This makes it hard to give relevant search results.

Default WooCommerce search lacks power

Want to improve your WooCommerce store’s search experience? Then you need to add a custom search widget.

You can add a search bar at certain locations of your site like the sidebar. With this widget, your users can navigate your store better and complete purchases faster.

A custom product search widget has lots of other benefits. For example, you can control where you want the search engine to look for results. You can choose to index product attributes like variations, tags, and short descriptions.

This will help your users find all the products with a specific attribute. For example, they can easily search for items tagged ‘refurbished’ in an electronics store.

You can add a search widget to WooCommerce either by writing code manually or using a WordPress plugin. Some benefits of using a plugin include:

  • It’s easy to set up and doesn’t require technical knowledge.
  • You get to save time.
  • You don’t need to hire a developer.
  • There’s little to no risk of breaking your site.

Let’s talk about how to add the widget below.

How to Add WooCommerce Product Search Widget (Easy Way)

The easiest way to add a custom search widget to WooCommerce is to use a WordPress plugin. For this tutorial, we’ll be using the best WordPress search plugin, SearchWP.

searchwp WordPress plugin

SearchWP improves your native WordPress search by indexing everything on your website. By doing this, your site visitors won’t miss out on any product, document, or page they need.

With this plugin, your search engine will no longer ignore important product details like variations, categories, and tags. This means your users get to find relevant WooCommerce products faster.

Besides WooCommerce search, SearchWP also offers other powerful features like:

  • PDF and office document indexing. Do you sell books or other text-based resources? Your users will be able to find them more easily. SearchWP considers the content of document files in your media library when searching.
  • Visitor statistics and insights. You get to see what your visitors are searching for. You can use this information to improve your services.
  • Multiple search engine support. Set up different search fields in different site locations and pages. You can customize each field to meet unique user search needs in each location.

Once you install and activate SearchWP, it’ll automatically add these features to your store.

You can use the plugin to add a custom WooCommerce search widget in 4 steps.

Step 1: Install and Activate SearchWP

To get started, the first step is to grab a copy of SearchWP here.

For you to use the WooCommerce search feature, you need a Pro or Agency license. So make sure to choose Pro or Agency when you get your SearchWP plan here.

The Agency plan is ideal for large companies with more than 5 websites. You can also get the Pro license if you have 1-5 websites.

Once you’ve grabbed your own copy of SearchWP, you’ll see links to download 2 versions of the plugin. You want to choose the latest version for the best performance.

SearchWP plugin download links

SearchWP will also send a license key to your email. Remember to save your license key to a notepad for use later.

Next, log into your WordPress dashboard and upload the SearchWP plugin.

Need some help on how to do this? You can check out this post on how to install a WordPress plugin for step-by-step instructions.

After you’ve installed and activated SearchWP, it’ll add a navigation link to the top corner of your WordPress dashboard. You can click it to go to the settings page.

go to SearchWP settings page

Next, you need to activate your license. Navigate to the License tab of the settings page and enter the license key from your confirmation email. Then click Activate.

Activate SearchWP license

Congratulations! You’ve now successfully installed and activated the SearchWP plugin.

Now, let’s move on to the next step below.

Step 2: Install and Activate the WooCommerce Extension

To use the WooCommerce search feature, you need to add the SearchWP WooCommerce extension.

Since you already have the Pro or Agency license for SearchWP, you can download the WooCommerce add-on for free here.

Download SearchWP WooCommerce extension

After downloading the extension, follow the same process in the first step to upload it to WordPress.

The WooCommerce extension will then add all the advanced features to all your WooCommerce search fields.

Now, let’s customize how the search engine will look for results.

Step 3: Set Up a SearchWP Custom Search Engine

A custom WooCommerce search widget allows your users to search for products in different ways. To support this, you need control over how your search engine looks for products.

SearchWP lets you select different sources. You can also adjust the relevance of each product or content attribute. For example, you can choose to index the product title, short description, or category.

You can even create multiple search engines and display them on different pages. This will offer your user a unique search experience on each page.

To create your first SearchWP engine, click SearchWP in the top panel of your WordPress dashboard.

go to SearchWP settings

On the SearchWP settings page, you can either create a new search engine or edit the default options. Click Add New to create a new engine.

Add new SearchWP search engine

To set up a WooCommerce product search engine, click Sources & Settings.

SearchWP search engine sources and settings

You’ll see a popup with a list of sources to choose from. Make sure you check the Products box. Click Done after choosing the appropriate sources.

SearchWP add products to sources

Next, scroll down to the Products tab and click Add/Remove Attributes.

Customize WooCommerce product search attributes

Here you get to fully customize where the search engine should look. By default, you can choose from the title, content, slug, and short description.

But you can even expand these options with custom fields and taxonomies. For example, you can choose to index the product variations, tags, and shipping classes.

SearchWP custom fields and taxonomies

This helps your users find products that match a particular attribute. For example, they may want to search for all ‘Size L’ clothing items in your store.

After adjusting all your custom settings, click Done.

Then click Save Engines. SearchWP will start rebuilding your search index based on the new settings.

save changes to SearchWP engine

Finally, it’s time to display your custom WooCommerce search widget on your website. Let’s talk about how you can do this in the next step below.

Step 4: Add WooCommerce Search Widget to Any Site Location

By displaying your product search field as a widget, your customers can search for your products on any page on your website.

You can add a custom WooCommerce search widget anywhere on your site if your theme supports it. The best location for easy navigation is the sidebar. You can also use the header and footer.

To add the widget to any of these locations, go to Appearance » Widgets.

WordPress widgets settings

On the widgets settings page, select the area you want to add the widget and click the + icon. In this tutorial, we’ll be adding the search widget to the sidebar area.

Add WordPress sidebar widget

Type search into the field, and then select the search icon.

add search bar to WordPress sidebar

Then click Update in the upper right corner. Your sidebar now has a custom WooCommerce search widget.

Now, your site will return relevant search results when a user searches for a product attribute value.

WooCommerce custom search results

But WooCommerce still redirects the user to a separate search results page. We can make this better by adding live search to your WooCommerce store.

Making WooCommerce Product Search Better With Live Search

Adding live search to your store further improves its search experience. With this feature, your visitors don’t need to go to another page to see search results.

You can add live search to WooCommerce using a free SearchWP add-on plugin called SearchWP Live Ajax Search.

SearchWP Live Ajax Search

The plugin suggests relevant results as the user is typing. This way, they get to see their search results instantly and save a lot of time.

To install the plugin, go to Plugins » Add New in WordPress.

WordPress add new plugin

Then type searchWP in the field and click Install Now next to the SearchWP Live Ajax Search plugin.

install searchwp live ajax search

Next, click Activate and your new live search plugin is now ready for use.

Now search results appear instantly when the user types in the search bar.

SearchWP Live Ajax Search results

In this article, you’ve learned how to add a custom WooCommerce search widget using SearchWP.

Now, your site visitors can easily find relevant products by simply searching for their attributes.

Ready to create your first WooCommerce search widget? Get started with SearchWP now!

You can also check out our guide on how to add live autocomplete search to WordPress.

Want to make your search awesome right now?

More than 30,000 sites have chosen SearchWP!

You can utilize all of the content that’s gone unrecognized by native WordPress keyword search instantly with SearchWP.

Get SearchWP for just $99

  • Committed Support
    If you need help, support is fast, friendly, and here for you
  • Streamlined Setup
    Installation and setup that’s optimized for speed
  • Great Documentation
    Helpful, clear, and usable documentation is a priority

See what SearchWP customers have to say

  • “The plugin do all what we need – and the support is GREAT! Helped me in many questions and at PHP-code! THANKS!”

  • “I had problems with indexing umlauts on a German-language website. SearchWP support found a solution in a very short time. He also quickly found the right solution for my other suggestions. I can highly recommend the plugin.”

  • “I approached the support team with an idea for a customised implementation of the SearchWP weighting system. I was really just looking for a point in the right direction, but Jon went above and beyond all expectations to help me.”

[wpforms id="3080"]