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.
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.
The Elementor add-on integrates seamlessly to provide official support with the following Elementor Pro widgets:
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.
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.
The following examples illustrate Ajax Load More integrated with Elementor Pro for infinite scrolling widget content with Ajax.
Infinite scrolling an Elementor Classic Layout with Ajax.
Infinite scrolling an Elementor Masonry card layout with Ajax.
Using load more functionality to load an Elementor Cards layout with Ajax.
Loading products with the Products widget and Ajax Load More.
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:
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.
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.
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.
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.
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.
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.
Widget Parameters and Options
The following configuration options are available with the Elementor Widget Connector.
Note: The majority of the following options are directly linked to core Ajax Load More 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|
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.
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:
- Visit the Licenses section within the Ajax Load More plugin.
- Enter the product key and click Activate License.
- If the status indicator turns green your add-on has been successfully activated (example below).
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.