This tutorial explains applying the AJAX Pagination widget from the JetSmartFilters plugin for Elementor and Gutenberg.
The Pagination widget is one of the 15+ JetSmartFilter plugin widgets. This widget adds pagination to the JetWooBuilder Products Grid with WooCommerce products to see the complete list without refreshing the page. The Pagination widget is also available for templates or posts.
The plugin uses the AJAX technique; therefore, filters work without reloading the page after adding a new filter.
Tutorial requirements
- Elementor (Free version);
- WooCommerce plugin (Free version) installed and activated with products created;
- JetSmartFilters plugin installed and activated;
- JetWooBuilder plugin installed and activated.
Activation of the Pagination Widget
1 Step — JetSmartFilters General Settings
Navigate to Crocoblock > JetPlugins Settings > JetSmartFilters tab of the WordPress Dashboard. Unroll this tab and move to the Generate Settings tab. Move the JetWooBuilder Products Grid toggle to use the Pagination widget with the WooCommerce products.
1 Step — Indexer Settings
Unroll the Indexer Settings tab and move the toggle referring to the CTP for displaying (here, Products).
Adding Pagination Widget to Products Grids
1 Step — Adding the ProductsGrid widget
Open the needed page and drag-n-drop the Products Grid widget to the section where you want to place it and customize the grid according to your preferences.
2 Step — Adding the Pagination widget
Find the Pagination widget and drop it on the page.
Navigate to the Content settings. Choose Pagination for JetWooBuilder Products Grid from the Pagination for drop-down menu.
In the Apply type menu, select the AJAX type. There’s also an option to set the Query ID for multiple widgets of the same provider on the page.
Controls Settings
Controls settings allow enabling Prev/Next buttons and customizing the text on them. Setting the number of items to either side of a current page by the Items center offset field, and setting the number of items on either the start and the end list edge using the Items edge offset field.
If enabled, the Enable auto-scroll toggle allows the auto-scroll to the top of the provider when reloading content via AJAX. (When changing the page, it scrolls to the provider’s top.) This toggle turns on the Provide top offset field to type the offset from the provider’s edge.
Press the “Update” button to save changes.
That’s all about applying the AJAX Pagination widget using the JetSmartFilters plugin for Elementor and Gutenberg.