WooCommerce

Infinite scroll WooCommerce products with Ajax Load More.

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.

Features

A few key features of the WooCommerce add-on for Ajax Load More.

URL Rewrites

Users can easily share your paged content no matter how deep the Ajax loaded content is.

View Examples

Easy Integration

Ajax Load More configuration happens within the WooCommerce panel of the WordPress Customizer.

View Configuration

Google Analytics

Track visitor interaction and engagement by sending pageviews to your Google Analytics account.

Filters

The WooCommerce add-on is fully integrated with all WooCommerce filtering widgets.

Add-on Details

Learn more about the WooCommerce add-on.

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.

View Shop

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.

Examples

The following examples use the Storefront WooCommerce theme and are intended to illustrate the functionality of the WooCommerce add-on for Ajax Load More.

Configuration

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.

Customizer

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.

Settings Panel

Ajax Load More Customizer Settings

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:

  • Shop
    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.

Display Panel

Ajax Load More Customizer Display Settings

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.
  • Scrolling
    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.

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: 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.

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 a confirmation email containing your license key, please check your spam/junk folder. If you still cannot locate the email, contact me at darren [at] connekthq.com or use the Product Support form.