Welcome to this practical guide where I'll explain how to create an Elementor WooCommerce loop grid with category filters and tags.
For information, the loop grids (loops) were introduced by Elementor during the update 3.11.
With this tutorial (from Youtuber Jeffrey), you can make your WooCommerce shop pages much more interesting and functional.
We will only use Elementor Pro and WooTrade, without additional plugins or complex code. Here we go!
Contents
🛠️ Step 1: Activate Taxonomy Filter
To start with, you have to take a few preliminary steps.
Access parameters of Elementor, then goes into the feature section.
Scroll down until you find the taxonomy filter.
It's this tool you're going to use for your category and tag filters.
It works not only for blog posts, but also for products. Enable it and save your changes.
Previously, it was necessary to activate the loop grid, but it is now enabled by default in Elementor.
Also make sure you have your products well configured with categories. Add some products if necessary.
📦 Step 2: Create a product archive page
Once your products are added and classified:
- Go to the Models
- Open it theme builder (see the screenshot below if necessary).
You're going to create a template forproduct archive, similar to a shop page.
Click on « New » and appoint him « Shop Page ».
This will allow you to start building your page.
For this step, I will build the page from scratch, without using preconceived templates.
You can also copy items from other pages to save time, such as a header or banner. But that's not the subject of this tutorial.
🎨 Step 3: Add a Loop Grid
Now add a loop grid.
Search widget « Loop grid » in Elementor's widgets library and drag it into your container.
Once you add the widget, click on « Create a template » and begins to add the necessary elements as image of the product, on title, button and price.
Use dynamic tags for each product to display its respective information. This will allow you to maintain consistency and automate the process.
🖼️ Step 4: Configure Product Card Elements
For each item, such as the image, uses the dynamic query for image of WooCommerce product.
Make sure the height of the image is defined to maintain uniformity in the grid. For example, you can set a height of 200px. Test and you'll see what makes you look good visually. Understands that this parameter is important to properly present your visuals.
Sets the image style so that it is well adjusted.
For the title of the productadd the corresponding dynamic tag.
Repeat this process for the button « Add to cart » and price of the product. Don't forget to stylize these elements so they fit your global theme.
🔄 Step 5: Add Taxonomy Filter
After setting up your product grid, it's time to add the taxonomy filter.
Search widget « Taxonomy filter » and place it just above the loop grid.
Select the widget of the Loop grid and configure the filter to display your product categories (those you want at least).
This filter will allow your users to filter products by category. You can also configure it to filter by tags or product types.
Make sure everything works properly by checking the parameters.
🎉 Step 6: Stylize the filter
Now is the time to stylize the filter. You can choose to display it in vertical or horizontal mode, depending on the appearance you want. For a better user experience, it is often recommended to center it or align it to the left.
For filter style, consider using a pill-shaped design. This means that the filter options will have rounded corners and will stand out visually. Add colors and overshoot effects to make the filter more interactive.
❓ FAQ
What are the advantages of using Elementor to create WooCommerce filters?
Elementor allows easy and visual customization without requiring coding skills. You can create attractive and functional product pages quickly.
But its filter capabilities are limited by default. You'll have to compensate with plugins I'm talking about below.
Can I use other plugins with Elementor?
Yes, although this guide focuses on Elementor and WooCommerce, you can integrate other plugins for advanced features, such as JetFilters for more robust filters.
How can I create filters by products, reviews, etc?
You won't be able to use Elementor's loops. Either use a plugin (see below) or use a theme that manages this part, such as Shoptimizer.
How can I add more filters?
For more advanced filtering options, consider using plugins like JetFilters, WP Facets (which I used for a client project and which is really not bad and powerful) or WP GridBuilder, which offer further customization for WooCommerce stores.
💡 Conclusion
By following these steps, you can easily configure category filters and tags for your products, making browsing more intuitive. Even if this type of filter will not be as complete as a real e-commerce filter, in the strict sense of the term.
Don't hesitate to experiment with styles and adjust the settings to match your vision.
PS: By the way, if you want to save crazy time on creating WooCommerce stores, take a look at WooReady.
