The extra merchandise you promote, the tougher it may be for purchasers to seek out the precise pieces they’re in search of. Many guests don’t have time to navigate page after page of products. That’s the place the Product Seek WooCommerce block can come to the rescue. It allows you to add a search bar that guests can use to seek out the pieces they wish to purchase.

This article is going to display you how one can upload the Product Seek block for your posts and pages and talk about how one can configure it. We’ll additionally cross over a number of pointers to make use of the block successfully.

Let’s get to it!

How one can Upload the Product Seek WooCommerce Block to Your Submit or Web page

Including the Product Seek block in WordPress is an overly easy procedure. Open the Block Editor for the web page the place you need to put the component, and click on at the + signal so as to add a brand new block. Then, use the quest bar to search for “product seek”:

Adding a Product Search block

The block itself contains two parts: a header and a seek bar. Right here’s what the Product Seek block looks as if:

The Product Search block within the Block Editor

You’ll edit each the sphere label above the quest bar and the textual content throughout the bar itself. Within the screenshot underneath, we changed the textual content for each parts:

Customizing the Product Search block

While you use the quest bar, you’ll realize that it doesn’t come with an autocomplete feature. That suggests the block gained’t give customers ideas once they kind product names throughout the seek bar.

Regardless of that slight usability drawback, the Product Seek block is easy to make use of. Shoppers can kind complete or partial product names, and WordPress will go back related effects on a brand new web page.

Product Seek WooCommerce Block Settings and Choices

The Product Seek block provides a minimum vary of configuration choices. In the event you hover your mouse over the block, you’ll exchange its alignment the usage of the formatting menu that looks above it:

Changing the alignment of the Product Search block

Settling on the block and clicking at the gear-shaped icon within the top-right nook of the display will open a menu that comes with an extra configuration choice.

Right here you’ll see a environment that permits you to take away the seek box label. That’s the heading you notice above the product seek bar:

Enabling the search field label for the Product Search block

You’ll additionally realize the Complex tab underneath the Content material phase within the configuration settings. The Complex tab features a box for including customized CSS categories to the Product Seek block:

Adding custom CSS classes to the Product Search block

Since this block handiest features a handful of configuration settings, you’ll want to use customized CSS to tweak its taste. Alternatively, that might not be essential, because the default design for the Product Seek block may be very minimalistic. Subsequently, it shouldn’t glance misplaced irrespective of which WordPress theme you’re the usage of.

Pointers and Easiest Practices for The use of the Product Seek WooCommerce Block Successfully

The Product Seek block may be very versatile. As such, you’ll position it virtually anyplace to your WordPress web site.

Preferably, you will have to imagine striking the block entrance and middle on any web page the place you show merchandise. That method, guests gained’t pass over it, and so they’ll have the ability to use it to seek out the pieces they’re in search of:

The Product Search block in action

In our revel in, customers are much less more likely to fail to remember the Product Seek block in case you position it above product grids. When a customer makes use of the component, it’s going to ship them to a brand new web page together with the effects for his or her seek:

Search results for hoodies in WooCommerce

Moreover, the Product Seek block will handiest be efficient in case you use descriptive product titles and thorough descriptions. With out correct identifiers, the quest function gained’t lead guests to the pieces they would like. In lots of circumstances, deficient design right here can result in misplaced gross sales.

Incessantly Requested Questions In regards to the Product Seek WooCommerce Block

In the event you nonetheless have any questions in regards to the Product Seek block or the way it works, this phase will have to resolution them. Let’s get started by way of speaking in regards to the variations between the Product Seek block and WordPress’ default seek function.

Can I Use the Default WordPress Seek Function As an alternative of the Product Seek Block?

The default WordPress search tool can permit guests to search for merchandise on your retailer. The issue with that means is that WordPress’ seek capability wasn’t designed with WooCommerce merchandise in thoughts. Which means that effects pages don’t show product costs or Upload to Cart buttons.

Moreover, if guests use the WordPress seek bar to appear up merchandise, they may also see different pages and posts seem some of the effects. Thankfully, the usage of the Product Seek block solves those issues.

Can I Permit Autocomplete for the Product Seek WooCommerce Block?

The Product Seek block doesn’t come with autocomplete capability. Which means that customers want to click on at the seek button to question WordPress and notice the effects seem on a brand new web page. So long as your web site provides respectable efficiency and its pages load briefly, the loss of autocomplete shouldn’t be a major problem.

Why Do A few of My Merchandise No longer Seem within the Seek Effects Pages?

In the event you’re in search of a selected product and it doesn’t seem while you use the Product Seek block, there could be a subject matter with the key phrases you’re the usage of. If that’s the case, we advise revising the quest phrases. If that doesn’t paintings, you’ll edit the product’s name and outline to make it more straightforward for purchasers to seek out.


The Product Seek WooCommerce block would possibly glance easy. Nonetheless, it’s an very important component for any retailer that has an intensive product catalog. Many e-commerce customers are accustomed to looking for merchandise in a heartbeat. Despite the fact that the default WordPress Search block works smartly sufficient, it’s now not the most suitable option for WooCommerce stores.

Including Product Seek blocks all through your retailer will make it more straightforward for guests to seek out pieces they’re serious about purchasing. If the goods themselves are top quality, this navigational function can translate to further purchases and assist develop what you are promoting.

Do you’ve any questions on how one can use the Product Seek WooCommerce block? Let’s discuss them within the feedback phase underneath!

Featured symbol by the use of holaillustrations /

The submit How to Use the Product Search WooCommerce Block seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]