How to Customize WooCommerce Search Result Page with ProductX - WPXPO

How to Customize WooCommerce Search Result Page with ProductX

  • By: Ruhul
  • Updated:
How to Customize WooCommerce Search Result Page with ProductX

Do you want to customize WooCommerce search result page?

It isn’t much you can do with the search function in WordPress or WooCommerce out of the box. However, you can boost sales and expansion efforts by tailoring the products to customers’ searches.

In this post, we will demonstrate how to improve the user experience of your WooCommerce product search results page with ProductX.

Why Customize WooCommerce Product Search Results Page?

WooCommerce has a built-in product search function by default. However, it has significant restrictions. This might result in your clients being unable to locate the desired goods as they don’t have a properly optimized search result page.

As a consequence, you may be losing prospective sales. Customers may not return to your online shop if they cannot locate what they are searching for.

Fortunately, ProductX can resolve this issue in no time. With the new WooCommerce Builder from ProductX, creating a store now is a very simple and easy process.

How to Customize WooCommerce Search Result Page

Here we’ll show you how to customize the WooCommerce search results page using the plugin ProductX.

Video Tutorial

Before entering the thorough process, we think you’ll love to have a visual walkaround of the tutorial process.

Step 1: Install and Activate ProductX

Install ProductX
Install ProductX

First, install and activate ProductX. Here’s a step-by-step guide to doing so:

  • Open the Plugins menu in the WordPress Dashboard.
  • Now install the plugin by clicking the “Add New” option.
  • Type “ProductX” into the search bar and then hit the “Install” button.
  • Click the “Activate” button after you’ve installed the ProductX plugin.

Step 2: Turn on the Builder

Turn on WooCommerce Builder Addon
Turn on WooCommerce Builder Addon

After installing ProductX, you need to activate the Builder. To turn it on, you need to:

  • Go to ProductX from the WordPress dashboard.
  • Select the Addons Tab
  • Enable the Builder via the toggle option.

Step 3: Create WooCommerce Search Result Page Template

Creating WooCommerce Search Result Page
Creating WooCommerce Search Result Page

After turning on the Builder, you must create a search result page. To do that:

  • Go to WordPress Dashboard.
  • Select ProductX, then Go to WooCommerce Builder.
  • Select Add product search.
  • Select Start from scratch (if you want to make it from scratch) or Import a template (if you want a premade template).
  • Name your template, click the icon (toggle block inserter), and then add the desired Blocks to complete your product search page.
  • Now hit Publish. 

And you’re done with creating a WooCommerce search result Page Template.

Step 4: Arrange WooCommerce Search Result Page 

Arranging Search Result Page
Arranging Search Result Page

You have made the template for the search result page. Now you have to set it up. First, plan your WooCommerce search result page by adding a few blocks with the help of this guide. 

To make the process easy for everyone, we have given a specific section dedicated to the required blocks. Which are:

  • Archive Title
  • Product Grid

You can design your search result page however you want with these blocks. Then just hit publish to publish the page.

Step 4: Customize WooCommerce Search Result Page 

You’ve already created and designed the search result page, so we’ll move on to modifications now. 

By default, when you create a search result page with ProductX, the blocks give you various customization options. So, let’s discover what customization ProductX has for its blocks.

Archive Title Block

Archive Title Block Settings
Archive Title Block Settings

It’s a dynamic block that works with your WooCommerce search result page. With ProductX, you can:

  • Customize all types of typographies. 
  • Add custom prefix for search bar.
  • Add image.
  • Add excerpt and modify its typographies.

But let’s tell you a secret with this block, in the prefix, use “Search result for: “as prefix text. It’ll surely make your search page appealing.

Product Grid Block

Product Grid Block Settings
Product Grid Block Settings

Well, these are the default blocks you get with ProductX. With these blocks, you can:

  • Show products.
  • Change the view.
  • Customize the size of product grids.
  • Show’ hots’, ‘sales’ and ‘in stock’ tags for products.
  • Show prices, reviews, and additional information about products.
  • Show and customize titles.
  • And so much more.

Another tip for this block always enables pagination as it is a must for search pages.


This article should have helped you understand how to customize the WooCommerce search results page. If you have any questions about this, please let us know, and we would be happy to assist you.

You can check out WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!

Like this article? Spread the word

Written byRuhul

Ruhul is a technical and SEO-driven content writer, a tech enthusiast, and a pro gamer. He loves exploring new things and has written over 1,500 articles on diverse topics.

Leave a Reply