--- title: "How to Show WooCommerce Products in Metro Layout in Elementor?" url: https://theplusaddons.com/docs/show-woocommerce-products-in-metro-layout-in-elementor/ date: 2023-08-08 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Show-WooCommerce-Products-in-Metro-Layout-in-Elementor_-1024x536.jpg word_count: 282 --- # How to Show WooCommerce Products in Metro Layout in Elementor? ## - Woo Product Listing widget uses Metro layout to create a magazine-style product page, with a few products shown as big tiles and the rest filling around them. - Metro Column offers 3, 4, 5 or 6 columns, with 3 as the default, and Metro Style controls the tile pattern for that column count or Custom. - Woo Product Listing widget is Pro only, requires WooCommerce installed and active with published products, and is enabled under ThePlus Settings > Widgets. 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](https://theplusaddons.com/docs/product-listing-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/?utm_source=tpae&utm_medium=docs&utm_campaign=text#woo-products-wgts) ## 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**. ![The Layout control with Metro selected](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-layout-wide-metro.webp) ## 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. ![The Metro Column dropdown in Content > Columns Manage](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-metro-column-wide-metro.webp) ![WooCommerce products shown in a metro layout](https://theplusaddons.com/wp-content/uploads/2023/08/product-listing-metro-layout-demo.png) ## 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](https://theplusaddons.com/docs/product-listing-widget-settings-overview/) — every control in the widget.- [Show products in a grid](https://theplusaddons.com/docs/show-woocommerce-products-in-grid-layout-in-elementor/)- [Show products in a masonry grid](https://theplusaddons.com/docs/show-woocommerce-products-in-masonry-grid-layout-in-elementor/) ## Frequently Asked Questions **Q: What do I need before showing WooCommerce products in Metro layout in Elementor?** A: The setup depends on three basics: The Plus Addons for Elementor Pro, WooCommerce installed and active with published products, and the Woo Product Listing widget enabled under ThePlus Settings > Widgets. That matters because the widget does not appear in the free plugin, so missing any one of those blocks the workflow before you even reach the layout settings. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the Metro layout inside that Pro widget. **Q: Why isn’t the Woo Product Listing widget showing in Elementor?** A: The most common blocker is edition level. The Woo Product Listing widget is part of The Plus Addons for Elementor Pro, so it does not appear in the widget panel of the free plugin. Another thing to verify is that the widget is switched on under ThePlus Settings > Widgets. If both are in place and WooCommerce is active with published products, the widget should be available inside Elementor. **Q: How do I switch WooCommerce products to Metro layout in Elementor?** A: Metro is selected from the Woo Product Listing widget itself. After dragging it onto the page, go to Content > Content Layout and set Layout to Metro. That changes the product display from a standard list-style arrangement into a magazine-style grid where some tiles are larger than others. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this layout inside the Elementor editor without code. **Q: What column settings work best for Metro product layouts?** A: Metro uses its own column controls, and the page lists 3, 4, 5, or 6 columns with 3 as the default. The right choice depends on how dense you want the page to feel: fewer columns usually give larger tiles and more breathing room, while more columns make the pattern tighter. Tablet Responsive is on by default too, so tablet-specific settings matter if you want the layout to stay balanced across devices. **Q: Can I use Metro layout for Wishlist or Recently Viewed products?** A: Metro is not meant for Wishlist or Recently Viewed listings. The page explicitly notes that those listing types do not work with Metro, so this layout is better reserved for standard product displays where tile size can follow a visual pattern. If you need a different presentation style for those cases, The Plus Addons for Elementor provides separate grid and masonry grid docs: [Show products in a grid](https://theplusaddons.com/docs/show-woocommerce-products-in-grid-layout-in-elementor/) and [Show products in a masonry grid](https://theplusaddons.com/docs/show-woocommerce-products-in-masonry-grid-layout-in-elementor/). **Q: How do I control which products get the bigger tiles in Metro layout?** A: Metro assigns tile sizes by position in the pattern, not by which product is most important. That means product order matters more than individual product priority when you want a specific item to land in a large tile. The practical fix is to use Order By or Display Product so your key products appear earlier in the sequence. For deeper control over widget behavior, [Woo Product Listing widget: settings overview](https://theplusaddons.com/docs/product-listing-widget-settings-overview/) covers every control in the widget.