Help Center

How to Apply Pagination Widget to Products Grid

How to Apply Pagination Widget to Products Grid

This tutorial explains applying the AJAX Pagination widget from the JetSmartFilters plugin for Elementor and Gutenberg.

Before you start, check the 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

The Pagination widget is one of the JetSmartFilters 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.

Activation of Pagination Widget

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.

jetwoobuilder products grid toggle in settings

Indexer settings

Unroll the Indexer Settings tab and move the toggle referring to the CPT for displaying (here, Products).

products indexer toggle

Adding Pagination Widget to Products Grids

Adding the Products Grid 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.

products grid widget settings

Adding the Pagination widget

Find the Pagination widget and drop it on the page.

pagination widget in elementor

Content Settings

Navigate to the Content settings. Choose Pagination for “JetWooBuilder Products Grid” from the corresponding 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.

pagination content settings

Controls Settings

The Controls settings allow enabling Prev/Next buttons and customizing the text on them. 

You can also set the number of items on either side of a current page by the Items center offset field and/or the number of items on either the start and the end list edge using the Items edge offset field.

pagination controls settings enable items

Enable Load More toggle lets you add the “Load More” button next to the pagination. Once activated, the Load More Text bar is available, where the text on the button can be customized.

pagination controls settings enable load more toggle

If enabled, the Enable autoscroll 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.

pagination controls settings enable auto-scroll

Press the “Update” button to save changes.

products grid on the front end

Once the “Load More” button is clicked, there are additional four items shown.

load more on the front end

That’s all about applying the Pagination widget using the JetSmartFilters plugin for Elementor and Gutenberg.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.