Do you want a magazine-style product page, where a few products get big tiles and the rest fill in around them?
That is the Metro layout 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 Metro
Drag the Woo Product Listing widget onto the page. In Content > Content Layout, set Layout to Metro.
Step 2: Choose columns and a pattern
In Content > Columns Manage, Metro uses its own controls:
- Metro Column — 3, 4, 5 or 6, default 3.
- Metro Style — the tile pattern for that column count, or Custom.
- Tablet Responsive — on by default, with separate tablet settings.
Limitations
- Tiles follow the pattern by position, not by which product matters most. Use Order By or Display Product to control which products come first.
- Not for Wishlist or Recently Viewed listings, which the plugin notes do not work with Metro.
- 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 masonry grid
