How one can Use the Product Seek WooCommerce Block

by | Dec 18, 2021 | Etcetera | 0 comments

The additional products you advertise, the harder it can be for patrons to hunt out the right items they’re on the lookout for. Many visitors don’t have time to navigate page after page of products. That’s where the Product Search WooCommerce block can come to the rescue. It means that you can add a search bar that visitors can use to hunt out the items they want to acquire.

This text will show you how you can add the Product Search block on your posts and pages and speak about how you can configure it. We’ll moreover go over numerous tips to use the block effectively.

Let’s get to it!

How you can Add the Product Search WooCommerce Block to Your Put up or Internet web page

Together with the Product Search block in WordPress is a very simple process. Open the Block Editor for the internet web page where you wish to have to place the element, and click on on on the + sign so that you can upload a brand spanking new block. Then, use the hunt bar to seek for “product search”:

Adding a Product Search block

The block itself incorporates two portions: a header and a search bar. Proper right here’s what the Product Search block looks like:

The Product Search block within the Block Editor

You’ll edit each and every the field label above the hunt bar and the text during the bar itself. Throughout the screenshot beneath, we modified the text for each and every portions:

Customizing the Product Search block

Whilst you use the hunt bar, you’ll notice that it doesn’t include an autocomplete feature. That means the block received’t give shoppers concepts when they sort product names during the search bar.

Without reference to that slight usability downside, the Product Search block is straightforward to use. Consumers can sort entire or partial product names, and WordPress will return similar results on a brand spanking new internet web page.

See also  The way to Use myCred to Upload a Rewards Gadget to WordPress

Product Search WooCommerce Block Settings and Possible choices

The Product Search block supplies a minimal range of configuration alternatives. When you hover your mouse over the block, you’ll change its alignment the use of the formatting menu that appears above it:

Changing the alignment of the Product Search block

Settling at the block and clicking on the gear-shaped icon throughout the top-right corner of the show will open a menu that incorporates an additional configuration selection.

Proper right here you’ll see a setting that allows you to remove the search field label. That’s the heading you understand above the product search bar:

Enabling the search field label for the Product Search block

You’ll moreover notice the Complicated tab beneath the Content material subject material section throughout the configuration settings. The Complicated tab includes a field for together with custom designed CSS classes to the Product Search block:

Adding custom CSS classes to the Product Search block

Since this block best includes a handful of configuration settings, you’ll need to use custom designed CSS to tweak its style. However, that is probably not very important, since the default design for the Product Search block is also very minimalistic. Due to this fact, it shouldn’t look out of place regardless of which WordPress theme you’re the use of.

Tips and Very best Practices for The usage of the Product Search WooCommerce Block Effectively

The Product Search block is also very flexible. As such, you’ll place it nearly any place on your WordPress internet website online.

Ideally, you’ll have to consider hanging the block front and center on any internet web page where you display products. That manner, visitors received’t move over it, they usually’ll be capable of use it to hunt out the items they’re on the lookout for:

The Product Search block in action

In our experience, shoppers are a lot much less much more likely to disregard the Product Search block if you happen to place it above product grids. When a buyer uses the element, it’s going to send them to a brand spanking new internet web page along with the results for their search:

See also  15 Unfastened Photoshop Choices for Home windows Customers

Search results for hoodies in WooCommerce

Additionally, the Product Search block will best be environment friendly if you happen to use descriptive product titles and thorough descriptions. Without right kind identifiers, the hunt serve as received’t lead visitors to the items they would really like. In a number of cases, poor design correct right here may end up in out of place product sales.

Often Asked Questions Regarding the Product Search WooCommerce Block

When you however have any questions regarding the Product Search block or how it works, this section must answer them. Let’s get began by the use of talking regarding the diversifications between the Product Search block and WordPress’ default search serve as.

Can I Use the Default WordPress Search Serve as Instead of the Product Search Block?

The default WordPress search tool can allow visitors to seek for products in your store. The problem with that suggests is that WordPress’ search capacity wasn’t designed with WooCommerce products in ideas. Which means that that results pages don’t display product prices or Add to Cart buttons.

Additionally, if visitors use the WordPress search bar to look up products, they might also see other pages and posts appear one of the vital results. Fortunately, the use of the Product Search block solves the ones problems.

Can I Allow Autocomplete for the Product Search WooCommerce Block?

The Product Search block doesn’t include autocomplete capacity. Which means that that buyers need to click on on on the search button to query WordPress and spot the results appear on a brand spanking new internet web page. As long as your internet website online supplies first rate potency and its pages load in short, the lack of autocomplete shouldn’t be a serious problem.

See also  Obtain a FREE Header and Footer Template for Divi’s House Care Structure Pack

Why Do A couple of of My Products Not Appear throughout the Search Results Pages?

When you’re on the lookout for a decided on product and it doesn’t appear whilst you use the Product Search block, there is usually a subject material with the important thing words you’re the use of. If that’s the case, we suggest revising the hunt words. If that doesn’t art work, you’ll edit the product’s title and description to make it more uncomplicated for patrons to hunt out.


The Product Search WooCommerce block would perhaps look simple. However, it’s an essential element for any store that has an extensive product catalog. Many e-commerce shoppers are accustomed to searching for products in a heartbeat. Although the default WordPress Search block works neatly enough, it’s no longer the most suitable choice for WooCommerce stores.

Together with Product Search blocks during your store will make it more uncomplicated for visitors to hunt out items they’re fascinated with buying. If the products themselves are high quality, this navigational serve as can translate to additional purchases and help increase your business.

Do you’ve any questions about how you can use the Product Search WooCommerce block? Let’s talk about them throughout the comments section beneath!

Featured image by way of holaillustrations /

The put up How to Use the Product Search WooCommerce Block appeared first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more


Submit a Comment