Do you want to display products from a specific category using the Product Listing widget in Elementor? With the help of AJAX filters from The Plus Addons for Elementor, you can easily show category-based products from all available products, not just the ones currently visible on the page.
When you use AJAX filtering, it searches through your entire post list, even if you’re only showing a few products at first. This makes it easier for visitors to find what they’re looking for and ensures your filters work more accurately. In this guide, we’ll explain how AJAX filtering works and how it improves the post display experience on your site.
To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
First, you need to create some products under any custom post type to display them, then follow the steps –
1. Add the Product Listing widget to a page or template.
2. Then, go to the Content Layout tab and select Normal Page from the Product Listing Types dropdown.
3. After that, select the appropriate Style and Layout.
Note: To see the AJAX Filter effect, you need to enter a number lower than the total number of products in the Maximum Posts Display section under the Content Source tab. I.e., 5 here,
4. Then, go to the Category Wise Filter tab and enable the Category Wise Filter toggle.
5. After that, select the AJAX option from the Filter Type dropdown.
Note: You need to understand how the AJAX option actually works. Please see the steps below.
Let’s first start with the Normal type
Normal Filter Type:
When you choose the Normal option from the Filter Type dropdown and set the Maximum Posts Display to 3 under the Content Source tab, even if you have a total of 8 products, the filter will only apply to the 5 products that are currently displayed.
So, if you select a specific category on your page, it will search for matching products only within those 5 displayed products, not from all 8 products.
Example:
- Total products: 8
- Max products Display: 5
- Selected Category: T-Shirts
- Result: It will only filter from the 5 visible products and show the ones that belong to the T-Shirts category (if any).
Then move to the AJAX type.
AJAX Filter Type:
When you choose the AJAX option from the Filter Type dropdown and set the Maximum Posts Display to 5 under the Content Source tab, even though only 5 Products are shown at first, the filter will search through all 8 total Products, not just the ones currently displayed.
So, when you select a specific category on your page, it will filter from the entire list of 8 Products and then display the ones that match your selected category.
Example:
- Total Products: 8
- Max Products Display: 5
- Selected Category: T-Shirts
- Result: It will filter from all 8 Products and show the T-Shirts category Products (up to 5, based on your display limit).
Now, you’ll see the Products from your selected category on this page.
