The WooCommerce Product Filter plugin with Ajax is a very efficient option. Filtering products and displaying results in the browser will be performed in the background without a full reload of the page, both with auto filtering and filtering using the “Filter” button.
How to enable Ajax mode?
So you have a ready-made store, and the woo filter is displayed in the directory. To enable instant AJAX filtering: go to the “Options” -> “Main” tab and check the Enable Ajax option.
Now that you have AJAX enabled, filtering will happen without page refresh, like with Autofiltration:
And when filtering with the “Filter” button:
Ajax doesn’t work.
If the Ajax option is enabled, but does not work correctly, for example, it has a difference in styles, the wrong products are displayed, additional elements of the product container do not work correctly – such as pagination of the number of products, or sorting does not work correctly, etc. If these problems are familiar to you, then most likely you are faced with an incompatibility issue with a third-party plugin or theme.
First, let’s find out how Ajax works from a technical point of view.
Ajax filtering makes a selection of products according to the specified criteria in the filter, and then runs the resulting data set through the WooCommerce template, which is used by default to build the store page.
After that, the filter returns only the block of products matching the filtering criteria and inserts it INSTEAD of the current block of products in the store. Here we get this piece of the site with goods and replace it with the filtering results:
How to fix?
Now, let’s figure out how to solve the problem if you are facing Ajax not working.
Go to “Settings” -> “Main” and make sure the Ajax option is enabled. Here you can find all the tools you need to fix Ajax errors.
- Remove Actions Before Filtering. Enable this option when ajax filtering does not work as expected. For example, sorting does not work. (Removes filters such as posts_orderby and pre_get_posts.)
- If, when filtering Ajax, the results do not display products with the “Private” status, enable the option Display Products With The Status “Private”. Now, when filtering, products will be displayed not only with the “publish” status, but also with the “private” status.
Force Theme Templates.
The Force theme template option was originally added for WordPress themes that incorrectly change the wokomers template to display the store page, due to which our plugin cannot find the product block on the page.
But the option is also relevant in other cases. For example, if what we get via Ajax differs from what we see when we reload the page. These are not necessarily only the product display styles, but the products may not be displayed correctly, as some other plugin or theme may interrupt our filtering.
So, earlier we figured out how filtering with AJAX usually works, from a technical point of view. But when you enable the Force Theme Templates option, AJAX filtering works in a different way:
When the Force Theme Templates option is enabled, the filter requests the entire page via AJAX (not just the product block), and when it is received, it searches for the same product block on the page. When it finds it, it cuts out this block and replaces the current block with products on the page with the block with filtering results.
So If after ajax filtering there are differences in the styles of the list of products, pagination or count-block, then enable this option. (settings->main->ajax).
Important: for correct operation, we recommend filling the Product container selector option (see below).
- Recalculate Filter + Force Theme Template. This option recalculates all filters, taking into account third-party filters from other plugins on the page. For example, if the products on the page with the woobewoo filter were already pre-filtered by some third-party plugin filter, as a result of which the counters do not work correctly. But be careful, when the option is enabled, the filter may work slowly if the product base is large.(options->main->enable ajax->force theme templates->Recalculate Filter)
Product Container selector and Product List / Loader Selector+Force Theme Template
As we have already figured out earlier, filtering with AJAX + Force Theme Template works in such a way that it searches the entire page for the Block Selector with products and when it finds it, it replaces this block with a block with filtering results.
- The Product List / Loader Selector is just the same block that contains all the product blocks. To find the Product List / Loader Selector, open the browser console on the products page (In most Windows browsers, developer tools can be opened by pressing F12 . In Chrome for Mac use Cmd+Opt+J , Safari: Cmd+Opt+C). Now find on the page which contains exactly blocks of products.
The Product List / Loader Selector must be entered, if it is different from the standard one, to tell the filter what to look for on the page, what to cut and paste.
The default Product List / Loader Selector in Woocommerce is “ul.products”. But sometimes it happens that in a particular topic, the Block selector with products has different meanings. Then the filter can’t find the products on the page and you run into errors, incorrect AJAX work, and so on.
For such situations, we have added Product List / Loader Selector manual input fields (settings->main->enable Ajax->Product List / Loader Selector).
- Product Container selector – by default, this is the very first parent of the block with products (Product List / Loader Selector). The container contains pagination blocks, the number of products found, and the product blocks themselves.
But sometimes it happens that in a given theme, the first parent container of the product container does not include all the necessary elements, which is why you need to take older parents to capture all the elements – then you need to set the Product Container selector (and this the container must contain both the product block and the pagination block and the block of the number found, so that everything is replaced together).
As you can see in the screenshot of our product block (number 2 on the screen), the first parent element contains all the elements: pagination; sorting; number of products (number 1 on the screen), so in this case you do not need to enter the Product container selector:
To find the Product Container selector, open the browser console on the products page. Here, find the parent block of the product container:
For such situations, use the input field (settings->main->enable Ajax->Product Container selector).
So when do you need a Product Container selector and when do you need a Product List / Loader Selector?
Well, let’s fix it:
Product List / Loader Selector – the meaning of this option is to specify which page block to replace with a new one during Ajax filtering. Therefore, if your block with products has a selector that is not ul.products (not the standard one from woocommerce), then you need to enter Product List / Loader Selector .
Product Container selector – the meaning of this option is to show where elements such as pagination, the number of products found, and the product blocks themselves are located. Usually, these elements are included in the first parent container of the block with products, but if these elements are not included in the container, then the Product Container selector must be specified.
We have made such a simple scheme for understanding that when you need to enter the Product Container selector:
Input rules for Product Container selector and Product List / Loader Selector:
All selectors are set as standard:
-selector can be entered with a tag.
– the class is preceded by a “dot”, for example “.products.”
-if these are classes of one element, then there is no gap between the classes. For example “.products.columns”
-if the class is a child of the previous ones, then a space is placed between the classes. For example “.products .columns”
– id is written with a pound sign at the beginning. For example #content. (The id itself is unique, but the parent of the products doesn’t always have an id, and it doesn’t always have a unique class, so it’s not always worth setting one.)
The number of classes can be unlimited, and sometimes one is enough, but the main thing is that it be unique on the page. Accordingly, the main thing is to make sure that the selector you set is unique and returns only this block, otherwise all the same ones will be replaced by products.
Don’t Use Shortcode
If product blocks are created by shortcodes with parameters (categories, tags, sorting, pagination, etc.) for example [prod ucts limit=6 category=”Earrings” ], then using the Dont Use Shortcode option you can control whether these shortcode parameters are used for the filter or not .
For example, we entered the shortcode [prod ucts limit=6 category=”Earrings” ] and we see that the filter now always displays only the parameters suitable for this shortcode, in our example it is only this category and price.
But if you enable the Don’t Use Shortcode option, then the filter will ignore the shortcode parameters and will always treat the shortcode as if you just entered the [pro ducts] shortcode.
Pagination disappeared after Clear filter
f you did add it to the documentation, the issue is this:
“If ajax filtering is enabled and you reload a filtered category page that has fewer products than the max product per page limit (e.g. 3 products available for the selected filter and 20 is the max products per page), the pagination will not be repopulated upon resetting the filters because the pagination element does not exist due to the filtered category page not requiring pagination.”
The fix is:
“Add in a check, to wherever your pagination element is inserted, that checks if the woocommerce_pagination() exists for the current page. If it doesn’t exist then insert an empty .pagination element that can be used by the ajax filters to repopulate the page numbers.”
As an example, the validation we used for our woocommerce_pagination() function looks like this:
if(woocommerce_pagination()) { woocommerce_pagination(); } else { echo '<nav class="pagination" style="display:none"></nav>'; }Didn’t find a solution to the problem?
This looks like a conflict with another plugin of yours or your theme. Please try deactivating all your plugins one by one and check the issue. This way you will know which plugin is causing the error.
If that doesn’t help, try temporarily switching to the default WordPress theme.
If this does not help, please contact us via the Contact us form.
Conclusion
As you can see, WooCommerce Product Filter this is an ideal way to make the purchase process really simple and enjoyable for users of your site without any special coding knowledge.
Choose your option of displaying filtering, and please your customers with a convenient interface.
Still have questions? Contact us and we will be happy to help you.