---
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-09-26
lang: en
author: "Aditya Sharma"
description: "The metro presets cover the usual shapes, but they decide for you which tile is large and where it sits. On a shop front that decision is a merchandising one...."
image: https://nexterwp.com/wp-content/uploads/2024/05/show-woocommerce-products-in-a-custom-metro-layout-in-wordpress-1024x519.jpg
word_count: 426
---

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

The metro presets cover the usual shapes, but they decide for you which tile is large and where it sits. On a shop front that decision is a merchandising one.

A custom metro pattern lets you describe the arrangement yourself, tile by tile.

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

## Before You Start

- **Edition:** **Pro** — the Product Listing block needs Nexter Blocks Pro.- **Block to enable:** Product Listing, switched on under **Nexter > Blocks** in your WordPress dashboard.- **WooCommerce active, with published products.** The block reads your real catalogue, so an empty store renders an empty listing.- A settled **product count**, because the pattern is built around it.

## Steps

- Select your **Product Listing** block and set the layout to **metro**.

![The metro layout settings](https://nexterwp.com/wp-content/uploads/2026/09/ql-layout-metro.webp)

- Change the metro style to the **custom** option.

- Describe your pattern, giving each tile its width and height.

- Set a simpler pattern for tablet and phone.

- Publish and check the product count fills the pattern.

## How It Behaves

The custom pattern is carried in the same attribute as the preset styles.

- **Measured on a published page:** a custom metro still rendered `data-layout="metro"` with `data-metroAttr` carrying the style and column values, exactly as a preset does.- **Each device keeps its own pattern**, measured as separate desktop, tablet and mobile values in that attribute.- **The pattern and the product count have to agree.** The block does not stretch tiles to fill a gap.- **Pair it with a fixed product selection** so the arrangement stays deliberate — see [show products by ID](https://nexterwp.com/docs/show-woocommerce-product-by-product-id-in-wordpress/).- **Measured with Nexter Blocks Pro deactivated:** the block renders nothing at all — no wrapper, no products, no prices. This is a Pro-only block.

## Limitations

- **Pro only** — measured with Nexter Blocks Pro deactivated, nothing renders.- **It is fiddly by nature**, and takes trial and error to get right.- **Patterns rarely translate down a screen size**, so expect to simplify for tablet and abandon it for phone.- **Changing the product count breaks the pattern**, so settle the count first.- **Tiles of different shapes crop product images differently.**

## Troubleshooting

### There are holes in my layout

The pattern expects more products than the listing shows. Match the count to the pattern.

### My pattern is ignored

The metro style has to be set to the custom option rather than left on a preset.

### It is unreadable on mobile

Set a much simpler pattern at the phone breakpoint, or drop to a single column.

### The products keep moving between tiles

The ordering is changing as you publish products. Pin the selection by listing specific product IDs.

## Related Docs

- [Show products in metro layout](https://nexterwp.com/docs/show-woocommerce-products-in-metro-layout-in-wordpress/)- [Show a WooCommerce product by product ID](https://nexterwp.com/docs/show-woocommerce-product-by-product-id-in-wordpress/)- [Add product listing in WordPress](https://nexterwp.com/docs/add-product-listing-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)