Last updated April 18, 2024
Filterable product lists
When setting up your WooCommerce shop and category pages for filtering in the latest versions of Elementor please make sure that you use the Archive Products widget to display product lists.
Filters insertion and preview
Please do not apply any special effects or responsive settings to the filters’ containers! This may create conflicts and break the filtering functionality. If you wish to use the off-canvas sidebar, you are welcome to try the built-in Visibility options of your filtering preset.
You can insert the filters into the Elementor editor containers with the help of the annasta_filters shortcode, or using the annasta WooCommerce Filters widget.
Inserting annasta_filters shortcode
Locate the Shortcode widget in the Elementor editor panel, and type in the shortcode with the needed preset_id parameter, for example: [annasta_filters preset_id=1]
Starting with plugin version 1.7.3, where possible, preset previews will be displayed at the points of insertion.
annasta WooCommerce Filters Widget
The dedicated Elementor widget for inserting annasta Filters presets is available since plugin version 1.7.3. You will find it in the WooCommerce section of the Elementor editor pane:
Use widget options to select the needed preset:
When applying filters on the template preview pages of the Elementor Theme Builder you will notice that filters will redirect to the filtered results of WooCommerce shop page. This is the expected behavior, since the Elementor template previews are not the same pages as the WooCommerce shop or archive pages on which filters are meant to work.
Testing your filters
The proper filtering process can be tested only on the WooCommerce shop and archive pages after you assign the Elementor template to “Product Archives” (or other needed section of your WooCommerce shop) via Display Conditions:
Creating pages with filterable [products] shortcode
In addition to using annasta Filters on native WooCommerce shop and archive pages, you can set up the dedicated filterable pages with product lists created by means of the WooCommerce [products] shortcode.
To do that, insert the [products] shortcode with the help of the Shortcode widget provided by Elementor, for example like so:
[products columns=4 limit=8 paginate=true]Insert the filters preset with the help of the annasta_filters shortcode or the annasta WooCommerce Filters widget at the needed position in the page. After saving the page, follow the instructions of the Filter [products] shortcodes on article to register the newly created page as filterable.