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.
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 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 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.
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.
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.
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.
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.
To set up a WooCommerce product search engine, click Sources & 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.
Next, scroll down to the Products tab and click Add/Remove 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.
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.
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.
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.
Type search into the field, and then select the search icon.
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.
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.
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.
Then type searchWP in the field and click Install Now next to the SearchWP Live Ajax Search plugin.
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.
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.
