Elementor Compatibility

WooCommerce Product Filter compatible with Elementor. With this option, you can create a product filter directly in the Elementor. All the functions of the Product Filter by WooBeWoo will be available directly in the Elementor tab.

What is Needed?

We have done everything so that you can use this advantage without any special knowledge.

To do this, simply install the Elementor plugin and WooCommerce Product Filter from WooBeWoo. Now when you create a page using Elementor, you will see the WooFilter widget.

To get started with the filter, just drag the widget from the editor to the page you are editing.

Elementor Compatibility

Enter a name for the new filter and click create.

After that, you will see the familiar tabs with the WooCommerce Product Filter options. The interface is conveniently divided into 3 tabs: Filters; Options; Design

Filters Tab

In this tab, you can add the filters you need and configure them, choose by what parameters users can filter products, and also configure the way they are displayed on different devices, decide how the drop-down lists look exactly, and also exclude specific categories or attributes from the search results.

With our plugin you can filter by any product parameter:

  1. Price
  2. Price range
  3. Sort by
  4. Categories
  5. Tags
  6. Author
  7. Featured
  8. On sale
  9. In Stock,
  10. In Stock, Out of Stock, On Backorder
  11. Rating
  12. Search by text
  13. Attribute

Elementor Compatibility with Product Table

Options Tab

Here you can manage and change the functions of your filter, giving its interface a convenient and unique style. The options tab has four sections so that you can quickly and conveniently find and configure the option you need (main; buttons; content; loader):

Elementor Compatibility

  • Main:

Enable Ajax. This option enables Ajax search. Product filtering and displaying results in a browser will be run in the background without full page reload.
Display on pages. Here you can chose page for filter (Shop; Product Category; Product Tag; Shop+category+tag ; specific)
Display filter on. Choose on which devices the filter will be displayed.
Set mobile/desktop breakpoint. Set breakpoint for all options that depend on a mobile/desctop view. “Show title label”, “Display filter on” etc.
Hide filter on shop pages without products.Hide filter on shop and categories pages that displays only categories or subcategories without products.
Set number of displayed products.Set number of displayed products. This number will only be shown after filter is applied! You must set the same number as in the basic store settings or in the basic filter settings.
Set number of products per row. Set number of products per row. This number will only be shown after filter is applied!
  • Buttons:

Filter activation type. If “Filtering button” option was selected, the “Filter” button appears at the page. It allows users to set all necessary filter parameters before starting the filtering. If “Auto filtering” option was selected, filtering starts as soon as filter elements change and the data reloads automatically.
Show Clear all button. If this option is enabled, the “Clear” button appears at the page. All filter presets will be removed after pressing the button.
Select Filter Buttons Position. Top;bottom;Both.
Select Filter Buttons Order. Here you may change the order of filter buttons on the page.
Display Hide Filters button. Choose how the button will be displayed on Desktop and mobile
  • Content:

Show Clear block. If this option is enabled, the “< clear” links appears at the page next to the filter block titles. The presets of this filter block will be deleted after clicking on the link.
Recount products by selected filter. Automatically recount product by selected filters (If product category loading slowly – Disable this function).
Recount min/max price by selected filter. Automatically change min/max price by selected filters (If product category loading slowly – Disable this function).
Show parameters without products as disabled. Automatically disabled parameters without products. Works only when options Show count and Always display all… are enabled.
Sort by title after filtering.
Checked items to the top. Lets checked terms will be on the top
Set no products found text.Here you may input “no products found” text for category
Display “Show more”. For long vertical lists, “Show more” will be displayed.
Display selected parameters of filters. Selected parameters will be displayed in the top/bottom of the filter.
Hide filter by title click.
Use filter titles as slugs for the filter clear buttons.
Multiple categories logic. Filter products by different filter categories by logic and/or.
  • Loader

Enable filter icon on load. Enable filter icon while filtering results are loading.

Filter Loader Icon. Here you may select the animated loader, which appears when filtering results are loading.

Enable overlay. Here you can enable the overlay, choose whether to show the loader icon, set the background,loader icon and loader word.

Design Tab

Here you can give a unique style by customizing the design of your filter, giving your interface a convenient and stylish look. The parameters tab also has four sections, so you can quickly and conveniently find and configure the desired parameter (general; blocks; titles; buttons):

Elementor Compatibility

  • General:

Filter Width. Here you can set the filter width in pixels or percent.
Filter Block Width. Here you can set the filter width in pixels or percent.
Filter Block Height. Here you can set the filter block height in pixels. If not filled, then the height is calculated automatically based on the content of the filter. Please note that if the value of the Maximum height in frontend of the filter is greater than the specified value, some data may be hidden
CSS editor.
JS editor.
Use theme styles. Disable the use of custom plugin styles for filter elements. This option does not work in admin preview.
  • Blocks. 

Choose your custom styles for filter blocks. Any settings you leave blank will default.

  • Titles

Choose your custom styles for filter titles. Any settings you leave blank will default.

  • Buttons

Choose your custom styles for filter buttons. Any settings you leave blank will default.

Create a Product Filter Immediately in the Elementor.

The most important and unique advantage is that you can create a Product Filter directly in the Elementor.

You can also manage options, give a custom design to its interface without leaving the builder page.

In this case, absolutely all the same options will be available to you as in the classic filter editor.

Improve your filter, manage options, give a unique design to each element, so that in the end it gives you a unique look on the page of your store.

Latest Articles

Buy Now Bundle and save over 60%

Buy now