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?
To enable lazy load, add
lazy_load="true" to the product table shortcode.
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.
- The search box is very restricted – it will only search within the name and description columns in your table (if present). It is not possible to search within other columns such as SKU, custom fields, taxonomies, etc. when using lazy load. If you want to search by data such as SKU then we recommend one of the following workarounds:
- Add the SKU to the name or description fields so that it will be searchable in lazy load. For example, if your product is called ‘Black T-Shirt’ and the SKU is ‘123456’ then you can add the title to something like ‘123456 – Black T-Shirt’. 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 – you can only sort the table by ID, name, price, reviews or date. The
sort_byoption is also limited – please see the sort_by documentation for details.
- The search_on_click feature is disabled, so users can’t click on a category or tag to filter the table.
These limitations are due to the way in which WordPress and WooCommerce interact with the database, and are unavoidable.