WooCommerce Ajax Filters

AJAX Filter Main Options:

Here you can find the options to customize the look and performance of the filter in accordance with the specifications of your site.

The TM Compare settings page offers the following options:

• Title

  Widget title

• Attribute

  Filter By attribute

• Display type

  Filter display type

• Query type

  Allows to combine value of the same attribute in the filter. This option is available in filter by attributes variant

Price Filter Attributes

If "Price" is set as an attribute you can switch the display type between:

Slider

Inputs

Filter By Attributes

This filter type takes any parameter as filter by attribute. Attributes list is formed automatically from all created product attributes. In this case, two display types are available:

Dropdown

List

The plugin also features a filter tab that displays all selected filters which can be reset.

Hooks that allow to customize the query menu

• apply_filters( 'tw_wc_filters_dismiss_icon', ' < span class="dashicons dashicons-dismiss">< /span>' )

  Returns html filter reset button

• apply_filters( 'tw_wc_price_filters__wrapper_open', '< div class="tm-wc-ajax-filters-wrapper">' )

  Returns opening html container of the entire menu

• apply_filters( 'tw_wc_price_filters_open', '< span class="tm-wc-ajax-filters-price">' )

  Returns opening html container of the price filter

• apply_filters( 'tw_wc_price_filters_to', $html, $to_text, $max_price )

  Returns html of the end price filter

• apply_filters( 'tw_wc_price_filters_close', '' )

  Returns closing html container of the price filter

• apply_filters( 'tw_wc_attribute_filters_open', '< span class="tm-wc-ajax-filters-attribute">' )

  Returns opening html container of the attribute filter

• apply_filters( 'tw_wc_attribute_filters_close', '' )

  Returns closing html container of the attribute filter

• apply_filters( 'tw_wc_price_filters__reset_link', $html, $reset_link, $reset_text )

  Returns all filters reset button html

• apply_filters( 'tw_wc_price_filters__wrapper_close', '< /div>' )

  Returns closing html container of the entire query menu

In addition, all major standard WooCommerce hooks related to WooCommerce Layered Nav and WooCommerce Price Filter are supported.

Hooks related to the plugin:

• add_action( 'woocommerce_after_subcategory', 'tm_wc_ajax_filters_after_subcategory', 11, 2 )

  Action adds products layout switch buttons in products listing

• remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', 10 )

  Deletes the category title display default action

• add_action( 'woocommerce_shop_loop_subcategory_title', 'tm_wc_ajax_filters_shop_loop_subcategory_title', 10, 2 )

  Category title display action

• apply_filters( 'tm_wc_ajax_filters_button_preloader', '' )

  Filter that allows to add a custom preloader to the plugin buttons

• apply_filters( 'tm_wc_ajax_filters_loadmore_button', $html, $link, $classes, $text, $preloader )

  "Load More" button HTML structure filter

Plugin Settings

• Enable grid-list

  Enables layout switcher in product listing

After switching to the list layout the product listing reloads dynamically. Content-product-list.php template and content-product_cat-list.php are added to the products and categories respectively. These templates are located in tm-woocommerce-ajax-filters\templates\ folder. You can rewrite the templates right in the theme in the same way as with any other WooCommerce template. The point is that a single parameter - ‘list’ is added to all hooks in all templates, for instance:

During creation of the filter you can check this parameter and execute the following code. For example:

We need to display the description for the categories, for that we need to add the hook

And define a callback function

    function tm_wc_ajax_filters_after_subcategory( $category, $atts = '' ) {
       if ( 'list' === $atts ) {
           echo '< div class="product-category__description">' . $category->category_description . '';
       }
    }

In the given example we check the $atts parameter and if it is equal to ‘list’, category description is displayed.

• Enable AJAX ordering

  Enables AJAX - product ordering when changing filter type

• Enable AJAX pagination

  Enables AJAX - product ordering when navigating to another page through pagination

• Enable AJAX Load More button

  Enables “Load More” button before pagination. The button loads products from the next pagination page

• Load More button label

  “Load More” button text

• Load More threshold on desktop

  Max number of products that can be loaded with the “Load More” button on desktop

• Load More threshold on desktop

  Max number of products that can be loaded with the “Load More” button on mobile devices