We’re excited to introduce one of the most requested features: full compatibility between WooCommerce Product Filter and Elementor.
Previously, you could add a product filter to Elementor using a shortcode. That worked, but it wasn’t ideal.
Now, you can create, customize, and style your Product Filter directly inside the Elementor builder, with live preview and full control over design and behavior.
What Is Elementor?
If you work with WordPress, you’ve almost certainly heard of Elementor. It’s currently the most popular page builder in the WordPress ecosystem, and for good reason.
Elementor allows you to:
-
Build pages and templates using drag-and-drop
-
Design WooCommerce product pages and archives
-
Create landing pages quickly
-
Customize layouts without writing code
That’s why so many WooCommerce store owners rely on it to shape their store’s user experience.
Why Product Filtering Matters
As your store grows, browsing products becomes more challenging. WooCommerce includes basic filtering options, but they’re often not enough for stores with larger catalogs.
Imagine a customer searching for a cheap white hoodie:
-
If they have to open product after product just to check color, price, or availability, they’ll likely leave.
-
With a powerful product filter, they can narrow results instantly by price, color, rating, stock status, and more.
This is where WooCommerce Product Filter by WooBeWoo makes a real difference.
Product Filter + Elementor: What’s New?
WooCommerce Product Filter by WooBeWoo is one of the few plugins that offers true, native integration with Elementor.
With this compatibility, you can:
-
Add an existing filter to a page
-
Create a brand-new filter directly inside Elementor
-
Customize all filter options without leaving the builder
-
Style the filter visually with live preview
All Product Filter features are now available right inside the Elementor panel.
Getting Started
To begin, make sure you have installed and activated:
-
Elementor (free version is enough)
Once installed, open any page with Elementor.
Inside the WooCommerce widgets section, you’ll find the WooFilter widget.
Simply drag it onto your page, and start building.
Creating and Customizing Filters Inside Elementor
After adding the WooFilter widget, you can either:
-
Select an existing filter
-
Or create a new one directly in the builder
The interface is divided into three clear tabs:
Filters Tab
Here you choose what users can filter by and how filters behave on different devices.
You can filter products by:
-
Price or price range
-
Sorting options
-
Categories and tags
-
Stock status (In Stock, Out of Stock, Backorder)
-
Featured or on-sale products
-
Rating
-
Text search
-
Any product attribute
You can also exclude specific categories or attributes and control mobile vs desktop display.
Options Tab
This tab controls how the filter works and feels. It’s divided into four sections for easy navigation:
-
Main – general behavior
-
Buttons – apply/reset controls
-
Content – filter logic and interaction
-
Loader – loading animations and feedback
These options allow you to fine-tune usability without touching code.
Design Tab
This is where your filter gets its visual identity.
Using Elementor’s advanced styling options, you can customize:
-
Backgrounds
-
Borders
-
Spacing
-
Typography
Each filter can have a unique design that matches your store’s branding perfectly.
Why This Integration Stands Out
Here’s what makes WooBeWoo Product Filter + Elementor special:
-
Create filters directly inside Elementor
-
Full control over options and design without leaving the builder
-
Access to all filter settings, just like the classic editor
-
Works with Elementor Free (no Pro required)
-
AJAX-powered filtering-no page reloads
-
13 different filter types you can combine
-
Live preview while editing
The result: faster setup, better UX, higher conversions.
Ready to Get Started?
Using WooCommerce Product Filter together with Elementor is not just efficient—it’s enjoyable.
With just a few clicks, you can:
-
Build powerful product filters
-
Customize them visually
-
Improve navigation and product discovery
A good filter helps customers find exactly what they’re looking for-faster. That means less frustration, better perception of your store, and higher conversion rates.
All you need to do is open Elementor and click “Create Filter.”
