Note:
This feature was added in version v1.6.0, but it is disabled by default. To enable it, you need to activate the following PHP code: add_filter( 'fibofilters/config/override_ordering_enabled', '__return_true' );
Product sorting is a default module provided by WooCommerce. One important aspect to note is that WooCommerce’s product sorting triggers a page reload whenever a new sorting option is selected. In contrast, FiboFilters provides product sorting functionality without page reloads, offering a faster and smoother user experience by dynamically updating results.
What happens under the hood?
When the DOM is fully loaded, FiboFilters searches for the HTML element with the class .woocommerce-ordering. If such an element is found, it is replaced with FiboFilters’ custom HTML. After this replacement, products can be sorted without the need for a page reload.
If your theme uses a different selector for the sorting element, you need to specify the correct selector using the following filter:
add_filter( 'fibofilters/config/ordering_selectors', function () {
return [ '.orderby-order-container' ];
} );
The sorting process in FiboFilters is handled entirely on the frontend. Once sorting is performed, the products in the catalog are reorganized dynamically. If some products were not initially loaded, an AJAX request is triggered to fetch the missing product templates. This ensures that all relevant products are displayed in the correct order without requiring a full page reload.