Categorized as Plugin

Infinite Scroll in Elementor (New Plugin)

Updated on by

A lot of Elementor users have been requesting for a feature that will add Load More and Infinite Scroll to posts and archive widgets. So I went ahead and created a addon plugin that will do the same. Infinite Scroll Elementor is a new plugin that pulls the next posts automatically when the reader approaches the bottom of the page.

Hey there, today we are going to look at the easiest way to implement ajax load more elementor and elementor pro infinite scroll. For this, we will be using Elementor and Infinite Scroll Elementor Plugin for infinite scroll.

Infinite Scroll Elementor – New Plugin - Joy Chetry

A few days ago while I was working on a new project, I was asked by the client to add Ajax Load More and Infinite Scroll functionality to the Elementor Post widget. I had everything ready inside the template with Custom CSS and ACF (Advanced Custom Fields) but when I looked for the AJAX Load More button in the Pagination section, it wasn't there. So I looked for some other way to implement it but I couldn't find any accurate solution to add ajax to the default Elementor post widgets and ended up buying a plugin.

The problem with these custom plugins is that they come with additional widgets and extra hooks that you would use on very rarely or never even use. They inject a lot of extra CSS and JavaScript files on every page of the website and while doing these they eat up a lot of server resources and while doing these the website becomes bloated and heavy. And as a result, the GTmetrix and Google PageSpeed scores go down which will indirectly affect your ranking in Google.

However, that was past but now with some help from around the web, I successfully added WordPress infinite scroll without a plugin. The process of adding it manually is too complex and hard, so with the help of resources around the web, Infinite Scroll, and Elementor developer documentation, I went ahead and made ajax load more pagination possible. Along with Elementor widgets it also has Custom Selectors so that you can add it to every other Elementor Addon widget that has support to traditional pagination. And the great thing is that it adds only one JavaScript file and zero CSS.

Widgets

  1. Infinite Scroll Elementor - ISE
  2. Button Load Elementor - ISE (In Beta)
  3. Infinite Single Post - ISE (On the Roadmap)

Pagination applicable to

  1. Elementor Posts
  2. Elementor Posts Archive
  3. Elementor WooCommerce Products
  4. Custom Selectors (Applicable to any Elementor Addon)

Options

  1. Adjust Image Ratio (Discarded)
  2. Enable support for JetSmartFilters (Discarded)
  3. Add Bottom Offset (Discarded)
  4. Add Animation Time (Discarded)

Features

  1. Add Loading Image (Integrated into the plugin)
  2. Add No More Items Text (Integrated into the plugin)

Tutorial

There are 4 basic steps involved to add ajax load more to elementor
The implementation steps are as follows:

  1. Install the Infinite Scroll Elementor plugin.
  2. Create a template using Elementor.
  3. Add Elementor Posts, Elementor Products, Elementor Posts Archive, or Elementor Products Archive widget to your template.
  4. Add Infinite Scroll Elementor - ISE widget below the Post template.

And that's it, you have successfully added elementor load more pagination in WordPress.

Download from Github

1. How to install Infinite Scroll Elementor?

How to Install Infinite Scroll Elementor - Joy Chetry

  1. Go to Infinite Scroll Elementor's Github Releases page.
  2. Locate 'Latest Release'.
  3. Click on 'Source code (zip)' to download the latest version.
  4. Upload the .zip file to WordPress plugins and click on activate.

And that is all you have to do to install and use WordPress infinite scroll – ajax load more.

Steps to Install Infinite Scroll Elementor - Tutorial by Joy Chetry
Steps to Install Infinite Scroll Elementor - GIF Tutorial

2. How to add Elementor Posts Infinite Scroll?

How to add Elementor Posts Infinite Scroll - Joy Chetry

Here are 10 easy steps in which you will learn how to add WordPress infinite scroll and ajax load more elementor.
Note that these steps will work both for Elementor Posts and Elementor Post Archive widgets.

  1. Add Elementor post widget to your template.
  2. Style the post widget, add all your desired elements and styles.
  3. Select and add any query you desire.
  4. (Important) Inside the pagination tab change Pagination from None to Previous/Next, this is very important for elementor lazy load posts to work.
  5. Inside Pagination, you can enter any number to set Page Limit or you can remove the number and empty the box to make Elementor posts widget infinite scroll i.e scroll till the end of the Query.
  6. Now locate the Infinite Scroll Elementor - ISE widget in the Elements panel under the Infinite Scroll Elementor category or you can just search for Infinite Scroll Elementor - ISE.
  7. Place it below the Elementor widget.
  8. Infinite Scroll is ON by default, you can also set it to No to turn off the element.
  9. Select target widget (in this case Elementor Post widget) from Pagination For dropdown list.
  10. Ajax infinite scroll will not work inside the Elementor editor, so just save/update the template and preview the template.

And there you have it, you just added lazy load posts to Elementor.

Steps to Add Infinite Scroll to Elementor Posts - Tutorial by Joy Chetry
Steps to Add Infinite Scroll to Elementor Posts - GIF Tutorial

3. How to add WooCommerce Infinite Scroll in Elementor?

How to add WooCommerce Infinite Scroll in Elementor - Joy Chetry

Here are 9 easy steps in which you will learn how to add woocommerce infinite scroll in an elementor template.

  1. Add the Elementor Product widget to your template.
  2. Configure the Product widget to your desired setting.
  3. Select and add any query you desire.
  4. (Important) Inside the content tab, set the Pagination to On by clicking on NO and make it YES, this is very important for elementor lazy load posts to work.
  5. Now locate the Infinite Scroll Elementor - ISE widget in the Elements panel under the Infinite Scroll Elementor category or you can just search for Infinite Scroll Elementor - ISE.
  6. Place it below the woocommerce widget.
  7. Infinite Scroll is ON by default, you can also set it to No to turn off the element.
  8. Select target widget (in this case Elementor Products) from Pagination For dropdown list.
  9. Ajax infinite scroll will not work inside the Elementor editor, so just save/update the template and preview the template.

Hurrah! there you go, you just added Woocommerce Infinite Scroll.

How to Add WooCommerce Infinite Scroll in Elementor - Tutorial by Joy Chetry
How to Add WooCommerce Infinite Scroll in Elementor - GIF Tutorial

4. How to show Loading Image while scrolling?

In version 2.0 I have added Loading Image to the widget so that you don't have to worry about it.

5. How to show "No More Items Left" at the end?

In version 2.0 I have added No More Items Left text to the widget so that you don't have to worry about it.

Alternative to Infinite Scroll Elementor

While there are a lot of plugins that you can use in WordPress to implement infinite scroll, Catch Infinite Scroll is one of the options (other than Infinite Scroll Elementor) to load next WordPress posts with ajax in Elementor.

Infinite Scroll Elementor (ISE) vs Catch Infine Scroll

Drawbacks and limitations of Catch:

  • You set WordPress infinite scroll and ajax load more to only one widget.
  • Once you set infinite scroll to a widget it gets applied to the whole site and Catch has no control over it.
  • You cannot use Catch more than once on the same page.
  • Limited styling options.
  • The plugin is not native to Elementor.
  • Adds menu item in WordPress dashboard (for those who like it clean in the admin area).

Whereas in Infinite Scroll Elementor:

  • You set WordPress infinite scroll and ajax load more to unlimited widgets.
  • Unlike Catch, ISE gives you total control over where infinite scroll gets applied.
  • You can use ISE more than once on the same page.
  • The plugin comes default with beautiful Loading Animation and No more post text.
  • The plugin is native to Elementor and does not apply anywhere else.
  • It does not add any menu item in the WordPress admin area.
  • No bloat codes, it adds only one JavaScript file and zero CSS.

How to Install and Use Catch?

  1. Install the plugin.
  2. Inside plugin settings, you need to change the following settings:
  3. Set "Load On" to scroll or load more.
  4. To apply Catch to Elementor Posts widget add the following selectors.
    1. Navigation Selector: nav.elementor-pagination
    2. Next Selector: nav.elementor-pagination a.next
    3. Content Selector: .elementor-posts-container
    4. Item Selector: article.elementor-post

Changelog

Following is the changelog of the Infinite Scroll Elementor plugin.

2.1.2 - 2020-09-10

  • Tweak: General Fixes.
  • Tweak: Added Loading animation to Elementor Products widget infinite scroll.

2.1.1 - 2020-09-06

  • Tweak: Grammar slam.

2.1 - 2020-09-05

  • Tweak: Added new Infinite Scroll JavaScript.
  • Tweak: Added compatibility with WordPress 5.5.
  • Tweak: Added compatibility with Elementor 3.0.
  • Tweak: Added support for Other Elementor Addons.
  • Tweak: Removed custom Loading Image and No More Items option.
  • Tweak: Added Loading Image and No More Items and removed option to the code.

1.5.25 - 2020-05-25

  • Tweak: Renamed Infinite Scroll Elementor widget to Infinite Scroll - ISE.
  • Tweak: Removed Load More from Infinite Scroll - ISE.
  • Tweak: Added separate widget Load More - ISE.

1.5.24 - 2020-05-24

  • Tweak: Added Extra Options.
  • Tweak: Conditional load for Assign Load More ID

1. How to use Infinite Scroll in Version 1.0?

  1. Locate the Infinite Scroll widget in the Elements panel, under Infinite Scroll Elementor category, and place it below the widget you want.
  2. Select "Yes" beside Infinite Scroll (don't do anything if it is "Yes" by default).
  3. Select target widget from Pagination For dropdown list.
  4. Make Image Ratio "Yes" if you have modified Image Ratio in the target widget. Turn it "Yes" or "No" to what fits best.
  5. Turn JetSmartFilters to "Yes" if you are using JetSmartFilters plugin, ignore if you do not use it.
  6. Adjust Bottom Offset and Animation Time if you want to.
  7. Optional: In Extra Options section you can assign Loading Image ID and No More Items ID if you want to.

2. How to use Load More Button in Version 1.0?

  1. Locate the Load More widget in the Elements panel, under Infinite Scroll Elementor category.
  2. Place it below the target widget (in the same section and column).
  3. Insert a section or inner section below the target Elementor widget.
  4. Give this section or inner section an ID or Class in Advanced section (e.g. load-more-posts).
  5. Add a Button widget inside this new section.
  6. In the Load More widget select "Yes" beside Load More (don't do anything if it is "Yes" by default).
  7. In the input filed of Assign Load More ID insert the same ID (E.g. #load-more-posts) or class (E.g. .load-more-posts).
  8. Select target widget from Pagination For dropdown list.
  9. Make Image Ratio "Yes" if you have modified Image Ratio in the target widget. Turn it "Yes" or "No" to what fits best.
  10. Turn JetSmartFilters to "Yes" if you are using JetSmartFilters plugin, ignore if you do not use it.
  11. Adjust Bottom Offset and Animation Time if you want to.
  12. Optional: In Extra Options section you can assign Loading Image ID and No More Items ID if you want to.

3. How to show Loading Image while scrolling in Version 1.0?

  1. Insert a section or inner section below the target widget and give it an ID or class (E.g. loading-image-container).
  2. Add an Image widget inside the new section, add an image or gif.
  3. Select Infinite Scroll or Load More widget.
  4. In the input field of Assign Loading Image ID under Extra Options section insert the same ID (E.g. #loading-image-container) or class (E.g. .loading-image-container).

4. How to show "No More Items Left" at the end in Version 1.0?

  • Insert a section or inner section below the target widget and give it an ID or class (E.g. no-more-image-container).
  • Add an Image widget inside the new section, add an image or gif.
  • Select Infinite Scroll or Load More widget.
  • In the input field of Assign No More Items ID under Extra Options section insert the same ID (E.g. #no-more-image-container) or class (E.g. .no-more-image-container).

5. What is and how to use "JetSmartFilters" in Version 1.0?

  1. This option enables compatibility for JetSmartFilters.
  2. It only works on a pagination base page.
  3. In JetSmartFilters widget set filter setting Apply type to "AJAX" and Apply on to "Value change".

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Thanks for making this, it's exactly what I needed! I have one little issue - not sure if it's related... but the posts that come up after infinite scroll has been initiated no longer show their featured image. Refreshing the page doesn't help. They are all there for the initial posts on the page, but none after infinite scroll break point.

    Any suggestions??

    1. Yes you will see it in the wordpress repo once the plugin is uploaded, for now you can only download the plugin from github.