Loop Templates and Layouts
Loop templates define how each result card looks in the Archive Loop block. WPEnhanced Ajax Filter Blocks ships with ready-made templates so you can build polished grids in the block editor without writing PHP templates.
Templates are Gutenberg-only—select and configure them in the Archive Loop block sidebar or the first-run template picker.
Available templates
| Template | Visual style | Best for |
|---|---|---|
| Blog Style | Image on top, title and meta below | Blogs, magazines, news grids |
| Minimal List | Compact rows, emphasis on title/text | Documentation indexes, simple directories |
| Background Image | Full-card background photo with overlay text | Portfolio, hero-style grids, visual archives |
| Shop Style | Product image, price, rating, add-to-cart | WooCommerce catalogs (requires WooCommerce) |
| Custom Template | Your saved custom loop layout | Brand-specific card designs |
Switch templates anytime under Loop template in the Archive Loop content settings. Design options adjust per template.
Choosing a template
Use the template picker when first inserting Archive Loop, or change later in block settings:
- Select the Archive Loop block.
- Open Loop template (or Design template step).
- Pick a template card matching your content type.
- Toggle which elements appear on each card.
Blog Style is the default for post archives. Switch to Shop Style when post type is Product.
Element toggles (content settings)
Each template exposes checkboxes for visible card parts. Common toggles:
Posts (Blog Style, Minimal List, Background Image)
- Featured image and image size
- Post title
- Author, date, date format
- Categories and tags (with optional category count)
- Excerpt, excerpt length, read-more link
- Comment count
- Content overlay visibility and hover animation (Background Image)
Products (Shop Style)
- Featured image
- Title and price
- Star rating
- Sale badge
- Add to cart button and variations
- Excerpt (optional)
- Overlay on hover
Disable elements you do not need before tuning design—fewer elements mean faster visual iteration in the Design tab.
Template-specific design options
The Design tab shows panels relevant to the active template:
- Card — Background, border, shadow, spacing
- Image — Border radius, shadow, min/max height
- Typography — Title, meta, price, category/tag links
- Buttons — Read more, add to cart, view cart
- Overlay — Colour, icon, content alignment (Background Image / Shop hover)
Background Image templates add content alignment, colour theme (light/dark overlay text), and image hover animation.
Custom Template
Custom Template renders a loop layout saved on your site—typically built with the plugin’s loop builder or imported layout tool (availability depends on your plugin version and site setup).
When selected:
- Choose the custom layout from the Custom template dropdown.
- Ensure the custom layout’s post type matches the Archive Loop query.
- Preview on the front end—custom templates may require re-save after plugin updates.
Use custom templates when brand guidelines exceed what built-in templates offer.
Template picker workflow
On first insert, a modal may guide you through:
- Design template — Pick visual style (Blog, Shop, etc.)
- Query template — Optional starting query preset (categories, featured products, etc.)
You can dismiss the picker and configure manually. “Don’t show again” stores the preference in browser storage.
Pairing templates with grid style
Templates control card markup; Grid settings control layout:
| Grid style | Pairing notes |
|---|---|
| Grid | Default; equal-height rows optional |
| Masonry | Cards flow by height; good for mixed image aspect ratios |
| List (Pro) | Minimal List template shines in list mode |
| Grid/List switch (Pro) | Let visitors toggle; remember cookie preference |
See Grid, masonry, and pagination.
WooCommerce Shop Style tips
- Enable Add to cart for quick purchase paths on archive pages
- Show Rating when reviews drive conversion
- Use Variations only if simple add-to-cart is insufficient for your catalog
- Match filter sidebar attributes (colour swatches) with product cards for consistent UX
Performance
Each card renders server-side on AJAX refresh. Heavy templates with large images benefit from:
- Sensible post count (12–24 per page)
- Appropriate featured image size (not always
full) - Caching for repeated filter combinations
What's next
- Archive Loop block — Full settings reference
- Grid, masonry, and pagination — Layout modes
- Common filter setups — Match filters to shop/blog templates