Porto provides flexible filter layout options that control how product filters appear on WooCommerce product archive pages such as Shop, Category, and Tag pages. These filter layouts work together with the Product Archive Builder, the Filter Toggle widget, and the theme’s sidebar settings to deliver a fully customizable shopping experience.
This documentation explains all filter layout types, how they behave, and how mobile sidebar behavior influences filter display.
Where to Configure Filter Layouts
You can manage the main filter layout in Porto → Theme Options → WooCommerce → Product Archives Page. From here, using Filter Layout option, you can choose one of the four filter layout types described below.
Additionally, mobile sidebar behavior is configured under Porto → Theme Options → Sidebar → “Show as Off-Canvas Sidebar on mobile”
Filter Layout Types
Porto includes four filter layout types, each suited for different shop structures and design preferences.
1. Default Filter Layout
This layout uses WooCommerce’s traditional sidebar.
Behavior
- Filters appear only when the Shop Sidebar is active.
- Widgets must be added in Appearance → Widgets → Shop Sidebar
- Filters remain fully visible on desktop.
Mobile Behavior
- Controlled by the “Show as Off-Canvas Sidebar on mobile” setting.
- If enabled → Filters open inside an off-canvas drawer.
- If disabled → Sidebar shifts below product grid in a stacked layout.
Best For
- Classic WooCommerce shop layouts
- Sites needing persistent filter visibility
2. Sidebar With Toggle Layout
This layout enhances the default sidebar by allowing users to expand or collapse it.
Behavior
- Requires adding the Filter Toggle widget inside your Product Archive Builder.
- Widgets still come from the Shop Sidebar widget area.
- Filters slide open or closed when the toggle is clicked.
Best For
- Cleaner layouts where filters should be hidden by default
- Users who prefer slide-in filter interactions
3. Horizontal Filters Layout
Shows filters in a horizontal bar above the product grid.
Behavior
- Does not require the Filter Toggle widget.
- Displays filters in a compact header-style row.
- Ideal for full-width product layouts without sidebars.
Mobile Behavior
- Mobile behavior does not use the sidebar setting since no sidebar is displayed.
- Filters stack or collapse based on responsive controls.
Best For
- Minimal designs
- Modern storefronts prioritizing product visibility
4. Off-Canvas Filters Layout
Moves all filters into a slide-in panel accessible through a toggle.
Behavior
- Requires the Filter Toggle widget in your archive layout.
- Filters open in an off-canvas drawer from left or right.
Mobile Behavior
- Works seamlessly on mobile without relying on the Theme Options sidebar setting.
-
Mobile toggle button will
- Use your Filter Toggle widget if added.
- Fall back to Porto’s default toggle which is located in top left corner if no filter toggle element exists.
Best For
- Mobile-first designs
- Shops using wide or full-width grid layouts
| Filter Layout | Needs Filter Toggle Widget? | Uses “Show as Off-Canvas Sidebar on mobile”? | Notes |
|---|---|---|---|
| Default | No | Yes | Filters appear in sidebar; mobile can be off-canvas |
| Sidebar With Toggle | Yes | Yes | Custom toggle overrides default mobile toggle |
| Horizontal Filters | No | No | No sidebar used |
| Off-Canvas | Yes | No | Built-in off-canvas system independent of sidebar setting |
