Super Product Filter for WooCommerce

描述

Super Product Filter for WooCommerce adds AJAX product filtering to any WooCommerce store. Shoppers narrow the catalog by category, tag, brand, attribute, price, rating, review count, stock and sale status, search by keyword and change the sort order, and the product list updates in place without a page reload.

Filters are built as presets in a full page builder, placed anywhere with a block, a shortcode or an Elementor widget, and styled to match your theme. The plugin finds your theme’s product list, result count and pagination on its own, and a Theme Compatibility Mode returns filtered products in your theme’s own markup when a theme or page builder draws its own product cards.

Test Dashboard

Explore a test dashboard to get a hands on experience with our features and functionalities. Visit Test Dashboard to access the test environment.

Feel free to experiment, and if you have any feedback or encounter issues, please let us know through our support tickets.

Real Time AJAX Filtering

Results refresh in place as filters change, with no page reload. Choose whether filters apply the moment a shopper clicks, or wait for an Apply button with the text you set. A loading animation covers the product list while the new results arrive, and the page can scroll back to the results once they land.

Full Page Filter Builder

Each filter preset is edited in a purpose built builder rather than the WordPress post editor. Switch each filter on or off, drag them into the order you want, configure every option in one place and save without leaving the page. Typography settings show a live sample line that takes on the font, size and spacing as you change them. Shops with many attributes save reliably, because the settings travel as a single field that is not subject to the PHP input variable limit.

Category, Tag and Brand Filters

Let shoppers refine by product category, product tag and WooCommerce brand. Categories can be shown as an indented tree, and every list can be ordered by name, product count, ID or numeric name, ascending or descending.

Attribute Filters

Any WooCommerce attribute becomes a filter: size, material, color and so on. Each attribute has its own title, display type, order, AND/OR logic and orientation, and can show or hide the term name and the product count.

Eight Display Types

Each category, tag, brand or attribute filter can be shown as any of the following, laid out vertically or horizontally:

• Checkbox
• Radio
• Dropdown
• Multi Select
• Button
• Toggle
• Color Swatch
• Image Swatch

Color and image swatches are set per term from the builder, so a color attribute shows real swatches and a pattern or brand attribute can show pictures. Dropdown and multi select fields take a placeholder text of your own.

Price Range Slider

A two handle slider lets shoppers set a minimum and a maximum price, and the product list updates to match.

Rating and Review Filters

The rating filter shows rows of stars, so shoppers can ask for products rated a given number of stars and above. The review filter narrows results to products with at least the number of reviews a shopper types in.

Stock and Sale Filters

One tick shows only products that are in stock. Another shows only products currently on sale, so shoppers can go straight to the deals.

Product Search

A keyword search box sits alongside the other filters and applies without a page reload, so a shopper can type a term and keep refining by category, price or attribute from the same panel.

Sorting

Give shoppers control over result order without leaving the filter panel. Sort by price low to high or high to low, latest or oldest, title A to Z or Z to A, or at random, and choose which of these options to offer.

Active Filters with Clear All

Everything a shopper has selected is listed as removable chips above the filters. Clicking a chip removes that one selection, and a Clear All button returns the product list to its default view in one click.

Product Count Beside Each Term

Show how many products match each term. Counts take account of the price, rating, review, stock and sale filters already applied, so the number beside a term matches what selecting it returns.

AND / OR Logic

Set the logic for the preset as a whole and for each filter on its own. With AND, a product must match every selected term. With OR, matching any one of them is enough.

Include and Exclude Terms

Show every term, or pick exactly which terms a filter offers. Include only the ones that matter for a range, or exclude the ones that do not apply, so shoppers only see relevant options. A preset can also be limited to one or more categories, so a filter placed on a page only ever returns products from that part of the catalog.

Off-Canvas Filter Panel

Slide the filters in from the left or the right of the screen instead of showing them inline. The panel comes with a floating trigger button whose icon, shape, size, colors and position are yours to set, with sixteen ready made icon styles and an icon library to pick from. Any link or button on the page can open the panel through the trigger class, and a breakpoint setting switches inline filters to the panel on smaller screens.

Collapsible Filters

Let shoppers fold each filter box open or closed from its heading, and cap the height of long lists so they scroll instead of pushing the page down.

Design and Typography

Set the primary color, the filter box and heading colors, the spacing between filters and between items, and the heading and content typography with any Google Font. Fonts can be served from your own site instead of Google’s servers to meet GDPR requirements.

Display Anywhere

Drop the Super Product Filter block into any page, post or block based widget area such as a sidebar, header or footer, add the Elementor widget, or paste the shortcode wherever you want the filters to appear. The shortcode works in any page builder that renders shortcodes, including WPBakery, Beaver Builder, Divi and Bricks.

Works With Any Theme

The product list, result count and pagination are detected automatically, so the plugin works out of the box with standard WooCommerce markup, and three selector fields are there for the rare theme that cannot be detected. When a theme or page builder draws its own product cards, switch on Theme Compatibility Mode and the filtered page is requested from your site, so products come back in exactly the markup your theme already uses.

SEO Friendly Filtering

Filtered views rearrange products that already have their own category and product pages. Left alone, every combination of filters becomes another near duplicate page for search engines to crawl and index, which wastes the crawl budget your real pages need. Turn on one setting and filtered views are served as “noindex, follow”, keeping them out of search results while links on the page are still followed.

Template Overrides and Developer Hooks

Copy any filter template into a super-product-filter folder in your theme to change its markup without editing the plugin, the same way WooCommerce templates are overridden. Actions run before and after the filter fields and around each field, and filters let you change the template folder, register extra query parameters or load an icon font for markup your theme renders itself.

Import and Export Filter Presets

Export a configured preset to a file and import it on another site, or restore it later, so a filter set up once can be reused across environments without configuring it again.

Lightweight and Fast

Only the assets a preset actually uses are loaded. Icon fonts are enqueued only when a preset needs them, and the plugin’s own tick, close and spinner icons are drawn inline, so a page can load no icon font at all. AJAX responses carry only what the page needs, and the stylesheet carries only the styles the free version can use.

Clean Uninstall

An option under Settings removes every filter and setting when the plugin is deleted. It is off by default, so deactivating or reinstalling never loses your filters.

Mobile Responsive

Filters adapt to phones and tablets, and can switch to the off-canvas panel below a screen width you choose, so the product list keeps the space it needs on small screens.

Cross Browser Compatibility

Works consistently in all current browsers, including Chrome, Firefox, Safari and Edge.

Multilingual and RTL Support

Filter titles are registered with WPML String Translation and Polylang, so they can be translated for each language. Right to left languages such as Arabic and Hebrew are supported.

WooCommerce HPOS Compatible

The plugin declares compatibility with WooCommerce High Performance Order Storage, so the WooCommerce status screen never lists it as incompatible.

Support and Documentation

Step by step documentation covers every setting, and help is available through the WordPress.org support forum. Pro customers get direct support from us, and pro updates arrive in the WordPress dashboard once the license key is activated.

ACF and Custom Meta Field Filters – PRO

Turn Advanced Custom Fields values into filters, or define your own meta keys and the options shoppers pick from, so products can be filtered by any data you store on them.

Step By Step Filtering – PRO

Reveal the next filter only once the one before it is answered, such as a category first, then its attributes, then a price range. Presenting filters in a logical order keeps each choice relevant to the last and reduces overwhelm.

Conditional Display of Filters by Product Category, Tag or Brand – PRO

Show or hide specific filters depending on the product category, tag or brand being viewed, so screen size appears for laptops and not for wine. Only relevant filters are displayed, which streamlines the browsing experience and reduces clutter.

Hide Empty Terms and Search Inside a Filter – PRO

Drop terms that would return no products, so shoppers never pick an option that leads to an empty page, and add a search box inside long filters that narrows the list of terms as you type.

Per Filter Descriptions, Icons and Labels – PRO

Add a description and an icon to each filter title, write your own label for the in stock and on sale ticks, show the price filter as a pair of inputs instead of a slider, and lay the terms inside a filter out in up to three columns.

Dynamic Price Range and Variation Images – PRO

The price slider can follow the results, moving its ends to the cheapest and dearest products currently shown. When an attribute filter is applied, a variable product shows the image of the matching variation in the product list instead of its main image.

Readable Filter URLs and Redirect to Another Page – PRO

Filtered addresses become paths such as /shop/filter/categories-laptop/ instead of a query string, on the shop page, category and tag archives and any page holding a filter shortcode. A filter can also be placed on any page and send the shopper to your shop with the results applied.

AJAX Pagination, Load More and Infinite Scroll – PRO

Load each page of results over AJAX instead of reloading, or replace paged links with a Load More button carrying your own text, or with infinite scroll. Pagination can also be kept on archive pages once filters are applied.

Attach to the Shop Archive with Visibility Rules – PRO

Place the filter in the header of the shop and category pages without editing a template, then decide where it shows: on every archive, only on the shop page or on chosen categories, tags and brands, or hidden on the ones you name. Filters can be laid out across up to eight columns, and the selected filter chips can sit before the filters, after them or above the products, grouped by attribute.

Filter Styles and Full Design Control – PRO

Eleven checkbox and radio styles, ten each for price sliders, buttons and toggles, six each for dropdowns, multi selects, color swatches and image swatches, chip styles for multi select, and a styled dropdown in place of the browser one. Border, background, icon and active colors and sizing for every control with a live preview of each setting, star colors for the rating filter, styling for the apply button, input fields and active filter chips, and full filter box styling with background, border, radius, shadow and padding. The off-canvas trigger button can be a font icon, an uploaded image or a hamburger icon with attention animations such as pulse, bounce and swing, the panel gets show and hide animations and a separate width for small screens, and sixteen loading animations or your own image replace the three in the free version.

Custom CSS and JavaScript – PRO

Each preset has a CSS box of its own, plus JavaScript that runs before and after every filter request, for tweaks that need no theme edit.

Shop Builder with Quick View, Wishlist and Compare – PRO

Build the product card itself: image, badge, category, title, price, rating and buttons, in a full page builder with a device switcher for desktop, tablet and mobile. Start from one of forty ready made templates and edit it, pick a grid such as uniform, featured first, repeating highlight, staggered or masonry, and set the image aspect ratio and hover effect, including a fade or slide to the second gallery image. Add quick view popups, wishlist and compare buttons through YITH or WCBoost, choose the products, order and page size the card list shows, and assign a template to the WooCommerce shop and category pages.

Get Started Today!

Ready to transform your WooCommerce store? Install Super Product Filter now and empower your customers with a superior shopping experience.

Premium Upgrade

For premium upgrade, please click below link
Super WooCommerce Product Filter | Premium Demos