How to Use the Product Search WooCommerce Block

by | Dec 18, 2021 | Etcetera | 0 comments

The extra merchandise you promote, the more difficult it may be for purchasers to seek out the precise pieces they’re on the lookout for. 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 need to purchase.

This article is going to display you the right way to upload the Product Seek block for your posts and pages and speak about the right way to configure it. We’ll additionally cross over a number of guidelines to make use of the block successfully.

Let’s get to it!

Upload the Product Seek WooCommerce Block to Your Put up or Web page

Including the Product Seek block in WordPress is an overly simple procedure. Open the Block Editor for the web page the place you need to position 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 seems like:

The Product Search block within the Block Editor

You’ll be able to edit each the sector label above the quest bar and the textual content inside the bar itself. Within the screenshot under, we changed the textual content for each parts:

Customizing the Product Search block

Whilst you use the quest bar, you’ll understand that it doesn’t come with an autocomplete feature. That implies the block gained’t give customers ideas after they sort product names inside the seek bar.

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

See also  How to Add a Button to Your Divi Header

Product Seek WooCommerce Block Settings and Choices

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

Changing the alignment of the Product Search block

Deciding 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 possibility.

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

Enabling the search field label for the Product Search block

You’ll additionally understand the Complex tab underneath the Content material segment 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 best features a handful of configuration settings, you’ll wish to use customized CSS to tweak its taste. Then again, that might not be important, for the reason that default design for the Product Seek block may be very minimalistic. Subsequently, it shouldn’t glance misplaced without reference to which WordPress theme you’re the usage of.

Guidelines and Very best Practices for The usage of the Product Seek WooCommerce Block Successfully

The Product Seek block may be very versatile. As such, you’ll position it nearly any place for your WordPress website online.

Preferably, you must imagine striking the block entrance and middle on any web page the place you show merchandise. That means, guests gained’t omit it, they usually’ll be capable to use it to seek out the pieces they’re on the lookout for:

The Product Search block in action

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

See also  11 Best Divi Layouts in 2024 (Top Choices)

Search results for hoodies in WooCommerce

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

Ceaselessly Requested Questions Concerning the Product Seek WooCommerce Block

Should you nonetheless have any questions in regards to the Product Seek block or the way it works, this segment must solution them. Let’s get started through speaking in regards to the variations between the Product Seek block and WordPress’ default seek function.

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

The default WordPress search tool can allow guests to search for merchandise on your retailer. The issue with that method 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 additionally 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 wish to click on at the seek button to question WordPress and spot the effects seem on a brand new web page. So long as your website online gives respectable efficiency and its pages load briefly, the loss of autocomplete shouldn’t be a serious problem.

Why Do A few of My Merchandise Now not Seem within the Seek Effects Pages?

Should you’re on the lookout for a particular 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 propose revising the quest phrases. If that doesn’t paintings, you’ll edit the product’s identify and outline to make it more uncomplicated for purchasers to seek out.

See also  Tips on how to Determine Your self as a Chief in Design Pondering


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

Including Product Seek blocks during your retailer will make it more uncomplicated for guests to seek out pieces they’re inquisitive about purchasing. If the goods themselves are top quality, this navigational function can translate to further purchases and lend a hand develop your small business.

Do you have got any questions on the right way to use the Product Seek WooCommerce block? Let’s discuss them within the feedback segment under!

Featured symbol by means of holaillustrations /

The publish How to Use the Product Search WooCommerce Block gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more


Submit a Comment