---
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-04-11
lang: en
author: "Aditya Sharma"
description: "Are you eager to transform your WooCommerce product display into a sleek and modern Metro layout using Elementor? The Metro layout is a visually appealing and popular way to showcase..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Show-WooCommerce-Products-in-Metro-Layout-in-Elementor_-1024x536.jpg
word_count: 210
---

# How to Show WooCommerce Products in Metro Layout in Elementor?

## 

- Transform WooCommerce product displays into a Metro layout using the Product Listing widget from The Plus Addons for Elementor.
- Select 'Metro' from the Layout section after adding the Product Listing widget to customize the display style.
- Manage layout columns and fine-tune settings in the Columns Manage tab for optimal product presentation.

Are you eager to transform your WooCommerce product display into a sleek and modern Metro layout using Elementor? The Metro layout is a visually appealing and popular way to showcase products on your website. With its unique tile-based design, the Metro layout adds a touch of creativity and organization to your product listings.

With the Product Listing widget from The Plus Addons for Elementor, you can show your products in a beautiful metro layout.

*To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, [click here](/docs/product-listing-widget-settings-overview/).*

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing//#woo-products-wgts?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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 **Metro** from the **Layout** section.

![](https://theplusaddons.com/wp-content/uploads/2023/08/product-listing-metro-layout-new.png)

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

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

![product listing metro layout demo](https://theplusaddons.com/wp-content/uploads/2023/08/product-listing-metro-layout-demo.png)

Also, check [How to Filter WooCommerce Products by Category in Elementor](https://theplusaddons.com/docs//filter-woocommerce-products-by-category-in-elementor/).