Form Management for Dynamic AJAX Product Filters

  • Show Categories: Toggle the display of product categories in the filter.
  • Show Attributes: Toggle the display of product attributes.
  • Show Tags: Toggle the display of product tags.
  • Show Custom Taxonomies: Enable this option to show selected custom product taxonomies in the filter.
  • Show Price Range: Enable or disable the price range filter.
  • Show Rating: Enable or disable the product rating filter.
  • Show Search: Enable this option to show a search box for products.
  • Show Brand: Enable this option to show a brand filter.
  • Show Authors: Enable this option to show an authors filter.
  • Show Stock Status: Enable this option to show a stock status filter.
  • Show Sale Status: Enable this option to show an on-sale filter.
  • Show Dimensions: Enable this option to show a dimensions filter.
  • Show SKU: Enable this option to show an SKU filter.
  • Show Discount: Enable this option to show a discount filter.
  • Show Date Filter: Enable this option to show a date filter.
  • Show Custom Fields Filter: Enable this option to show a custom fields filter.

 

image 22

Filter Process Type

Filters can be applied dynamically without reloading the page, supporting the following methods:

  1. With Query String:
    • Example: ?filters
    • Filters are applied using a query string in the URL.
  2. With Permalinks:
    • Example: brand/color/size
    • Filters are applied in a user-friendly format.
    • Use Filters Word in Permalinks: If you want to include “filters” in the URL (e.g., https://example.com/filters/brand/color/size), enable this option. This also allows filters to work on parent and child pages.
  3. With AJAX:
    • Filters are applied dynamically without changing the URL, enhancing user experience with real-time updates.
image 25

Learn More About Filter Process Types

Additional Features

  • Update Filter Options: When a filter option is selected, the available options will update based on the user’s selection.
  • Show Loader: Option to show or hide a loading indicator while filters are processing.
  • Customize Loading Effect: Choose from six loading effects and customize attributes like color, size, and position. You can also create a custom loading effect using your HTML and CSS. Ensure your custom HTML includes a parent tag with style="display:none;" and id="loader"Learn More About Customize Loading Effect
image 26

These settings provide comprehensive control over the filter form, allowing for a tailored user experience. By managing what is displayed and how filters are processed, you can enhance product discovery on your site.