The Elementor add-on provides functionality for infinite scrolling of Elementor Posts and WooCommerce widgets with Ajax Load More.

Quickly add infinite scroll or load more to your Elementor Posts and WooCommerce listing widgets with Ajax Load More and the intuitive Elementor Widget Connector.

How It Works

The Elementor add-on works by providing a single connection point between supported Elementor Pro Widgets and Ajax Load More. This linked connection allows Ajax Load More to hook into the Elementor query and infinite scroll the results.

Unlike the majority of other Ajax Load More add-ons, the Elementor add-on does not require the creation of custom shortcodes, Repeater Templates or the modification of page templates to implement infinite scrolling.

With the Elementor Add-on, you’ll simply add an Elementor widget to a page or post and then drop the Elementor Widget Connector¬†directly below.

Elementor Widget Connector on a page being edited

After the Elementor Widget Connector has been placed on the page, you’ll need to modify a few of simple configuration options in each of the widgets before you can start infinite scrolling Elementor content.

Learn more about the settings and available options in the Configuration section below.


Supported Widgets

The Elementor add-on integrates seamlessly to provide official support with the following Elementor Pro widgets:

Posts

Elementor Posts Widget The Elementor Posts Widget allows you to display WordPress featured posts in various layouts like Classic, Cards or Full Content Skins and choose them from a particular category, taxonomy and more filters.

WooCommerce Products

The Products Widget for WooCommerce allows you design product listings visually and without any coding to showcase your products & services in the best way possible.

There are additional integrations coming soon, including filters and hooks that will allow Ajax Load More to be integrated into other plugins that have created custom Elementor widgets for listings.

Note: The Posts and Products Widgets are available for users with an active Elementor Pro license.


Examples

The following examples illustrate Ajax Load More integrated with Elementor Pro for infinite scrolling widget content with Ajax.


Configuration

Add-on configuration and implementation happens within the Elementor widget panel when editing a post or page. Modifying page templates, building custom shortcodes or creating Repeater Templates is not required for implementation of this add-on.

The two-step Elementor implementation guide is as follows:

Step 1: Elementor Widget

The first step is to add a supported Elementor widget to your page and configure the following settings:

Add Widget

Drag and drop an instance of an Elementor Widget onto your page or post. Once the widget in on the page, configure the layout settings such as Columns, Posts Per Page and other Query parameters as you normally would do when adding an Elementor widget.

Elementor Posts Widget

Elementor Widget Connector options panel.

Enable Pagination

For Ajax Load More to infinite scroll your widget content you must enable pagination directly on the widget.

For the Posts Widget, look under the Content tab and expand the Pagination section to reveal the available options.

Once expanded, select Previous/Next or Numbers + Previous/Next from the Pagination dropdown and set the Page Limit to the amount of pages you want Ajax Load More to load via infinite scroll. In our examples, we set Page Limit to 100, however you can make this value any number greater than 1.

Elementor Select Pagination in Widget Options

For the WooCommerce Products Widget, the Pagination setting is located directly beneath the Columns and Rows under the Content tab. Just turn on Pagination and you are good to go.

Note: Adding pagination to your Elementor Widget will inform Ajax Load More of additional content to load. Don’t worry, the pagination will be hidden on the front end of the site.

Add Unique ID

Under the Advanced tab of the Widget, locate the CSS ID option and enter a unique ID for this widget. The ID value should be unique as Ajax Load More will use the ID to help with the integration process later on.

Remember the ID as we will need it in Step #2 as we configure the Elementor Widget Connector.

Ajax Load More Post Widget ID Entry Screen

Add a unique CSS ID under the Advanced tab – we’ve chosen post-listing as our ID.

Once you’ve configured the Elementor Widget, save your changes and move onto Step #2!

Step 2: Elementor Widget Connector

The Elementor Widget Connector is a custom Elementor widget included with the Elementor add-on for Ajax Load More. This step is to add the widget directly below the Elementor Widget from step #1 and configure the options to integrate Elementor and Ajax Load More.

Add Elementor Widget Connector

Under the Elements panel in the sidebar, locate and expand the Ajax Load More section, then drag and drop an instance of the Elementor Widget Connector onto the page.

Elementor Posts Widget Connector for Ajax Load More

Drag an instance of the Elementor Widget Connector onto the page.

Configure Widget

Once the Elementor Widget Connector has been added to your page it’s time to start the configuration process. If you are familiar with Ajax Load More then this will feel a lot like building a custom shortcode using the Shortcode Builder.

Ajax Load More Posts Widget Connector Options

The Elementor Widget Connector options panel.

The Elementor Widget Connector has 10+ options that can be configured and edited, however the only required option within the entire widget is Target. The Target option is used as an element reference by Ajax Load More and therefore is required by the infinite scroll functionality.

The rest of the widget options will all fallback to their defaults if they are not adjusted before being published.

Note: When entering the ID value for Target remember to include a # before the ID –¬† e.g. #post-listing

Now that the Target is setup to reference the Elementor Widget in Step #1 you should be ready to start infinite scrolling with Ajax Load More and Elementor.

There are many other Ajax Load More widget parameters such as Loading Style, Button Label and Scrolling, however these all have default values and are not required to be set for Ajax Load More implementation to be completed.

Read more about the available widget parameters in the Elementor Connector Widget section below.


Elementor Widget Connector

The Elementor Widget Connector for Ajax Load More widget is a custom drag and drop Elementor widget that provides an interface for building unique Ajax Load More instances.

Let’s think of it as a Shortcode Builder created specifically for Elementor.

The Elementor Widget Connector in the Elementor Interface.

Widget Parameters and Options

The following configuration options are available with the Elementor Widget Connector.

Note: The majority of the following options directly match up to core Ajax Load More shortcode parameters.

Target Enter the ID or Classname of the Elementor Posts widget. Default = null
Update URL Update the browser URL as pages are loaded and come into view. Default = true
Loading Style Select an Ajax loading style – choose between a Button or Infinite Scroll styles. Default = default
Button Label The text of the Load More button. Default = Older Posts
Button Loading Label Update the button label while content is loading. Default = null
Scrolling Load additional pages as users scroll the page. Default = true
Scroll Override Allow scrolling to initiate the loading of posts. If false, users will have to click the ‘Load More’ button to begin. Default = true
Scroll Distance The distance (in pixels) from the bottom of the screen to trigger a post load. Default = 100
Previous Posts Link Label The text displayed when the previous posts link is rendered. Leave empty to not render component. Default = Previous Posts
Back/Fwd Button Enable navigation between Ajax loaded content using back and forward browser buttons. Default = true
Scroll Offset Set the offset top position of the window. The scroll offset determines at which point the URL will update while scrolling through Ajax loaded pages. Default = 50

Installation

Upon purchase of this add-on you will receive a confirmation/purchase receipt email. Your receipt will contain a direct link for downloading your copy of Ajax Load More: Elementor and a license key.

After downloading the add-on, upload the unzipped files to your /wp-content/plugins/ directory or visit your plugins dashboard and upload the downloaded .zip under Add New.

License Activation

To activate your add-on and receive updates directly in your WordPress plugins dashboard users are required to enter the license key that was included with their purchase receipt.

To activate a license key:

  1. Visit the Licenses section within the Ajax Load More plugin.
  2. Enter the product key and click Activate License.
  3. If the status indicator turns green your add-on has been successfully activated (example below).
License Key Example

If you did not receive your confirmation/purchase receipt email and license key, please check your spam/junk folder and if you still cannot locate the email please contact me at darren [at] connekthq.com or use the Product Support form on the website.