Product sorting

Note:
This feature is still in beta and 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.

Demonstration of how fast product sorting works in FiboFilters

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' ];
} );

ⓘLearn how to add this snippet to your WordPress.

Some themes modify the .woocommerce-ordering element, which can cause issues when using FiboFilters. To resolve this problem, FiboFilters uses a hook to create a new sorting element and hide the default one, ensuring that sorting works correctly with every theme:

add_filter( 'fibofilters/config/custom_ordering_enabled', '__return_true' );

ⓘLearn how to add this snippet to your WordPress.

The new element’s CSS class is .fibofilters-ordering. You may use it to style the sorting.

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.

Customizing sorting options

FiboFilters allows you to add custom sorting options using the following code:

add_filter( 'fibofilters/allowed_catalog_orderby', function ( $allowed_orderby ) {
    $allowed_orderby[] = 'modified-desc';
    $allowed_orderby[] = 'title';
    $allowed_orderby[] = 'title-desc';

    return $allowed_orderby;
} );

ⓘLearn how to add this snippet to your WordPress.

All supported sorting options:

  • menu_order: manually set order in WordPress
  • popularity: products with the highest number of sales will appear first as well
  • rating: average rating
  • date: the latest products
  • price: from lowest to highest price
  • price-desc: from highest to lowest price
  • modified-desc: sort products by their last modification date
  • title: sort products alphabetically A-Z
  • title-desc: sort products alphabetically Z-A

You can also remove existing sorting options. For example, to disable sorting by price, use this code:

add_filter( 'fibofilters/allowed_catalog_orderby', function ( $allowed_orderby ) {
    $allowed_orderby = array_diff( $allowed_orderby, [ 'price', 'price-desc' ] );

    return $allowed_orderby;
} );

ⓘLearn how to add this snippet to your WordPress.