---
title: "How to Show WooCommerce Products in Metro Layout in WordPress?"
url: https://nexterwp.com/docs/show-woocommerce-products-in-metro-layout-in-wordpress/
date: 2023-08-09
modified: 2026-04-14
author: "Aditya Sharma"
description: "Showcasing WooCommerce products in a Metro layout on your WordPress website can elevate your online store's aesthetics and captivate your visitors. The Metro layout is visually appealing, with its unique..."
image: https://nexterwp.com/wp-content/uploads/2024/05/show-woocommerce-products-in-metro-layout-in-wordpress-1024x519.jpg
word_count: 203
---

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

## Key Takeaways

- Nexter Blocks Product Listing block shows WooCommerce products in a creative Metro layout on a WordPress website.
- Metro layout uses a unique tile-based design, and the Layout section lets the user select Metro after choosing the listing type and style.
- Columns Manager tab manages layout columns and style, and it also lets the user create a custom metro layout for products.

Showcasing WooCommerce products in a Metro layout on your WordPress website can elevate your online store's aesthetics and captivate your visitors. The Metro layout is visually appealing, with its unique tile-based design that stands out from traditional product displays.

With the Product Listing block from the Nexter Blocks, you can show products in a creative metro layout.

*To check the complete feature overview documentation of the Nexter Blocks* Product Listing block, [click here](https://nexterwp.com/docs/add-product-listing-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks***, make sure its installed & activated to enjoy all its powers.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/listing/wordpress-product-listing/)

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

1. Add the Product Listing block to the page. 

2. After selecting the appropriate listing type from the **Types** section and style, select **Metro** from the **Layout** section.

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

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

From here, you can also [create a custom metro layout for your products](https://nexterwp.com/docs/show-woocommerce-products-in-a-custom-metro-layout-in-wordpress/).

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

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

Also, check [How to Show WooCommerce Products in Grid Layout in WordPress](https://nexterwp.com/docs/show-woocommerce-products-in-grid-layout-in-wordpress/).