How to Customize WooCommerce Search Results Page in Elementor?

Updated on August 25, 2023 by Ananda
Table Of Content

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.

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

To create the search archive template, you can use the free Nexter Builder 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.

Product listing search list

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

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

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.

Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website

    Related Docs