Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetSmartFilters: How to Apply Pagination Widget to Products Grid

Dive deeply into studying the basics of the AJAX Pagination usage with the help of JetSmartFilters plugin.

JetSmartFilters plugin includes nine awesome filters and pagination widget. The great thing is that this plugin uses AJAX technique, which allows filters to work without reloading the page after adding a new filter.

You can add Pagination to products or publications to allow visitors to go through the full list without refreshing the page.

From this tutorial, you will learn how to use AJAX Pagination. We will apply pagination to the JetWooBuilder Products Grid widget, but you can also use it for templates or posts. So, let’s commence!

Using AJAX Pagination

Step 1 — First of all, open the needed page and drag-n-drop the Products Grid widget to the section where you want to place it and customize it according to your preferences.

Products Grid widget content settings

Step 2 — After that, drop the Pagination widget at the page and navigate to the Content settings. Here you need to choose Pagination for JetWooBuilder Products Grid from the dropdown list.

Pagination settings for Products Grid widget

In the pagination type, select AJAX type. There’s also an option to set the Query ID in case you use multiple widgets of the same provider on the page.

Content type settings of Products Grid widget

Step 3 — Moreover, in the Controls settings, you can Enable Prev/Next buttons, and change its text. Also, you’re able to set a number of items to either side of the current page, not including the current page and set a number of items on either the start and the end list edges.

Controls pagination settings of Products Grid widget

Step 4 — When you’re done with all settings, click on the Publish button and preview the result.

Products Grid widget overview

These easy steps are all you need to do to use AJAX Pagination. Hope this tutorial was useful.