The Product Grid – Magazine Layout Gutenberg block allows you to build an magazine -style WooCommerce product grid directly inside the WordPress Block Editor. It features asymmetric layouts, large product numbering, magazine-inspired image placements, refined spacing, and modern editorial badges. This block is ideal for fashion, apparel, lifestyle, and visual-driven shops looking for a premium magazine-like storefront.
The block supports Grid View, List View, and a Grid–List Toggle. You can display product numbers, short and long descriptions, featured badges, quick action buttons, and various pagination types. Styling controls are included for adjusting colors, typography, spacing, buttons, and product numbering placement. This documentation explains how to enable the block, insert it into your page, configure product display settings, and customize the magazine layout using Gutenberg.
Why Use the Magazine Layout in Gutenberg?
The Magazine Layout brings a dynamic, editorial-style product grid to stores built with Gutenberg. It is useful for:
- Shop Page Templates – Create a premium Magazine shop layout.
- Product Category & Archive Templates – Ensure consistent styling on all WooCommerce archive pages.
- Custom Pages Built in Gutenberg – Add the block wherever WordPress blocks are supported.
What Makes This Block Stand Out?
- Magazine asymmetric product grid
- Large magazine-style product counter (01, 02, 03)
- Smart badges (Sale, New, Trending)
- Quick Actions
- Load More & Infinite Scroll pagination
- Advanced product queries
- Full styling customization for colors, spacing, typography & hover effects
Step 1: How to Enable Product Grid – Magazine Block
Before using the block inside Gutenberg, make sure it is enabled.
- Go to Dashboard → ShopLentor → Settings → Gutenberg
- Scroll to the Gutenberg Blocks section
- Locate Product Grid – Magazine Block
- Switch the toggle ON to activate the block
Step 2: How to Add the Product Grid – Magazine Block in Gutenberg
Once the block is enabled, you can insert it into any WordPress page.
Method 1: Add Inside a WordPress Page
- Open any page using the Block Editor (Gutenberg)
- Click the ( + ) Add Block button
- In the block search bar, type: “Product Grid – Magazine”
- Select the block
- The default Magazine product grid will be inserted into your page
- Customize settings from the Block Sidebar Panel
Method 2: 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 ( optional )
- 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 Magazine
- Insert the block into your Shop or Archive template
Product Grid – Magazine 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
- Filterable
Layout
- Grid or List
- Grid List tab
- 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 (words)
- Show Product Number
- Add to Cart Text
Quick Actions
- Show Quick Actions
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
Category
- Typography
- Category Color
- Hover Color
Description
- Typography
- Color
- Margin
Price
- Regular Price Color
- Sale Price Color
- Typography
Grid Cart Button
You’ll find two separate states:
- Normal – default state
- Hover – when the user hovers over the link
Available options in both states:
- Color
- Background Color
- Border Color
- Typography
- Border Type
- Border Radius
- Padding
- Margin
Grid Quick Actions
You’ll find two separate states:
- Normal – default state
- Hover – when the user hovers over the link
Available options in both states:
- Color
- Background Color
- Border Color
- Typography
- Border Type
- Border Radius
- Padding
- Margin
Product Number
- Grid View Color
- Grid View Position Top
- Grid View Position Left
- List View Color
- List View Position Top
- List View Position Left
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 – Magazine Block is now live!
Best Practices & SEO Tips
- Use tall portrait images for best magazine layout results
- Keep grid descriptions short for visual balance
- Use List View for storytelling-driven layouts
- Enable product numbering for a true editorial feel
- Use Load More pagination for improved UX
Conclusion
The Product Grid – Magazine Layout block makes it easy to create a stylish WooCommerce product grid in Gutenberg. With its asymmetric layout, product numbering, badges, and flexible display controls, it offers a modern and visually engaging way to showcase products. Use it to build a clean, magazine-inspired shop section that fits perfectly with your brand.