Skip to main content

List view and grid switch

PRO Only

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​

  1. Select the Archive Loop block.

  2. Open Display or Layout settings (Pro).

  3. Enable List / grid switcher (or Display type switch).

  4. 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
  5. 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​