Last updated January 11, 2022
Filterable product lists
When setting up your shop and category pages for filtering in the latest versions of Elementor plugin 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’ wrapping elements! 3d party scripts can create conflicts and break the filtering functionality. If you wish to use the “Filters” toggle button, try the built-in Visibility options of your filtering preset.
Use the annasta_filters shortcode to insert your filters preset into the needed sections of Elementor template. Locate the Shortcode widget in the Elements sidebar, and type in the shortcode, for example: [annasta_filters preset_id=1]
Unfortunately, no preview will be offered for the shortcode by the preview pane of Elementor editor. To see the shortcode outline you will need to hover over it. However, if the Display on setting of the inserted preset is set to All Pages, you will see the filters on the template preview pages.
When applying filters on the template preview pages of Elementor Theme Builder you will notice that filters 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 standard 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: