Selecting a Number of Products to Show Per Page
In this guide, you will find out how to let users choose how many products to show on the page with JetWooBuilder’s Products Grid.
Before you start, check the tutorial requirements:
- Elementor (Free version)
- JetWooBuilder plugin installed and activated
- JetSmartFilters plugin installed and activated
To let users select the number of JetWooBuilder products to show per page using a JetSmartFilters filter, we will create a filter with the JetSmartFilters plugin. It will contain numeric options corresponding to the number of products displayed on the page.
Let’s go through the process step by step.
Create a Filter
Go to WordPress Dashboard > Smart Filters > Add New to build a new filter.
Complete a Filter Name (here, “Products per Page”) and pick the Filter Type, which can be “Select” or “Radio” options. For example, we choose the “Select” option.
Pick the “Manual Input” Data Source to be able to add the values that will correspond to the products displayed per page.
When the Options List section appears, press the “Add New” button every time you want to add a new option.
For instance, we add options like “4,” “8,” and “12” with the same Labels and Values correspondingly. With these options, users can select whether four, eight, or twelve products are shown in the Products Grid.
Scroll down to the Query Variable field and press the “Dynamic Tag” button next to it.
In the opened list, find and click the “Plain Query Variable” option.
In the opened settings, put the “posts_per_page” value in the Variable Name field.
You can also scroll down to the Filter Labels section and set the Filter Label and Active Filter Label.
When the filter is ready, press the “Update” button.
Add the Filter to the Page/Template
Navigate to the page or template where you want to place the Products Grid widget and the filter you created.
In our case, it’s a page from the WordPress Dashboard > Pages directory.
When you open the page in the Elementor page builder, add a Products Grid widget if you haven’t added one yet.
Then, find and place a corresponding filter widget on the page. In our case, it’s the Select Filter widget. But if you have built the “Radio” filter, add the Radio Filter widget correspondingly.
Pick the previously built filter in the Select filter field and apply it to the provider using the This filter for selector: select the “JetWooBuilder Products Grid” option.
Hit the “Publish” button to save the changes.
Check the Result
Open the built page on the front end. By default, the layout includes four products, our first option’s value.
With the help of the selector, you can pick the number of products displayed per page. In our case, we can set a 4-item, 8-item, or 12-item layout.
That’s all; now you know how to adjust a JetSmartFilters filter that will let users select the number of products displayed in the Products Grid widget of the JetWooBuilder plugin for WordPress.