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.
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.
- 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"withdata-metroAttrcarrying 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.
- 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.
