---
title: "How to Show WooCommerce Products in a Custom Metro Layout in WordPress?"
url: https://nexterwp.com/docs/show-woocommerce-products-in-a-custom-metro-layout-in-wordpress/
date: 2023-08-09
modified: 2026-04-14
author: "Aditya Sharma"
description: "Are you looking to show your WooCommerce products in a custom metro layout? With the Product Listing block from the Nexter Blocks, you can create a custom structure for the..."
image: https://nexterwp.com/wp-content/uploads/2024/05/show-woocommerce-products-in-a-custom-metro-layout-in-wordpress-1024x519.jpg
word_count: 281
---

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

## Key Takeaways

- Nexter Blocks Product Listing block creates a custom metro layout for WooCommerce products in WordPress by selecting Metro in the Layout section.
- Columns Manager lets the user choose a Metro Column number, then Custom Layout accepts Width:Height ratios like 1:2 | 2:1 | 2:2.
- The layout value loops automatically for remaining items, and the post notes that trial and error is needed to get the desired layout.

Are you looking to show your WooCommerce products in a custom metro layout? With the Product Listing block from the Nexter Blocks, you can create a custom structure for the metro layout.

With this, you can come up with some unique layouts to showcase your products.

*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.

3. Then go to the **Columns Manager** tab, and from the Metro Column dropdown, select your desired column number.

4. After that, select **Custom** from the **Select Style** section, then you’ll see a **Custom Layout** field where you have to layout structure value.

You have to enter the value in a **Width:Height** ratio to set the width and height of an item then you can use separator (**|**) to target multiple items. It will automatically create a loop based on your entered value.

For example, if you enter a value like this 1:2 | 2:1 | 2:2, here it specifies the width and height of three items separately, then the value will automatically loop (3 items each) for the remaining items.

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

> *Note: You have to do some trial and error to get your desired layout.*

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