April 25, 2023

Create an Elementor Loop Grid Filter with WP Grid Builder

Play Video

Create an Elementor loop grid filter with the help of WP Grid Builder. If you’ve been using Elementor’s Loop Grid for your WordPress site, you might have noticed the lack of a robust filter system. Web Squadron will guide you through the process of implementing a powerful filter system using the WP Grid Builder plugin. This premium plugin not only enhances your Loop Grid posts but also improves your Loop Grid products.

The tutorial will cover the creation of facets for posts and products, the integration of the plugin with Elementor, and the customization of the filter system according to your needs. By the end of this tutorial, you’ll be able to create a slick, easy-to-use filter system that will significantly improve your website’s user experience.

Tutorial Steps

  1. Install and Activate the WP Grid Builder Plugin
    The first step is to install the WP Grid Builder plugin. It’s a premium plugin with no free version, costing $49 per year per site. You can find the plugin here.
  2. Create Facets for Posts
    Once you’ve installed and activated the plugin, go to Grid Builder on your WordPress dashboard. Click on ‘Facets’ and create a new facet. Name it according to the category of posts you want to filter. Make sure to save your changes.
  3. Customize the Facet Behavior
    In the ‘Behavior’ section, select ‘Filter’ and choose the type of filter you want to use (e.g., checkbox, button, etc.). For the taxonomy, select ‘Category’. You can also define parent terms, include or exclude terms, and choose a Boolean operator (‘AND’ or ‘OR’).
  4. Add the Facet to Elementor
    Now, go to your Elementor page where you want to add the filter. In the widget selector, type ‘facet’ and drag the facet widget to your desired location. Select the facet you created and link it to your Loop Grid.
  5. Style the Facet
    In the ‘Style’ section, you can customize the typography, size, and color of your facet elements.
  6. Create Facets for Products
    The process of creating facets for products is similar to that for posts. However, you’ll need to select ‘Product Categories’ for the taxonomy. You can also create facets for product attributes like brand and color.
  7. Test Your Filter System
    Finally, preview your page to test your new filter system. You should be able to filter your Loop Grid posts or products based on the facets you created.

Why you should Use Elementor loop grid filter

Implementing a filter system for your Loop Grid in WordPress can be beneficial for enhancing your website’s user experience. With a filter system, users can easily find the posts or products they’re interested in, saving time and effort. This can lead to increased user engagement, longer site visits, and potentially higher conversion rates.

Moreover, a filter system can help organize your content, making your website look more professional and user-friendly. It also allows you to showcase your posts or products in a more structured and categorized manner.

Use Cases for an Loop Grid Filter

  • E-commerce Websites
    If you run an e-commerce website, a filter system is essential. The WPGrid Builder plugin allows you to create facets for product categories, brands, colours, and more. This allows your customers to easily sort and find the products they’re looking for.
  • Blogs and News Websites
    For blogs or news websites with a large number of posts, a filter system can help readers find posts based on categories or tags. This can significantly improve the reader’s experience on your website.
  • Portfolio Websites
    If you’re a designer or photographer showcasing your work on your website, a filter system can help potential clients find the type of work they’re interested in. For example, you can create facets for different types of design work or photography genres.

Common Issues

  1. Facet Not Working: If your facet is not working, make sure you’ve linked it to the correct Loop Grid in Elementor. You can find the ID of your Loop Grid in the ‘WP Grid Builder’ section in Elementor.
  2. Facet Not Displaying Correctly: If your facet is not displaying correctly, check the ‘Style’ section in the facet settings. You can customize the typography, size, and colour of your facet elements.
  3. Facet Not Filtering Correctly: If your facet is not filtering correctly, check the ‘Behavior’ section in the facet settings. Make sure you’ve selected the correct taxonomy and Boolean operator.

Required Resources

WP Grid Builder Logo
Free Options
Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Create an Elementor Loop Grid Filter with WP Grid Builder
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.