You can add filtering options to your shop page using widgets.
Go to:
Appearance → Widgets
There are two available sidebar areas:
- Shop Sidebar – For standard left/right sidebar filters
- Filter Drawer Sidebar – For off-canvas (drawer) filter layout
Available Filter Widgets #
You can use the following widgets to build your filter system:
- Active Filters – Displays currently applied filters with remove option
Settings:- Title
- Price Filter – Advanced price range slider
Settings:- Title
- Default Values – Use WooCommerce Range or Custom Values
- Custom Min Price
- Custom Max Price
- Product Attributes – Filter by attributes (e.g. size, color)
Settings:- Title
- Attribute – Select attribute to display
- Show Color Swatches
- Show Product Count
- Allow Multiple Selection
- Layout – Block or Inline
- Product Categories – Filter by product categories
Settings:- Title
- Include Categories (IDs)
- Exclude Categories (IDs)
- Show Empty Categories
- Show Child Categories
- Show Product Count
- Allow Multiple Selection
- Display Mode – Flat List or Hierarchical
- Order By – Name, Slug, Count, ID
- Order – ASC, DESC
- Product Status – Filter by stock and sale status
Settings:- Title
- In Stock
- On Sale
- Show Product Count
Filter Drawer (Off-Canvas Filters) #
If you prefer a drawer-style filter panel, use the Filter Drawer Sidebar.
Then configure the drawer settings from:
Appearance → Customize → WooCommerce → Filter Drawer
- Title
- Copyright Text
To enable the filter drawer, go to:
Appearance → Customize → WooCommerce → Shop Page
- Filter Drawer – Enable or disable
- Filter Drawer Mobile Only – Show only on mobile if enabled
- Filter Drawer Text – Button label text
Once enabled, a filter button will appear in the shop toolbar (above the product list). Clicking this button will open the filter drawer.
Tip: Use the Filter Drawer for a cleaner layout, especially on mobile devices, while keeping the Shop Sidebar for desktop users.
