Lytbox Academy Logo
Lytbox Academy Logo

WooCommerce Product Filters using Elementor

Article Outline

Learn how to create Woocommerce product filters using Elementor without any extra plugins or code.

Elementor recently introduced its own Taxonomy widget, which makes the process of creating filters so much simpler, without the use of any additional plugin or code.

Step 1: Create a Loop item for the Product Archive

Go to Elementor Templates > Theme Builder and create a new template for a Loop item for the Product Archive page. This will be the loop item containing the each of the products. The Taxonomy widget will filter products from this Loop.

Elementor Loop Template for Product Archive

Step 2: Create a Product Archive Template

Again, go to Elementor Templates > Theme Builder, and add a template for Product Archive using the Loop that you just created. Add the Loop widget, choose the template name from the Choose a Template dropdown, and choose Products from the Choose Template Type dropdown list.

You can style the Loop as you see fit, with number of columns and products you need per page.

Products archive page using elementor loop

Step 3: Add Elementor Taxonomy Widget

The final and most important step, is to add and configure the Taxonomy widget. on top of the Product Loop. We have a few simple settings to configure now:

  1. Selected Loop Grid: Select the name of the Loop grid from the dropdown
  2. Taxonomy: Select the taxonomy you want to filter. You can only choose one at a time.
  3. Direction: You can set a direction, options being horizontal and vertical. In this case, Horizontal is the best option.
  4. Item Alignment: You can align the taxonomy item in the direction they are displayed in (horizontal, in this case)
  5. Empty Items: This setting shows or hides the taxonomy which has no items
  6. Taxonomy Children: This setting shows the children taxonomies, if any.
  7. First Item: This setting shows the First item, which is basically the button to show all the items, without any filter. You can rename this item under the First Item Title field.
  8. Number of Taxonomies: You can set the maximum number of taxonomies to show
  9. Horizontal Scroll: This is a very useful setting if you have too many taxonomies. If the taxonomies overflow, then this setting will add a scrolling feature.
Online furniture store interface with product listings and prices.

You may also checkout our article about creating filters for Blog posts using Elementor Taxonomy widget: https://lytboxacademy.com/category-filters-with-elementor-taxonomy-widget/

Here is a video tutorial which goes in further depth:

YouTube video

Join the Lytbox Newsletter

Blog Page Sign Up
Comments have been temporarily deactivated and are in the process of being revamped for a far better user experience and support for tutorials.
Join the Lytbox Newsletter
Blog Page Sign Up
Lytbox Academy Logo

Reset your passord

Want to login? Click here.
Lytbox Academy Logo

Log in to your account

Forgot your password? Reset here.