WooCommerce Product search. How does Nitro help shoppers search the product?

In the previous blog post in the series of “Nitro Theme Inside,” we’ve mentioned about Quick Search in WordPress Theme Customizer. Going further with search and improving the user experience we’ve designed and developed WooCommerce Product search plugin called WR LiveSearch based on AJAX. Let’s dig deeper how this eCommerce feature could help you to increase sales and improve UX of the whole website.

Search is the intuitive way of finding the product that we’re looking for, and we’ve discovered that it’s one of core features in any eCommerce sites whether it’s based on WooCommerce or another platform. From small to big shops it’s obvious that menu navigation is not enough and when our eyes are looking for the search field. When we find it, we type different keywords or keywords phrase that in our mind, it might be the SKU of the item, name of the product itself or anything related to the product, brand’s item, combination product name + product’s attributes and other. The era with search result page has gone and nowadays we care about the instant result right away without re-loading the browser’s page. We’ve reviewed the current solutions on the market and created own WooCommerce AJAX search mechanism to optimize the shopper experience.

LiveSearch WooCommerce Product search plugin concept

The concept is simple for both users and shop owners. Since the keyword that the shopper is searching for might be located in the product title, description, SKU or content, WR LiveSearch was designed in the way that it can scan all mentioned places. It’s up to the shop owner where WR LiveSearch should pay attention and get results for the shopper. Since Nitro WooCommerce theme version 1.2.0 search area covers SKU as well, so it gives more freedom to the shop owner to put right keywords in SKU too. It also helps the shopper to find desired product faster and save the time.

search-parameters

Focusing on users behavior WR LiveSearch goes forward with showing the result of category list or just suggestions taking into account the minimum number of characters to show. Let’s say we want to show the result when the shopper types three characters like “sunglasses,” i.e. since “sun” the first results would appear in the list of results. How many results to show you might ask? Nitro WooCommece Product search plugin also can show an exact number of results. Moreover, the customization covers icon color (both normal and hover states) and its size.

In the case with Nitro theme, it’s integrated into Header Builder, but you can still call this feature via PHP or just a simple shortcode in WordPress page. Let’s take a quick WooCommerce product search demo video:

Product Search Layout Styles

Well, Nitro aims to be #1 WooCommerce theme targeting to specific eCommerce niches, and it takes us to the next mission: put the live search feature in different design layout environments. So up until now, WR LiveSearch comes with 05 different product search layout styles including Fullscreen, Dropdown, Boxed, Topbar, and Expanded Width. Each layout creates unique product search experience for end users, and you can apply the best one that matches your eCommerce niche website. Let’s take a quick look then. Moreover, when you setup the defined layout you’ll see settings for that search style only.

Fullscreen style

A quick gif image recap with how the Fullscreen style works. Just clicking on the icon search there would be a fullscreen modal window with a focus for users to search the product. A quick convenient with eliminating distractions and helping users to find the product.

Visit live demo – Watches online shop theme

fullscreen-layout

Dropdown style

The standard way to show search result through drop down list. You can configure how many results to show, so it could match the design.

Visit live demo – Glasses online shop theme

dropdown-style

Boxed style

The search area covers not only search box but also the button style as well. It’s not custom CSS, but part of the search feature itself. Without coding skill you can configure the search field easily.

Visit live demo – Furniture online store

boxed-layout

Topbar style

The unique approach of Topbar style is the search field appear as the part of a theme from top position.

Visit the live demo at Animal accessories store

top-bar-before

After clicking on the search icon you’ll see the search area scrolling down.

top-bar-after

Expanded Width style

The original look of Sports equipment shop, the search is placed at the end of menu right position.

See the live demo – Sports equipment shop

expanded-width-before

Clicking on the search icon, the search box will be expanded and menu settings will be disabled temporary. The menu will get back when you close search field.

expanded-width-after

What’s next?

This great WooCommerce product AJAX search feature is one of those that have been improved with customers feedback. Our team keeps the weekly updates with shipping new Nitro theme improvement and product features. All information is available in Nitro change log, so you can easily follow what’s new in the product

If you’re new to Nitro theme why not to discover it more at http://nitro.woorockets.com

by Tony Bui

Co - founder & Customer Experience at WooRockets.com. A father and husband at the Family. Love to track and find the way to increase conversions in the shop.

Leave your comment

Ready to Sell Online?

Build Your Online Store with WooCommerce & Nitro Theme

Read more
Contact

Touch With Us

Nitro Theme + WooCommerce = Your New online store Learn More
Hello. Add your message here.