December 8, 2023

Walkthrough: Product Loop Grid Page including Filters with Elementor & WooCommerce

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Explore the process of creating an engaging and functional product loop grid page including filters, utilizing the powerful features of Elementor & WooCommerce. This walkthrough shows the process, requiring no additional plugins or code snippets, and focuses on enhancing user experience with intuitive category and tag filters.

Product Loop Grid Page including Filters Preview
Product Loop Grid Page including Filters Preview


Please make sure you have the following installed and activated:

Product Loop Grid Page including Filters Summary

  • 0:00: Introduction to creating a WooCommerce product grid with category and tag filters using only Elementor Pro and WooCommerce, without additional plugins, add-ons, or code snippets.
  • 0:43: Instructions to activate the taxonomy filter feature in Elementor settings for category and tag filters. Mention of the pre-activated loop grid feature in Elementor.
  • 1:19: Steps to set up WooCommerce products with categories for the product grid.
  • 1:41: Process of building a product archive page in Elementor’s theme builder.
  • 2:00: Beginning the design of the product archive page, with a focus on creating a product grid. Explanation of using the loop grid widget in Elementor for product and postcards.
  • 3:07: Detailed steps to create a product card in the loop grid, including adding images, product titles, buttons for “Add to Cart,” and product prices using Elementor’s dynamic tags.
  • 8:07: Adjusting the loop grid settings for the product display, including the number of columns and total products displayed.
  • 11:27: Adding a taxonomy filter above the product grid for category filtering. Instructions on configuring and styling the filter, including setting it to display product categories.
  • 13:02: Additional options for the filter, like vertical alignment and horizontal scrolling, particularly useful for mobile responsiveness.
  • 15:18: Final styling of the filter, creating a pill-shaped design for better visibility and usability.
  • 17:09: Saving the design and previewing the final product grid with a filter in the front end. Suggestions for more advanced filters using other plugins for larger e-commerce sites.
  • 17:57: Conclusion, emphasizing the tutorial’s aim to enhance WooCommerce shop pages.

Official Documentation

Product Loop Grid Page including Filters – Conclusion

This walkthrough guides you through the process of creating a visually appealing and functional product loop grid page. By leveraging Elementor’s features, we have built a clean, minimalistic yet effective product display for WooCommerce sites, enhancing the overall user experience.

Required Resources

WooCommerce Logo
Free Options
Elementor Logo
Free Options
Credit to Jeffrey at Lytbox
Jeffrey's Lytbox Studio is a YouTube channel dedicated to empowering aspiring website creators by offering web design tutorials, insights into the business side of web design, and fostering creativity and skill development. With a strong focus on Elementor, Jeffrey shares his journey from a techno-dinosaur to a successful freelancer and design studio owner, aiming to inspire and educate others in their quest for freedom and purpose through the world of web design.
Walkthrough: Product Loop Grid Page including Filters with Elementor & WooCommerce
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.