How to Show WooCommerce Products in Metro Layout in WordPress?

Key Takeaways

  • Nexter Blocks includes a Product Listing block that allows users to display WooCommerce products in a Metro layout.
  • The Metro layout features a unique tile-based design that enhances the visual appeal of online stores.
  • Users can customize the Metro layout by managing columns and styles through the Columns Manager tab.
Table of Contents

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.

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

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.

product listing content layout metro new

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.

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

product listing metro layout demo

Also, check How to Show WooCommerce Products in Grid Layout in WordPress.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if the Product Listing block isn't showing up?

If the Product Listing block isn't appearing, ensure that the Nexter Blocks plugin is installed and activated. This block is essential for displaying products in a metro layout. Without it, you won't have access to the necessary features. Double-check your plugin settings and confirm that your WooCommerce products are added to your store.

What are the best practices for setting up a metro layout with Nexter Blocks?

When setting up a metro layout, consider the number of columns and the overall style to ensure a balanced look. Use the Columns Manager tab to manage layout columns effectively. A well-structured layout enhances user experience and keeps visitors engaged. Experiment with different styles to find what resonates best with your audience.

Does the metro layout impact page load speed?

The metro layout itself should not significantly impact page load speed, especially since NexterWP products use pure Vanilla JS and load only 1 CSS and 1 JS file per page. However, ensure that your images are optimized for web use to maintain fast loading times while using visually rich layouts. This balance is crucial for user retention.

Last reviewed: April 14, 2026

Related Docs