You probably have a WooCommerce retailer, it’s worthwhile to make it straightforward to your buyers to search out the merchandise that they’re concerned with out of your many choices. The most effective methods to do this is with product filters. For instance, letting individuals filter by worth, shade, class, and many others.

Metorik Woocommerce Reports

You’ll see this method on nearly each eCommerce retailer. Nevertheless, whereas WooCommerce does provide you with a few fundamental filter widgets, the native WooCommerce plugin is basically lacking any kind of superior product filtering system.

The freemium WooCommerce Product Filter plugin modifications that. It provides you a wide range of filters that your buyers can use, together with an Ajax possibility that lets them filter merchandise with out reloading the web page. These embody search packing containers, vary filters (e.g. costs), checkboxes (e.g. classes), buttons, attribute selectors, drop-downs, toggles, customized taxonomy filtering, and extra.

In our hands-on WooCommerce Product Filter assessment, we’ll take you thru all the pieces that this plugin has to supply.

WooCommerce Product Filter Evaluation: Key Options

Filters in sidebar

In a nutshell, WooCommerce Product Filter provides your buyers choices to filter merchandise by totally different standards like worth, classes, tags, attributes (e.g. measurement or shade), assessment score, sale standing, and extra. It additionally lets them search by key phrase with an Ajax stay search characteristic.

You possibly can add your filters:

  • In your sidebar utilizing devoted widgets.
  • In an Elementor design with a devoted Elementor integration.
  • Anyplace else in your website utilizing a shortcode.
  • Straight in your theme’s template recordsdata utilizing a PHP perform.

You get a ton of various filter choices:

  • Worth – a min/max slider
  • Worth vary – choose from pre-determined worth ranges (that you would be able to customise)
  • Classes
  • Tags
  • Product attributes – enter choices for shade, slider, and extra
  • Product writer – good for multi-vendor shops
  • Featured merchandise
  • On-sale merchandise
  • Inventory standing
  • Product score
  • Key phrase – a search field to go looking by textual content
  • Customized taxonomy and customized fields, together with ACF compatability

Moreover, every filter possibility consists of a number of enter sorts. For instance, should you use pre-set worth ranges, you may let individuals select their vary utilizing checkboxes or a drop-down checklist. Some choices even have much more than that. For instance, relying on the filter, you should utilize:

  • Radio buttons (single choose)
  • Drop-down (single choose)
  • A number of drop-down
  • Checkbox checklist (multi-select)
  • Buttons
  • Textual content
  • Slider
  • Coloration
  • Toggle

You’ll additionally simply usually get numerous choices for controlling the perform and elegance of your filters.

Lastly, you may create limitless units of filters and show totally different filters in several conditions.

For instance, you may show one set of filters to cellular guests and one other to desktop guests. Or, you may show one set of filters for merchandise in a single class and a unique set for merchandise in one other class (the identical for tags).

This allows you to ensure that your filters are at all times optimized for the particular customer/merchandise in query.

Let’s go hands-on and I’ll present you the way it works…

Fingers-On With WooCommerce Product Filter

For reference, I’m utilizing the premium model of WooCommerce Product Filter for this part. Nevertheless, the fundamental interface is identical within the free model.

As soon as you put in and activate the plugin, your first step is to create your first “filter”. A filter is a gaggle of choices that you just need to let buyers filter by. It may very well be one factor, like a worth vary, or it may very well be a number of issues.

As I discussed above, you may create a number of filter teams and show totally different filter teams in several conditions.

Creating Your First Filter

To get began, you go to Woo Product Filter → Add New Filter.

When you’ve given it a reputation, you’ll get three tabs of settings to manage the way it works.

First, you’ll use the drop-down to decide on what kind of filter(s) so as to add. For the primary one, I’ll select the value vary possibility. You might additionally select simply “Worth” to offer individuals a worth slider.

Different filter options

If you need, you may add a number of filters. As you do, you’ll see them routinely replace on a stay preview of the completed filters:

Live preview of filters

To configure a person filter, you may increase its choices within the checklist. For instance, should you increase the value vary filter, you’ll get numerous choices to manage its options and show.

For instance, should you change it from a checkbox checklist to a drop-down, you may see that the stay preview updates:

Customziing the price range filter

Totally different filters offers you totally different settings. For instance, should you add the search by textual content field, you’ll have the ability to select what content material to go looking. You possibly can embody/exclude content material, excerpts, classes, attributes, SKU, and many others.

Search by keyword filte

Normally, every filter possibility provides you lots of management for choosing the enter. You possibly can select from totally different inputs like checkboxes, radio buttons, drop-downs, and many others. as wanted. You even get some distinctive ones. For instance, for the score filter, you may embody star rankings on a single line (guests click on what number of stars they need) or on a number of traces.

When you’re completed, you must have a listing of filters that appears one thing like under. If you wish to change the order of any filter choices, you may simply drag and drop them to a brand new place:

The review star filter

Exploring Customized Taxonomy Filtering

One of many extra distinctive options is the flexibility to arrange customized filters primarily based on customized taxonomies or customized fields. You’ll get built-in integrations for well-liked customized content material instruments like Superior Customized Fields (ACF) and Customized Submit Sort UI (CPT UI). It’ll additionally work with different customized taxonomies – even these you’ve created manually with code.

For instance, should you’re promoting music, you may add a customized taxonomy for “Style”. Then, you may simply arrange that customized taxonomy as a filter utilizing any of varied enter choices. Right here’s what it’d appear to be with toggles:

Configuring the Choices Settings

Subsequent, you may go to the Choices tab to configure some settings for your entire filters.

Some of the vital selections is whether or not or to not allow Ajax. When enabled, buyers can use the filters with no need to reload the web page, which is a extremely user-friendly expertise.

One other vital alternative is the place to show this group of filters and who ought to see them. You possibly can allow/disable your filters on totally different WooCommerce content material or to totally different units (cellular vs desktop).

That is helpful as a result of it enables you to create optimized experiences by displaying totally different filters in several conditions. It additionally helps you create a extra user-friendly expertise for cellular guests. For instance, you may use a checkbox for desktop guests however a extra mobile-friendly enter for cellular guests.

Options tab

Within the different choices tabs, you can also make some further selections:

  • Buttons – configure all the pieces concerning the filter buttons.
  • Content material – management the product content material space. For instance, you may add a “Present extra” button or recount merchandise after a client applies a filter. The plugin additionally provides you a shortcode to show your merchandise, which is helpful if you wish to create a devoted filter web page.
  • Loader – customise/disable the loader icon that seems whereas making use of filters when utilizing Ajax.

Configuring the Design Settings

Lastly, you may go to the Design tab to configure kinds to your filters. Some vital choices listed below are:

  • Utilizing the plugin’s built-in kinds or your theme’s kinds.
  • Configuring the width and peak.
  • Including customized CSS or JavaScript.

The opposite tabs — blocks, titles, and buttons — are all non-compulsory. If you need, you may allow customized kinds for these areas to have the ability to override all of the fashion settings with your individual selections.

Right here’s what it seems like should you allow the customized kinds:

Displaying Your Filters

At this level, you’re just about completed – all that’s left to do is show your filters to your buyers.

Once more, WooCommerce Product Filter provides you many choices to do this:

  • Native WordPress widget
  • Elementor widget
  • Shortcode
  • PHP perform

For instance, should you add the devoted Woo Product Filter widget, you may then select which filter to show utilizing the drop-down:

Dedicated widget

After which listed below are the filters within the retailer’s sidebar – I configured them to inherit my theme’s styling:

Filters in sidebar

The shortcode and PHP strategies are additionally pretty self-explanatory. However let’s take a deeper have a look at the Elementor integration, as I do know lots of you is likely to be utilizing Elementor WooCommerce Builder to design your retailer.

Right here, I’m making a Product Archive template utilizing Elementor WooCommerce Builder. First, I created a two-column design the place I included the Archive Merchandise widget within the left column to show all of my merchandise. Then, I can add the brand new Woofilters widget to the suitable column to show the filters.

You too can create and customise your filters with out leaving the Elementor interface, which is a pleasant bonus:

WooCommerce Product Filter Elementor widget

Within the Elementor Model tab, you too can entry the entire Choices from the common WooCommerce Product Filter interface. The Elementor Superior tab then provides you the entire choices from the Design tab (together with all of Elementor’s common choices).

Total, should you’re utilizing Elementor, this widget is absolutely handy for together with your product filters in your designs.

WooCommerce Product Filter Pricing

WooCommerce Product Filter is available in each a free model at WordPress.org in addition to a premium model that provides extra options.

The free model consists of many of the core options, whereas the premium model provides you extra choices for filtering merchandise with options such because the search field and checkbox lists (multiselect) and icons to filter product attributes.

If you wish to go Professional, there are three plans. The plans have an identical options – the one distinction is what number of websites you should utilize the plugin on:

  • 1 website – $49
  • 5 websites – $99
  • Limitless websites – $199

Ultimate Ideas on WooCommerce Product Filter

Total, I discovered WooCommerce Product Filter to be an intuitive and versatile manner so as to add product filters to your WooCommerce retailer.

All of the filters labored once I examined them and the Ajax filters loaded merchandise rapidly (for reference, my retailer has about 15 merchandise).

The filters are additionally very versatile, with numerous settings to manage the inputs, performance, fashion, and extra.

Moreover, I like that you’ve got so many choices for displaying your filters, particularly the Elementor integration as this allows you to work straight from contained in the Elementor interface.

If you wish to try it out, you will get many of the options free of charge. Then, think about upgrading to get entry to the search field and different superior filters.

Get Professional Model Get Free Model

Leave a Reply