The Product Grid – Modern Layout Gutenberg block lets you create a clean, stylish, and highly flexible WooCommerce product display using the Gutenberg editor. Built with a modern design approach, this block supports Grid View, List View, and a Grid–List switcher, allowing shoppers to browse products in the way they prefer.
With advanced features such as badges, stock status, product feature labels, quick action buttons, multiple pagination styles, and rich styling controls, the product grid modern layout is ideal for building a polished, user-friendly, and conversion-focused product grid anywhere on your site.
Why Use Product Grid – Modern Layout?
The Product Grid – Modern Layout block gives you complete control over how WooCommerce products appear on your site. With its modern visual design, smooth interactions, and flexible layout options, it helps customers browse efficiently and encourages faster purchase decisions.
Where You Can Use the Product Grid – Modern Block
- Shop Page Templates
Replace the default WooCommerce shop layout with a clean, modern product grid. - Product Archive Templates
Ideal for categories, tags, search results, and collection pages. - Any Gutenberg Page
Display products on homepages, landing pages, promotional sections, or custom layouts.
You have complete freedom to place the product grid anywhere on your site.
Steps of Adding Product Grid – Modern Block
Step 1: How to Enable Product Grid – Modern Block
- Go to Dashboard → ShopLentor → Settings → Gutenberg
- Find Product Grid – Modern Block
- Switch it ON to activate the Block
Once enabled, the Block appears in your Block editor.
How to Use the Product Grid – Modern Layout Block
You can use the block in two different ways:
Method 1: Using the ShopLentor Template Builder.
- Go to Dashboard → ShopLentor → Template Builder
- Click Add New Template
- In the popup:
- Enter a Template Name
- Select Type → Shop or Archive
- Select Editor → Gutenberg
- Enable Set Default
- Choose a Sample Design
- Click Save Settings
- If you selected a Sample Design, your template is ready to use.
- To create a fully custom layout from scratch, follow the next steps:
- Select Edit with Gutenberg
- Click the + Block Inserter
- Search for Product Grid Modern
- Insert the block into your Shop or Archive template
Method 2: Add Directly Into Any Gutenberg Page
- Open any page or post with Gutenberg
- Click the + Block Inserter
- Search: Product Grid Modern
- Select the block named WL: Product Grid Modern
- Customize the block from the right-side settings panel
Product Grid – Modern Block Options
All settings are available inside the General and Styles tabs.
GENERAL SETTINGS
Query
- Query Type:
- All Products
- Recent Products
- Manual Selection
- Featured
- On Sale
- Best Selling
- Top Rated
- Recently Viewed.
- Number Of Products
- Categories / Tags
- Include / Exclude Products
- Order & Order By
- Exclude Out-of-Stock
- Exclude Products Without Image
Layout
- Grid or List
- Grid List tab
- Columns
- Gap
Display
- Image
- Image Resolution
- Secondary Image on Hover
- Title
- Price
- Rating
- Categories
- Add to Cart Button
- Quick View Button
- Wishlist Button
- Compare Button
Badge Settings
- Show Badge
- Badge Style (Gradient, Solid, Outline)
- Badge Position (Top Left, Top Right)
- Sale Badge
- Sale Badge Text
- New Badge
- New Badge Text
- New Badge Days
- Trending Badge
- Note: If the Badge Module is enabled globally, these settings are overridden.
Grid View Settings
- Show Description
- Description Length
Additional Options
- Card Hover Effect
- Image Hover Effect
- Show Quick Action Buttons
Pagination
- Enable Pagination
- Pagination Type:
- Numbers
- Load More
- Infinite Scroll
STYLES TAB
Product Card
- Background
- Border
- Border Radius
- Box Shadow
- Spacing
Image
- Image Border Radius
Content
- Content Padding
- Alignment
Badge
- Typography
- Color
- Background Color
- Border
- Border Radius
- Padding
Title
- Typography
- Color
- Hover Color
- Spacing
Review
- Star Color (Filled / Empty)
- Star Size
- Star Spacing
- Review Count Typography
Category
- Typography
- Category Color
- Hover Color
Description
- Typography
- Color
- Margin
Price
- Regular Price Color
- Sale Price Color
- Typography
Add to Cart Button
- Normal and Hover Style
- Color
- Background Color
- Border
- Typography
- Border Radius
- Padding
- Icon Size (if used)
Quick Action Button
- Icon Size
- Color
- Background
- Border Radius
- Padding
Pagination Style
- Pagination Alignment
- Typography
- Normal State Colors
- Hover State Colors
- Active State Colors
- Border Type
- Border Color
- Border Radius
- Padding
- Margin
Visit & Preview the Page
Once you finish customizing:
- Click Publish or Update
- Visit your Shop page
- Test both Grid and List views
- Check responsiveness on Mobile, Tablet, and Desktop
- Make any additional style adjustments
Your Product Grid – Modern Block is now live!
Tips for Best Visual Results
- Use Grid View for visual products like fashion, home decor, and beauty.
- Use List View for detailed or B2B product types.
- Enable secondary image hover for a modern, dynamic look.
- Keep product descriptions short for Grid View.
- Use badges (Sale, New, Trending) strategically to draw attention.
- Use Load More or Infinite Scroll for large catalogs.
- Align spacing and colors with your theme for a polished finish.
- Preview on mobile to refine small-screen spacing and readability.
Conclusion
The Product Grid – Modern Layout Gutenberg block is a powerful and flexible way to design beautiful WooCommerce product displays inside the Gutenberg editor. With modern design options, advanced filtering, customizable badges, hover effects, multiple pagination styles, and complete styling control, it helps you create a high-quality product grid that enhances user experience and drives conversions.
Whether used on a Shop Template, Archive Page, or any custom-designed Gutenberg page, this block provides the perfect blend of functionality and modern visual design for any WooCommerce store.