How to Show WooCommerce Products in Masonry Grid Layout in Elementor?

Table Of Content

Are you looking to display your WooCommerce products in a visually appealing masonry grid layout on your Elementor-powered website? Masonry grid layout is a popular and effective way to showcase products on an online store. It helps to organize products in a dynamic and visually captivating format.

With the Product Listing widget from The Plus Addons for Elementor, you can easily create a masonry grid layout to show products.

To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, make sure you’ve added some products to your WooCommerce store, then follow the steps – 

1. Add the Product Listing widget to the page. 

2. After selecting the appropriate listing type from the Product Listing Types dropdown and style, select Masonry from the Layout section.

Product listing masonry layout new how to show woocommerce products in masonry grid layout in elementor? From the plus addons for elementor

Now your products will show in a beautiful masonry layout. You can manage the masonry columns from the Columns Manage tab.

You can fine-tune the layout with other settings and style options.

Product listing masonry layout demo

Also, check How to Show WooCommerce Products in Grid Layout in Elementor.

AUTHOR

Aditya Sharma

Aditya has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos