List view and grid switch
Requires WPEnhanced Ajax Filter Blocks Pro.
Overview
List view and grid switch (Pro) adds a layout toggle so visitors choose between grid and list presentations of the same filtered Archive Loop results—without a page reload.
Useful for:
- WooCommerce shops where some customers prefer dense grids vs detailed rows
- Directories with compact vs expanded listing cards
- Resource libraries with thumbnail grid and text-heavy list
Enable layout switching
-
Select the Archive Loop block.
-
Open Display or Layout settings (Pro).
-
Enable List / grid switcher (or Display type switch).
-
Configure:
- Default view — Grid or list on first load
- Switcher position — Above loop, inline with result count, etc.
- Icons or labels — Grid/List button text
-
Customize grid and list templates if the block exposes separate template options.
Templates
Grid and list modes may use different loop templates:
- Grid — Multi-column cards, emphasis on image
- List — Single column, more meta per row (price, excerpt, attributes)
Configure both in Archive Loop Template settings so switching does not break layout.
With filters and pagination
Layout choice applies to the current filtered result set. Changing filters preserves the selected view where possible.
Works with standard pagination and with Load More / infinite scroll.
Styling
Switcher controls use plugin markup classes—style via block settings or theme CSS. Ensure active state is visible for accessibility.
What's next
- Loop templates and layouts — Base template setup
- Load More and infinite scroll — Alternative pagination
- Filter appearances and mobile — Mobile filter UX