The WooCommerce add-on integrates infinite scrolling into your existing shop, product archives and product search templates.
Enable infinite scroll or load more functionality on WooCommerce product templates and archives in a few clicks using only the WordPress Customizer.
How It Works
The WooCommerce add-on works by utilizing WooCommerce core hooks and filters to automatically integrate Ajax Load More functionality into your existing shop templates.
The woocommerce_before_shop_loop and woocommerce_after_shop_loop hooks are used to inject Ajax Load More into product listing templates and allow for infinite scrolling of the results.
Unlike other Ajax Load More add-ons, the WooCommerce add-on does not require users to create a custom shortcode, Repeater Template or place the shortcode into a page template. All of these steps are handled on the server side leaving little room for issues to arise.
View the Configuration section below for information on how to enable and configure the WooCommerce add-on.
The following examples use the Storefront WooCommerce theme and are intended illustrate the functionality of the WooCommerce add-on for Ajax Load More.
Infinite scrolling the main WooCommerce shop page.
Infinite scrolling product categories and tag archives.
When enabled, Ajax Load More will infinite scroll product search results.
The WooCommerce add-on setup and configuration happens within the WooCommerce panel of the WordPress Customizer (Admin > Appearance > Customize). Modifying page templates, building custom shortcodes or creating Repeater Templates is not required for implementation of this add-on.
Note: WooCommerce integration is disabled by default, visit the WooCommerce panel of the Customizer inside your WordPress admin to enable Ajax Load More.
Once activated, Ajax Load More creates two new option panels (Settings and Display) under the WooCommerce section of the WordPress Customizer. Editing the content of these panels is how Ajax Load More is configured for WooCommerce.
The Settings panel is where you select the WooCommerce templates to enable Ajax Load More functionality.
Ajax Load More can be enabled on the following template types:
Enable Ajax Load More on the main WooCommerce Shop page.
- Shop Archives
Enable Ajax Load More on shop archive pages – product categories and tags.
- Product Search
Enable Ajax Load More on product searches.
By default, Ajax Load More is disabled and must be turned “on” before it will be rendered on these templates.
The display panel is where Ajax Load More parameters such and loading style, button labels and scroll settings are configured.
The following parameters are available to be modified:
- Button/Loading Style
Select an Ajax loading style – choose between a Button or Infinite Scroll..
- Button Label
The text of the Load More button.
- Button Loading Label
Update the button label while content is loading.
Load products as users scroll the page.
- Scroll Override
Allow scrolling to initiate the loading of posts. If false, users will have to click the ‘Load More’ button to begin.
- Scroll Distance
The distance (in pixels) from the bottom of the screen to trigger a post load.
- Back/Fwd Button
Enable navigation between Ajax loaded content using back and forward browser buttons.
- Scroll Offset
Set the offset top position of the window. The offset determines at which point the URL will update while scrolling through Ajax loaded pages.
Note: Not all core Ajax Load More display parameters are currently available with the WooCommerce add-on. More will be introduced as they are completed.
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: WooCommerce 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.