Lazy load option for stores with many products
The WooCommerce Product Table plugin comes with a lazy load option. It lets you list an unlimited number of products without any performance problems. WooCommerce lazy load is ideal for stores 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 the plugin's lazy load feature to avoid any performance issues. Lazy load uses AJAX to load one page of WooCommerce 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.
-
- Without lazy load (the default)
-
- With lazy load
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.
For example: [product_table lazy_load="true"]
How can I disable lazy load?
You can either disable lazy load globally on the plugin settings page, or by adding lazy_load="false" directly to the product table shortcode for individual tables.
For example: [product_table lazy_load="false"]
Implications of using lazy load
Enabling lazy load means that all product fetching, searching, and sorting is handled by the server rather than in the browser. As a result, lazy loaded tables behave differently from non-lazy loaded tables:
- 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 work differently:
- They 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 filter dropdowns will work independently of one another so that when you select an item from one filter, the content of the other filter dropdowns will not update. All possible terms will still be displayed in each filter, regardless of what is selected in the other filters.
- The search box works differently - instead of searching the contents of the table, the search box above the table looks within the product name, SKU, short and long description for the product (regardless of whether these are present as columns in the table). The search box does not look in any other columns of the table, such as attributes, custom fields, taxonomies, etc. If you want to search by other data then we recommend one of the following workarounds:
- Add the information to the product name, SKU, short and 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 use the word 'Black' in the short description. Please note that the search box will still look in the product name, SKU, short and long 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.
- For a complete solution, you can use WooCommerce Product Table with the SearchWP plugin. With this integration, SearchWP takes over the search box in your lazy loaded table. It gives you 100% control over which columns are searchable, as well as offering other advanced search features such as analytics and the ability to set priorities.
- 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.
Why does lazy load work differently?
The above differences are due to the way in which WordPress and WooCommerce interact with the database, and are unavoidable.
The searching in a non-lazy loaded table is handled client-side, directly in the browser. The plugin simply looks at the contents of the HTML on the current page, and displays the appropriate results.
In contrast, the searching in a lazy loaded table uses the native search function of WordPress itself, which 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 of the table 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. WordPress itself has pre-indexed all the data in the wp_posts database table, which includes the product name, short and long description fields. That's why a lazy loaded table can quickly search by name, short or long description, but unfortunately not by other fields such as categories or attributes.
When I enable lazy load, fewer products appear in the table!
The option to display each variation on its own row is only available when lazy load is disabled. If you enable lazy load then you need to use the 'dropdown' variation option, which lists each product on one row with the variations as a dropdown list in the add to cart column.
If you enable lazy load while using the separate variations option, then it automatically disables the separate variations option so that each product only takes up one row of the table. As a result, you may notice that your table contains fewer products with and without lazy load.