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

How to enable sidebar at left side on archive pages

You can enable Sidebar for left side (default is right side) in theme option – shop settings. This will make filters in sidebar to be first on mobile view

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.

From 7.0 version of plugin, it has another documentation link

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.

Filter on Click

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 flat

You can enable also Border style

Show selected terms in

This option is responsible where selected filter will be visible. Default is next

But you can show them in different way, for example

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, now, we can modify also general filter styles.

Always Visible

By default, all filters will be hidden and available only on click (Filter icon). You will see only next part on page load

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

Select design

Inline style for 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.

Row display

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

JS 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

Responsive

This option allows you to show another filter preset for Mobiles. This can be useful if you want to have different design and filters for desktop and mobiles

Custom field Filters

If woocommerce attributes are not enough for you and you have additional custom fields in product – you can filter them also by Meta field filter. See some examples in docs of plugin

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  Shop integration  and enable one of woocommerce hooks.

I recommend also to disable default woocommerce count and order

Ajax

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. Just Enable Ajax and automatic Ajax, theme is compatible with plugin’s Ajax so you don’t need to configure any special settings. You can also enable Infinite loading for shop

Sidebar filters

Also, instead of using filters for shop pages via hooks, 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 STYLE settings, choose Always Visible. Then in Hide Elements, disable Top bar, disable stock button, sale button, clear button. In Select Design choose to show Filters as Select boxes. Row display 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
  3. 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 “woofiltersbig”

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.