Lazy load option for stores with many products
The lazy load option uses AJAX to speed up your WooCommerce product tables for sites with large numbers of products.
What is lazy load?
By default, WooCommerce Product Table loads all of the products in the table when it first loads. If you have more products than can fit on a single page of results (e.g. you have 50 products and are showing 20 rows per page) then it will create multiple pages with pagination links under the table. However, all the products on all the pages are loaded at the same time.
For large numbers of products, the default setup can cause a hit on performance as all matching products are fetched from the database and then formatted by the plugin. This can result in slower page load times and – for very large product databases – may even result in a website crash, server or database error when attempting to load the table.
If you have lots of products, then you can activate lazy load to avoid any performance issues. Lazy load uses AJAX to load one page of products at a time.
As your customers navigate between the pages of results in the product table, they will see a “Processing” message displayed (briefly) while the next products are loaded from the database.
How can I enable lazy load?
You can either enable lazy load globally on the plugin settings page, or by adding
lazy_load="true" directly to the product table shortcode for individual tables.
Limitations of lazy load
Enabling lazy load means that all product fetching, searching, and sorting is handled by the server rather than in the browser. This leads to some limitations with tables that use lazy load:
- Separate variations will not work. If using lazy load, you can only use
variations="dropdown"to show variations as dropdown lists in the add to cart column.
- The filter dropdowns above the table will display all possible items (e.g. a ‘Colour’ filter will display all possible colours for all products), regardless of the products displayed in the table. This means that some filter choices may not be applicable to certain products in your table. If you are concerned about this then we recommend creating a unique attribute or taxonomy for the products in each table on your site, and only display filter dropdowns for the attributes/taxonomies relating to these products.
- The search box is very restricted – it will only search within the name, SKU and description columns in your table (if present). It is not possible to search within other columns such as attributes, custom fields, taxonomies, etc. when using lazy load. If you want to search by other data then we recommend one of the following workarounds:
- Add the information to the name or long description fields so that it will be searchable in lazy load. For example, if your product is called ‘T-Shirt’ and the attribute is ‘Black’ then you can add the title to something like ‘T-Shirt – Black’. Please note that the search box will still look in the name and product description fields even if these aren’t columns in your product table.
- If you want people to be able to find products by category, tag, custom taxonomies, attributes or variations, then you can list these as filter dropdowns above the table instead of using the search box.
- Table sorting is limited – your users can only click on a column header to sort the table by ID, name, price, reviews, or date. The
sort_byoption is also limited – please see the sort_by documentation for details.
These limitations are due to the way in which WordPress and WooCommerce interact with the database, and are unavoidable. The reason is that the sorting is handled by the server when the products are retrieved from the database. A lazy loaded table doesn’t know which products are in the table (because only the current page has been loaded), so it’s not possible to look within the table to search, sort, filter, etc. and the plugin must do this using other methods.