Legacy mode: The old and new product table frontends
WooCommerce Product Table 5.0 introduced a completely new frontend for your product tables. It replaces the jQuery DataTables library that earlier versions used, and it is what powers the new search, filter, sort and pagination features.
Legacy mode keeps the old jQuery DataTables frontend in place. This article explains who has it enabled, how to switch, and which options belong to each mode.
Do I have legacy mode enabled?
It depends on whether you are a new or an existing customer:
- If you installed WooCommerce Product Table 5.0 or later for the first time, legacy mode is off. Your tables use the new frontend straight away.
- If you updated from an earlier version, legacy mode was switched on automatically during the update. This is deliberate. It means your product tables keep looking and behaving exactly as they did before, and nothing changes on your store until you choose to switch.
To check, go to Products → Product Table → Settings → Advanced and look at the Frontend library option. If it is ticked, you are in legacy mode.
How to switch to the new frontend
- Go to Products → Product Table → Settings → Advanced.
- Untick Frontend library.
- Save your changes.
- If Caching is enabled on the same page, click Clear Cache.
Important: If your product tables look unchanged after switching, it is almost certainly the cache. WooCommerce Product Table stores the rendered table, so the old table can keep being served after you change the setting. Clear the cache using the button on the Advanced tab, and clear any caching plugin or server cache you use as well.
We recommend switching on a staging site first if you have customized your product tables with CSS, templates or code snippets, as the new frontend uses different markup and CSS classes.
The new frontend builds a search and filter index in the background. On a large store the index takes a few minutes to finish, and a table can show no products until it does. You will see a progress notice in the WordPress admin while this happens.
What you gain by switching
The new frontend adds the following, none of which are available in legacy mode:
- Indexed search, filtering and sorting, which is much faster on large catalogs.
- Lazy loading on every table, without the limitations on filtering, sorting and pagination that used to come with it.
- Multi-select filters, so customers can choose more than one value per filter.
- Filters inside the column headings, as well as above the table.
- Active filters displayed above the table, so customers can see and clear what is applied.
- Filter counts next to each filter option.
- A search box inside each filter dropdown, which makes a filter with hundreds of options quick to use.
- Multi-column sorting.
- Infinite scroll as an alternative to pagination, with a container height setting.
- Unique table URLs, so a searched, filtered, sorted or paginated table can be linked to directly. This also means the browser back button returns customers to the table exactly as they left it.
Options that only apply to legacy mode
The following settings disappear when you switch to the new frontend, because they are not needed or not supported:
- AJAX (use AJAX when adding to the cart) - the new frontend handles add to cart differently.
- Accent-Insensitive search - the new search treats accented and non-accented characters as interchangeable without a setting.
- Diacritics sorting - handled by the new sorting index.
The Lazy load option has gone from the settings page altogether. Every table on the new frontend loads one page of products at a time, so there is nothing to switch on. See search and filter indexing for how this works.
FAQ
Can I use legacy mode for some tables only?
The Frontend library setting applies to your whole site. If you need to move over gradually, we suggest testing on a staging site rather than mixing the two on a live store.
Will legacy mode be removed?
Legacy mode is there to give you time to move across at your own pace. We recommend switching to the new frontend when you can, so that you benefit from the new features and from future improvements, which will be built on the new frontend.
My custom CSS stopped working after switching
The new frontend uses different HTML and CSS class names, so custom CSS written for the old table will not apply. See styling the product table and the CSS selectors article for the current selectors.
My custom JavaScript stopped working after switching
The old frontend exposed the jQuery DataTables API, and the new frontend does not. Any JavaScript written against DataTables needs rewriting for the new frontend. If you depend on it, keep legacy mode enabled until you have a replacement, and get in touch so we can advise.