---
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
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?

## Key Takeaways

- The Product Listing widget from The Plus Addons for Elementor allows customization of the product search result on the search archive page.
- The WP Search Bar widget from The Plus Addons for Elementor requires turning off the AJAX Search toggle to display results on the search archive page.
- Creating a search archive template can be done using either the free Nexter Builder or Elementor Pro.

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/).

## Frequently Asked Questions

**Q: What should I do if the Product Listing widget isn't displaying my products?**
A: If the Product Listing widget isn't showing your products, first ensure that you have added products to your WooCommerce store. The widget requires products to be present in order to display them. Additionally, check that you have selected 'Search List' from the Product Listing Types dropdown to ensure the correct display format.

**Q: What is the best way to use the WP Search Bar widget for WooCommerce?**
A: For optimal use of the WP Search Bar widget, ensure you set the Source dropdown to 'Post' and select 'Product' in the Select Type field. This configuration allows the search bar to specifically target WooCommerce products, improving the accuracy of search results. Remember to turn off the AJAX Search toggle to display results directly on the search archive page.

**Q: Does the customization affect the loading speed of the search results page?**
A: Customizing the search results page using The Plus Addons for Elementor can impact loading speed, especially if you add numerous widgets or complex settings. It's advisable to test the page performance after customization to ensure it remains user-friendly and doesn't deter potential customers due to slow loading times.

**Q: What happens if I forget to activate The Plus Addons for Elementor?**
A: If you forget to activate The Plus Addons for Elementor, the Product Listing and WP Search Bar widgets will not function. This means you won't be able to customize the WooCommerce search results page effectively. Always ensure the plugin is installed and activated to access its features.