---
title: "How to Add Ajax Load More Button to Search Result in Elementor?"
url: https://theplusaddons.com/docs/add-ajax-load-more-button-to-search-result-in-elementor/
date: 2023-09-13
modified: 2026-04-10
author: "Aditya Sharma"
description: "If you have too many content on your site, loading all content in the search results can take a long time. Using a load more button can greatly improve the..."
image: https://theplusaddons.com/wp-content/uploads/2023/09/How-to-Add-Ajax-Load-More-Button-to-Search-Result-in-Elementor_-1024x536.jpg
word_count: 405
---

# How to Add Ajax Load More Button to Search Result in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Search Bar widget allows users to add a load more button to Ajax search results.
- Users can set how many items load at once by adjusting the More posts on click/scroll field in the Load More/Lazy Load tab.
- To display a load more button, the Posts Per Page field must be set to a lower number than the total number of search result items.

If you have too many content on your site, loading all content in the search results can take a long time. Using a load more button can greatly improve the search experience by loading a limited number of results and users can click the load more button to load more results.

With the Search Bar widget from The Plus Addons for Elementor, you can easily add a load more button to the Ajax search result. 

*To check the complete feature overview documentation of The Plus Addons for Elementor Search Bar widget, [click here](/docs/search-bar-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/plus-search-filters/advanced-wp-ajax-searchbar/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Search Bar widget on the page or template and follow the steps -

1. Open the item under **Search Bar** then select the appropriate source and type for search.

2. Now go to **Extra Option** tab and make sure the **AJAX Search** is enabled.

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

> *Note: The AJAX Search will be enabled by default.*

3. Then go to the **Load More/Lazy Load** tab, and select **Load More** from the **Loading Options** dropdown.

![search bar load more](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-load-more.png)

From the **Button Text** field, you can change the text on the button, while the **Loading Text** field allows you to change the text that appears when more items are being loaded. Additionally, you can also modify the text that appears when all items are loaded by using the **All Posts Loaded Text** field.

Then, from the **More posts on click/scroll** field, you can set how many items will load at once on the button click.

By turning on the **Counter** toggle, you can show a counter for the number of pages and from the **Counter Text** field, you can change the section text.

4. After that go to the **Results Area** tab, and from the **Posts Per Page** section, you can set how many items will load in the initial search result.

![search bar posts per page](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-posts-per-page.png)

Depending on the total number of items and the number set in the **Posts Per Page** field, you’ll see a load more button when you make a search which you can use to load more results.

> *Note: To show a load more button, you must set a lower number in the ****Posts Per Page**** field than the total number of search result items.*

![search bar load more demo](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-load-more-demo.gif)

Also, read [How to Add Ajax Lazy Load to Search Result in Elementor](https://theplusaddons.com/docs//add-ajax-lazy-load-to-search-result-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the load more button isn't appearing in my search results?**
A: If the load more button isn't showing, check the Posts Per Page setting in the Results Area tab. You need to set a lower number in this field than the total number of search result items for the button to appear. This ensures that there are more results available to load, enhancing user experience.

**Q: How does enabling AJAX Search impact the search results in Elementor?**
A: Enabling AJAX Search allows for a smoother user experience by loading search results dynamically without refreshing the page. This feature is enabled by default in The Plus Addons for Elementor, making it easier for users to find content quickly and efficiently.

**Q: What is the best practice for setting the Posts Per Page value when using the load more button?**
A: A good practice is to set the Posts Per Page value lower than the total number of items available in your search results. This configuration ensures that the load more button appears, allowing users to load additional results seamlessly. It enhances the overall search experience by preventing long loading times.

**Q: Does the load more button work with all types of content in Elementor?**
A: The load more button can be used with any content type that is indexed in the search results when using The Plus Addons for Elementor. This feature is particularly useful if you have a large amount of content, as it allows users to load results incrementally, improving site performance.