Do your product images come in different shapes, leaving gaps in a regular grid? Masonry lets each card keep its own height and stacks them without gaps.
It is a layout option in the Woo Product Listing widget from The Plus Addons for Elementor.
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 it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Woo Product Listing widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.
- WooCommerce installed and active, with some published products.
- Widget to enable: Woo Product Listing, switched on under ThePlus Settings > Widgets.
Step 1: Add the widget and choose Masonry
Drag the Woo Product Listing widget onto the page. In Content > Content Layout, set Layout to Masonry.
Step 2: Set the columns
Content > Columns Manage works as for Grid: Column 4 on desktop, Column 3 on tablet and Column 2 on mobile by default.
Limitations
- Little difference with same-size images. If every product photo is square, masonry looks like grid.
- Pro only. The Woo Product Listing widget is not in the free plugin.
Related Docs
- Woo Product Listing widget: settings overview — every control in the widget.
- Show products in a grid
- Show products in a metro layout
