Let us imagine that you run an online store selling tons of different products. Each product has its own set of attributes like size, color, material, technical characteristics, and many others that make it distinct from other products. A shopper's decision to buy depends on these product attributes, and you as a seller can make a shopper's choice easier by using the Product Filter add-on.
The add-on enables you to add a product filter block that displays on category pages (all of them, or just certain category pages chosen by you). Your store visitors will be able to adjust the options in this block to narrow down their search results based on product attributes and find the product they require more quickly. Optionally, you can also adjust the filter block to include product tags, a price range, and in-stock availability.
Product Filter Add-on Installation and Setup
If the Product Filter add-on is not installed in your X-Cart store, you can obtain it from the X-Cart App Store. Follow the general instructions for installing and activating add-ons.
Before using the add-on, you will need to configure it. Open the Settings page and configure the add-on according to your business needs.
The add-on settings are as follows:
Enable "In stock only" filter: If this setting is enabled, the filter block includes an 'In stock' selector allowing shoppers to specify whether they want to find only the products that are in stock or the products that are out of stock as well. If it is disabled, no such selector is provided.
Enable "Price range" filter: If this setting is enabled, the filter block provides a range slider allowing users to specify the desired price range. If it is disabled, no such slider is provided.
For the attention of Value Added Tax / Goods and Services Tax add-on users: In X-Cart 5.3.x and earlier, the "Price range" filter works with VAT-exclusive prices only, even if your store is set up to display prices with VAT included.
Enable "Attributes" filter: The filter block allows users to choose product attributes if this setting is enabled. If it is disabled, filtering by attributes is not provided. Note that for the "Attributes" filter to be displayed, you need to have attributes configured in your store, and those need to be global or class-level attributes of the Plain field and Yes/No type. (Attributes of the Textarea type are never used for the product filter.) For information on the configuration of attributes, see Product Attributes.
Enable "Tags" filter: The filter block allows users to choose product tags if this setting is enabled. If it is disabled, filtering by product tags is not provided.
The setting requires product tags configured in the store. For more info, see Product Tags Add-on.
Show only available attributes and tags for products in category: If this setting is enabled, X-Cart generates a data cache used to display in the filter block only the attribute values and tags that are used for the products in the category being viewed. Enabling this option will make a page load faster since only a set of attributes and tags will be counted (instead of all attributes and tags available in the store). Enabling this setting may be especially useful for stores with a high inventory turnover ratio.
Cache reset mode: Use this setting to specify whether you want the cache generated on the fly or removed when attribute, tag, or product data is changed. The first option will allow working with the current inventory but will slow down the page loading as it will be necessary to cache the filters each time. If you do not update your catalog too often, using the second option is recommended.
If the "Remove cache when …" option is selected, a category page cache will be removed and generated anew the first time this page is opened after updating the products, categories, or attributes data. Therefore, the first-page loading may last more than usual as time will be spent on cache regeneration.
Sort order for class attributes (available only if the "Attributes" filter is enabled): Here, you can specify whether the attributes should be sorted alphabetically or manually.
This setting affects only the attributes themselves, not their values. The values are sorted alphabetically.
Generate the URL query string for filter with: Can be set to GET params or hash depending on how you prefer the search URL assembled.
After adjusting the settings, be sure to click Submit to save the changes.
Product Filter Classes Setup
To specify the attributes that should be included in the product filter block on a specific category page in the store front end, you will need to do some configuration on the details page of that category:
In your store's Admin area, go to Catalog > Categories > Category_Name.
On the Category Info tab, find the "Classes for product filter" dropdown.
Use this setting to specify what classes of attributes should filter the products in the current category. The available options are as follows:
All classes from this category - The filter will include the classes of all the products from this category. Note that the more classes and products a category has, the more time it will take to load the category page.
Do not show the filter - This type of filter will not be displayed on the category page.
Choose classes - You can specify the exact class(es) on which the filter will be based. Using this option, you can limit the number of classes applied. You can select any classes available in your store.
Save the changes.
Note that the product filter block will not be displayed on a category page in the store frontend if the category itself does not contain products. If the category has subcategories containing products but does not have any products outside the subcategories, the "Classes for product filter" setting will need to be configured on the pages of the respective subcategories.
Attributes Visibility for Product Filter
You can fine-tune the visibility of specific attributes for the product filter via the Classes & Attributes section of the Admin area (Catalog > Classes & Attributes).
Product Filter Block Location
You can change the location of the product filter block on the page using X-Cart's Layout Editor.