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 add-on Product Filter.
The add-on enables you to add a product filter block that will be displayed 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 easily. Optionally, the filter block can also be adjusted to include product tags, a price range, and in-stock availability.
Install and Activate the Product Filter Add-on
If the add-on Product Filter 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.
Configure the Product Filter Add-on Settings
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 users of the Value Added Tax / Goods and Services Tax add-on: 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: If this setting is enabled, the filter block enables users to choose product attributes. 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/or 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.
Note that you can control which attributes should be visible in the product filter and which ones not. For details, see the sections "Set Classes for Product Filter" and "Control the Visibility of Specific Attributes for Product Filter" further below.
Enable “Tags” filter: If this setting is enabled, the filter block allows users to choose product tags. If it is disabled, filtering by product tags is not provided.
Note that for the “Tags” filter to be displayed, you need to have product tags configured in your 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 actually 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 (as opposed to all the 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 to be 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 inventory too often, using the second option is recommended.
Note that if the option “Remove cache when …” is selected, a category page cache will be removed and generated anew the first time this page is opened after you change 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.
Note that 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 to be assembled.
After adjusting the settings, be sure to click Submit to save the changes.
Set Classes for Product Filter
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:
1. In your store’s Admin area, go to Catalog > Categories > Category_Name.
2. On the Category Info tab, find the setting Classes for product filter.
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.
3. 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.
Control the Visibility of Specific Attributes 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).
Change Product Filter Block Location
You can change the location of the product filter block on the page using X-Cart's Layout Editor.