If you’ve been building WordPress sites with Gutenberg and WooCommerce, you might have wondered:
➡️ How can I display WooCommerce products anywhere on my website—not just on the default shop page?
In this tutorial, we’ll walk through how to use the Loop Builder in Gutenberg to create fully customized WooCommerce layouts and showcase products anywhere you want on your website.
What You’ll Learn in This Tutorial
- How to use Gutenberg’s Loop Builder to display products.
- How to design product layouts with headings, images, ratings, prices, and Add to Cart buttons.
- How to style your product blocks for a professional, branded look.
- How to use product collections like handpicked products, best sellers, upsells, and related products.
Set Up Your Page
- Open your WordPress site and create or edit the page where you want to display WooCommerce products.
- Add a hero section or banner block to give the page structure.
- Insert a Group block, add a heading like “Our Products”, and style it with padding for spacing.
Add the Loop Builder
- Inside the group, search for the Loop block.
- Start with a blank loop and select Product as the post type.
- Choose your desired layout: grid, list, or full-width.
👉 Tip: Using the grid layout works well for most shops.
Customize the Product Display
- Add product elements such as:
- ✅ Product Title
- ✅ Product Image
- ✅ Price
- ✅ Rating
- ✅ Add to Cart Button
- Adjust alignment (centered works great for a clean look).
- Group elements together so you can style them collectively.
Style Your Product Layout
- Set background color (e.g., black for a bold look).
- Change text colors for contrast (e.g., white titles and prices).
- Customize the Add to Cart button with your brand colors.
- Use padding and spacing to create breathing room between products.
💡 Bonus styling idea: Experiment with border radius, spacing, and aspect ratios to create a consistent, polished product grid.
Explore Advanced Product Blocks
WooCommerce’s Gutenberg integration gives you flexibility beyond the shop page.
✅ You can add:
- Product Categories
- Product Collections
- Handpicked Products
- Upsells and Cross-sells
For example, you can select handpicked products and manually add featured items to highlight on your homepage or landing pages.
Why Use Gutenberg for WooCommerce Layouts?
- Full design control without coding.
- Works with any WordPress theme.
- Lets you display products anywhere (homepage, landing pages, blog posts).
- Perfect for client projects where every store has unique requirements.
Helpful Resources
- WooCommerce Plugin – Free plugin for WordPress eCommerce.
- Gutenberg Block Editor Guide – Learn how to use blocks effectively.
- WooCommerce Blocks Documentation – Deep dive into WooCommerce-specific blocks.
Conclusion
Using Gutenberg’s Loop Builder, you can create custom WooCommerce product layouts anywhere on your site. Whether it’s a homepage, a landing page, or even a blog post, you have full creative freedom to design product grids, lists, or collections that match your client’s brand.
💬 Have questions about WooCommerce layouts or need help with a custom store? Drop a comment below or reach out for collaboration!
