November 3, 2023

Set Up a WooCommerce Product Grid with Elementor’s Loop Grid

Play Video

Setting up a WooCommerce Product Grid can be a challenging task, especially if you’re not a coding expert. But worry not! With Elementor’s Loop Grid Widget, you can easily customize your WooCommerce product grid to fit your brand’s aesthetic and functionality needs.


Please make sure you have the following installed and activated:

Understanding the WooCommerce Product Page

Before getting into the customization, it’s essential to understand what a WooCommerce product page is. This is an auto-generated page that lists all the products in your online store. It usually includes the product image, title, price, and an “Add to Cart” button.

Tip: The appearance of this page can vary depending on the WordPress theme you’re using.

Limitations of Traditional Methods

Using the WordPress customizer or a basic theme often restricts your customization options. You might only be able to change the number of rows displayed or some basic filtering options.

Why Elementor Pro?

Elementor offers a more flexible approach. Not only does it provide various widgets related to products and WooCommerce, but it also introduces the Loop Grid Widget for complete control over your product grid.

Setting Up the Loop Grid Widget

  1. Navigate to Templates > Add New.
  2. Select “Products Archive Template”.
  3. Name the template. For example, you could name it “Shop”.
  4. Click on “Create Template”.
    Name the template
  5. Locate the Loop Grid Widget and drag it onto the canvas.

    Insight: You’ll be prompted to create a template where you can add all the product information you want to display.

  6. Create a template where you add all the product information you want to display (e.g. image, title, price, etc.).
    Create a loop template
  7. Set the parameters for the loop, such as how many times you want it to repeat on the page or what category you want to pull from.
    Set the parameters for the loop

    Note: You can also add other Elementor widgets to highlight specific products or add call-to-actions.

  8. Publish it as a product archive.

Supplementary Resources

WooCommerce Product Grid with Elementor – Conclusion

Elementor’s Loop Grid Widget offers an efficient and user-friendly way to customize your WooCommerce product grid. With its easy-to-use interface and extensive customization options, you’re well on your way to creating a product grid that not only looks good but also enhances user experience.

Required Resources

WooCommerce Logo
Free Options
Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Set Up a WooCommerce Product Grid with Elementor’s Loop Grid
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.