1. Home
  2. ReHub Theme
  3. Shop (woocommerce) options
  4. Better Product Filtering

Better Product Filtering

Our theme has advanced options for different type of Product Filters. You can filter products by categories, price, brands, tags, vendors and attributes. You can have ajaxed filtering, adoptive filters, good mobile presets, filters in popups and step filters.

Before you start filter configuration, you should add global attributes to your site. This is required if you want to add special filters, specifications for each category of your site.

If you don’t want to add filters and just need Category filters – you can use Rehub: Better Category widget.

If you don’t want to have advanced filtering and you have just several attributes on site – I think you can use Default Woocommerce widgets. You can place widgets in Appearance – widgets – Woocommerce Shop page Area

Advanced Product Filters

If you want to use our advanced filters, go to Rehub – Plugins and download Advanced Product Filter Plugin, then install it. Plugin has good documentation but we will explain some tips and tricks for plugin.

First of all, don’t worry about so much settings in plugin. 95% are made for very rare situations and you can leave them as default. After plugin installation, go to Woocommerce – Settings – Product Filter.

On first tab, you can create presets. Each preset can be used in different part of site. It means that you can create different filter forms with different design. Also, you must create and save default preset. Plugin will create first filter preset by default which will have Price, Sorting and categories. Then, you can add additional elements.

Styles of Filters

Once you click on filter, it will be activated. Then, you can add some changes, for example another titles, special conditions and styling.

In styling, you can change colors of labels, borders, label text and style of filters.

Each filter can have different type of presentation, which you can choose in select

 

By default, filter is visible as set of labels

Also, you can change Style of labels and show them as Backgrounded labels or as Rounded tags

This is example of 3 different types of Text design

Instead of TEXT style of filter, you can use also Color style, Thumbnails and Selectbox

Some filters have also advanced settings (Cog icon). Usually, you can change tooltip labels, order of each range, set ranges, etc. Once you create filters, you can save them as preset or as default filters.

General Filter settings

In previous step, we make styles of each item in filter, but also we have settings for general styles which show how filter will be presented on page

In general settings we have some useful options.

Always Visible

By default, all filters will be hidden and available only on click (Filter icon)

You can enable “Always Visible option” to make them always visible

Instant Filtering

By default, filters have special Filter Button. Users choose filters and only when he clicks on button he will see filtered results. Instant filtering will remove button and filtering will work after click on any filter item

Selected Terms Area

This option is responsible how to show selected filters. Default is next

 

You can also use Collector (will be similar but all selected filters will be posted on own line), In Filter titles (will be posted inside title of Filter), After Filter Title

My most favorite style is Collector + Border Terms Style

Stepped Filter Selection

It’s another cool feature of plugin. This option will enable such logic than each next set of filters will be visible only when user make choice for previous filter.

General Filter Styles

In previous step we made styles for each filter item, general filter styles are responsible how filters will appear on page.

Default is inline style, but you can also choose several styles.

Default inline style differs from default, because each filter will be visible as one line without line breaks

Popup style will show all filters as Popup

Select boxes is also great style

Also you can enable Sidebar Sliding style and Overlay style. All of them are very cool and modern.

Select mode

This option will set logic for multiple filters. This means that you can set, for example, 5 columns for each row of filters. Masonry style will try to adapt width, but can slow down site a bit

Use Custom Scroll Bars

Will add more modern and cool scroll bars to each filter. It’s great to use it with Limit height option

Select Checkbox Style

I recommend to set square or round

Adoptive Filtering

This type of settings will enable Adoptive Filters. What does it mean? Imagine, that you have categories Cameras and Mobiles. Each category has own set of attributes. Cameras have Image sensor, ISO, Zoom, etc. Mobiles have Memory, resolution, sensor type, etc. Some attributes are common, for example, Battery Life. And it will be wrong to show attributes from Phones on category page of Cameras. So, Adoptive filters will detect current page and will show filters only for products which belongs to current page. Of course, it’s better to enable this option. I recommend also to disable Ajax in Shop settings to prevent different problems with adoptive filters. More about Adoptive Filters

Important!!! Each filter also has option to enable Adoptive filtering. So, if you need it, you must enable Adoptive Filtering in general settings and also inside each filter which you want to use as adoptive filtering

Mobile Preset

This option allows you to show another filter preset for Mobiles.

How to assign Filters to Shop

After you created filters, it’s time to assign them to shop. This step is really easy. Go to  Installation and Advanced Options  and make sure that you have enabled “Override default woocommerce templates”. If you want, you can also Enable Ajax on this page, but I recommend to do this only if you don’t need adoptive filters. Leave blank all fields in ajax because theme has everything for ajax filters (ajax filter means that they will work without page reload). You can also enable Infinite loading for shop

Also, instead of using automatic filters for shop pages, you can enable Widgets. In this case, your filters can be added as widget in Appearance – Widgets – Woocommerce Shop sidebar. This has one negative side. Widgets on shop pages are visible after content on mobiles, so, your users will not see filter options in first screen, so, usually they miss them.

If you need filters for specific pages, you can use Woocommerce Advanced Filter module from page builder

Specific Filters from Theme

Rehub theme stores some specific fields to post which you can also choose for filtering.

You can see key names in article

So, you can use them via Meta field filter

For example, you want to show Most popular products by views. Add key “rehub_views” and set next parameters

 

Now, in settings, add next

This filter will show all products which have total post views more than 200. If you want to set several ranges, use COMPARE as BETWEEN and add several values. To add range, you must use “-“, like “0-200”

In style options you can enable to show filters as Text style and Background type, so, they will look similar to tabs.

How to create cool Select boxes for Homepage with filters

If you want to have similar select boxes which we added for Recompare Home page, your steps must be next.

  1. Create filters like we explained in previous steps. You can use 3-4 filters which is better number of columns.
  2. In general settings, choose Always Visible, disable Top bar, disable stock button, sale button, clear button
  3. In filter style section, choose to show Filters as Select boxes. Select mode as Multiple Rows and number of columns as 3 (must be the same as number of your filters). Enable Use Custom Scroll Bars. Filter Button position set as Bottom
  4. Save preset

If you use Page builder on Homepage, you can use Woocommerce Product filter module. In options of module choose your preset name and choose Show filters as yes and Show Products as No and Ajax as No. In Custom actions field set link to your shop page. Usually, it’s http://your_sitel_ink/shop. In class field set “woofitersbig”

If you don’t use Page builder, you can simply use shortcode

[prdctfltr_sc_products preset="selectbox" show_products="no" action="http://site.com/shop/" bot_margin="20" class="woofiltersbig"]

Compatibility with other plugins

There are many other good product filter plugins like WOOF, Advanced product Filters, etc. Sometimes you will have problem that after filtering, images will not be visible in products. You can add javascript hook for “after search” event

jQuery(document).ready(function($) {
$('.products').find('img.lazyimages').each(function(){
       var source = $(this).attr("data-src");
       $(this).attr("src", source).css({'opacity': '1'});
});
});

Ask plugin’s author where to add this. P.s. you don’t need to do this for WOOF plugin and Advanced Product Filters, because we already added support for them in theme