---
title: "How to Customize WooCommerce Search Results Page in Elementor?"
url: https://theplusaddons.com/docs/customize-woocommerce-search-results-page-in-elementor/
date: 2023-08-08
modified: 2026-04-11
lang: en
author: "Aditya Sharma"
description: "WooCommerce search results page plays a critical role in the user's shopping experience. A well-designed search results page can help users quickly find the products they are looking for, leading..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Customize-WooCommerce-Search-Results-Page-in-Elementor_-1024x536.jpg
word_count: 298
---

# How to Customize WooCommerce Search Results Page in Elementor?

## 

- Customize the WooCommerce search results page using the Product Listing widget from The Plus Addons for Elementor.
- Create a search archive template with either Nexter Builder or Elementor Pro and add products from the WooCommerce store.
- Utilize the WP Search Bar widget from The Plus Addons for Elementor to display search results on the customized listing.

WooCommerce search results page plays a critical role in the user's shopping experience. A well-designed search results page can help users quickly find the products they are looking for, leading to higher conversion rates.

With the help of the Product Listing widget from The Plus Addons for Elementor, you can easily customize the product search result on the search archive page.

*To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, [click here](/docs/product-listing-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing//#woo-products-wgts?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To create the search archive template, you can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or you can use Elementor Pro if you are already using it.

Now once you have created the search archive template, make sure you’ve added some products in your WooCommerce store, then follow the steps - 

1. Add the Product Listing widget to the template. 

2. Select **Search List **from the **Product Listing Types** dropdown.

![](https://theplusaddons.com/wp-content/uploads/2023/08/product-listing-search-list-new.png)

You can fine-tune the settings and style from other options.

### Add The Search Widget

Now, for the search widget, you have to use the [WP Search Bar](https://theplusaddons.com/plus-search-filters/advanced-wp-ajax-searchbar/) widget from The Plus Addons for Elementor.

Add the widget on the template or any other page and follow the steps -  

1. In the **Search Bar Field** tab, open the **Post** item, select **Post** from the **Source** dropdown, then select Product from the **Select Type** field.

![wp search bar post type product](https://theplusaddons.com/wp-content/uploads/2023/08/wp-search-bar-post-type-product.png)

2. Then go to the **Extra Options** tab, and turn off the **AJAX Search** toggle so that result shows in the search archive page.

![wp search bar ajax search disable](https://theplusaddons.com/wp-content/uploads/2023/08/wp-search-bar-ajax-search-disable.png)

Now if you search for a product, it will show in your customized listing.

Also, check [How to Create a WooCommerce Product Archive Page in Elementor](https://theplusaddons.com/docs/create-a-woocommerce-product-archive-page-in-elementor/).