Skip to the content
Peregrine KnowledgebasePeregrine Knowledgebase
  • Go to website
  • Go to website
  • Yelp
  • Facebook
  • Twitter
  • Instagram
  • Email

How can we help you?

Hester Pro

21
  • Theme Installation
  • Steps after Activating Hester Pro theme
  • Add widgets in sidebar or in Footer widget area
  • Enable front page sections
  • Home Sections
    • Slider Section
    • Info section
    • Service section
    • About section
    • Team section
    • Testimonial section
    • Pricing plan section
    • Call to Action section
    • Gallery section
    • Fun-facts section
    • Feature section
    • Steps to start section
    • Work history / timeline section
    • Workflow section
    • Clients section
    • Extra section
    • Design options

Bloglo Pro & BlogHash Pro common

2
  • Add social media profile links in header
  • Post Formats

ShopWell Pro

58
  • Download & Install ShopWell Addons Plugin
  • How to Install and Activate Required and Recommended Plugins
  • Import Demo
  • Configure Product Images in WooCommerce
  • πŸ”¨ Product Archive Builder
  • πŸ› οΈ Single Product Builder
  • How to change homepage products in the ShopWell free theme?
  • Customizer
    • General
    • Styling
    • Typography
    • Topbar
    • Header
      • Topbar
      • Campaign Bar
      • Header Layout
      • Header specific pages
      • Overriding the Header on Specific Pages
      • Header Builder
      • Sticky Header
      • Header Background
      • Header Elements
        • πŸ” Configuring the Header Search in ShopWell Theme
        • πŸ‘€ Account
        • ❀️ Wishlist
        • πŸ”„ Compare
        • πŸ›’ Cart
        • πŸ“ Custom Text
        • Preferences πŸŒπŸ’±
        • View History
        • πŸ“Œ Primary Menu
        • πŸ“Œ Secondary Menu
        • πŸ—‚οΈ Category Menu
        • πŸ” Hamburger Menu
      • Mega Menu
        • Mega Menu Vertical
        • πŸ” Mega Menu Hamburger
        • 🧩 Configure Mega Menu
        • Mega Menu Horizontal
    • Footer
      • Footer
      • Overriding the Footer on specific pages
  • Elementor
    • βš™οΈ Elementor Basic Configuration Guide
    • Templates
    • πŸ“’ Popup Builder
    • ShopWell Builder
    • Widgets
      • πŸ›οΈ Product Deals Grid / Carousel
  • Pages
    • πŸ“„ Creating a Page
    • βš™οΈ Display Settings
  • Woocommerce
    • πŸ›’ Getting Started with WooCommerce
    • πŸ“„ WooCommerce Pages
    • πŸ›’ Customize the Checkout Page
    • πŸ“¦ Create an Order Tracking Page
    • πŸ‘€ My Account Page Setup in WooCommerce
    • πŸ›οΈ Catalog Mode
  • Shop
    • WishList & Compare
    • πŸ’± Currency Settings
    • πŸ›οΈ Shop Display
    • 🧩 Product Filters
  • Mobile
    • Topbar
    • Header
    • Footer
    • Miscellaneous
  • Home
  • Docs
  • 🧩 Product Filters
View Categories

🧩 Product Filters

1 min read

The ShopWell Addons includes a powerful and flexible filtering system built into a single widget:

ShopWell – Product Filter #

This widget allows you to add a variety of product filters to your sidebar or widget areas with a single block, keeping things organized and highly customizable.

Shopwell – Product Filter widget works only with product catalog pages.


πŸ”„ Dynamic Filter Behavior #

You can change the type of filter displayed using the Filter By dropdown. Depending on your selection, additional configuration options become visible.

Available Filter Types: #

  • Group
  • Price
  • Attributes (Color, Size, etc.)
  • Rating
  • Product Status
  • Brands
  • Product Categories
  • Product Tags

πŸ§™β€β™‚οΈ How to Use the Widget #

Add the Widget: #

  1. Go to Appearance β†’ Widgets
  2. Drag and drop ShopWell – Product Filter into Catalog Sidebar widget area.
  3. Use the Filter By dropdown to select your desired filter type.
  4. Customize additional settings that appear below based on the selected filter.

πŸ§ͺ Available Filter Types & Settings #

πŸ”˜ Filter by Group #

Display pre-defined filter groups.

  • Useful for grouping multiple filter types together under one name.
  • Configure in the filter widget panel.

πŸ’² Filter by Price #

Display a price range using a slider or checkbox.

  • Settings:
    • Filter By: Price
    • Display type:
      • Slider
      • Ranges
    • Ranges: Enter each range ( separated by dash ‘-‘ ) in separate line. Do not include currency symbol. E.g.
      • 0 – 50
      • 50 – 100
      • 100 – 200
      • 200 – 500
      • 500 – 1000

πŸ”’ Filter by Rating #

Let users filter by WooCommerce product ratings.

  • Ratings Displayed:
    • 5 Stars, 4 Stars, etc.
  • Choose to show counts or just stars.

πŸ“¦ Filter by Product Status #

Enable filtering by special conditions like:

  • On Sale
  • Featured
  • In Stock / Out of Stock

Use checkboxes to enable or disable each option.


🏷️ Filter by Product Tags #

Users can filter by product tags you’ve assigned.

  • Choose the tags to include
  • Set order and display format

🧒 Filter by Brands #

Filter products by brand taxonomy (must be defined and assigned).


πŸ—‚οΈ Filter by Categories #

Display a list of product categories.


🎨 Filter by Attributes (e.g. Color) #

Great for filters like Color, Material, etc.

Options

  • Filter By : Select Attributes
  • Attribute: Select Color
  • Display Type: Select Auto

Setup Color Attribute: #

  1. Install and Activate WCBoost – Variation Swatches plugin.
  2. Go to Products β†’ Attributes
  3. Create attribute (e.g. β€œColor”)
  4. Set type to Color
  5. Configure terms (e.g. Red, Blue, etc.) and assign color hex codes

πŸ“ Filter by Size #

Similar to color, this attribute filter displays product sizes.

Setup Size Attribute: #

  1. Go to Products β†’ Attributes
  2. Add a new attribute β€œSize”
  3. Set type to Label
  4. Define terms like S, M, L, XL, etc.

βš™οΈ Tips for Best Use #

  • Use multiple instances of the widget to display different filters together.
  • Combine Group Filter to organize others visually.
  • Assign attributes, brands, and tags to products properly to ensure filtering works.

The ShopWell – Product Filter widget makes your store easier to navigate and improves customer experience by enabling layered, AJAX-based filtering for WooCommerce.

Table of Contents
  • ShopWell – Product Filter
  • πŸ”„ Dynamic Filter Behavior
    • Available Filter Types:
  • πŸ§™β€β™‚οΈ How to Use the Widget
    • Add the Widget:
  • πŸ§ͺ Available Filter Types & Settings
    • πŸ”˜ Filter by Group
  • πŸ’² Filter by Price
  • πŸ”’ Filter by Rating
  • πŸ“¦ Filter by Product Status
  • 🏷️ Filter by Product Tags
  • 🧒 Filter by Brands
  • πŸ—‚οΈ Filter by Categories
  • 🎨 Filter by Attributes (e.g. Color)
    • Setup Color Attribute:
  • πŸ“ Filter by Size
    • Setup Size Attribute:
  • βš™οΈ Tips for Best Use

© 2025 Peregrine Knowledgebase

Powered by WordPress

To the top ↑ Up ↑