Filterable product lists
For the product lists inserted into Elementor templates to get properly filtered, please use the Shortcode widget in combination with WooCommerce [products] shortcode (and not the Archive Products or Products widgets). Enter the [products] shortcode into the field:
[products columns="4" limit="12" paginate=true]
You can adjust the shortcode parameters as needed: columns represents the number of products columns, and limit sets the needed amount of products per page. Read more about the WooCommerce [products] shortcode on the WooCommerce Shortcodes page.
Filters insertion and preview
To insert your filters preset into the needed sections of Elementor template use the annasta Filters widget (find it by typing “annasta” in the Elements search box), or the annasta Filters shortcode (e.g. [annasta_filters preset_id=1]). Filters will not get displayed in the preview pane of Elementor editor, but if the Display on setting of the filters preset is set to All Pages, you will see them on the template preview pages of Elementor Theme Builder.
To see the page preview select the “Preview” option by clicking on the eye icon in the lower-left corner of Elementor editor.
When using filters on the template preview pages of 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 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: