Our theme has advanced options for different type of Product Filters. You can filter products by categories, price, brands, tags, vendors and attributes.
Our theme provides very powerful extended Woocommerce filters. We added next options to regular Woocommerce widgets: possibility to add product swatches, possibility to make Attribute groups, sliding mobile panel for filters + better design + special Rehub:Better category widget for categories
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.
Check our videos how to configure attributes
When you added attributes, it’s time to add widgets. Go to Appearance – widgets and place next widgets in Woocommerce Shop sidebar Area
Please, note, you don’t need to worry about different filters per each product category. The theme will do the job for you. Just place ALL attributes in the widget area. The theme will show different filters for each category page according to attributes which you added to products of the current category.
Table of Contents
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. But you can also enable Sliding panel for mobiles. This will make your shop pages much more compact and user can open all filters after click on special “Filter” Button in top of page
Advanced Product Filters
Additionally to regular Woocommerce filters, we added bonus plugin XforWoocommerce (Advanced Product Filters). In current point, we recommend to use Woocommerce filters as they are faster and have better compatibility, but XforWoocommerce filter plugin has more options and design possibilities, so, you may want to use it in some cases.
If you want to use our advanced filters, go to Rehub – Plugins and download Advanced Product Filter Plugin, then install it. We will explain some tips and tricks for plugin.
Styles for Compatibility
Before you enable plugin, add some styles for better compatibility in Theme options – General – custom css
/***Woo filter product***/
.prdctfltr_wc{margin-bottom: 0 !important}
.prdctfltr_collector_border > span {padding: 3px 9px;border-radius: 4px;border: 1px solid #e3e3e3;box-shadow: 0 1px 0 #eee; background: #fff}
.prdctfltr_showing{font-size: 90%; font-weight: normal; white-space: nowrap;}
.prdctfltr-bars:before {content: "\f1de"; font-size: 19px;}
.prdctfltr_title_selected{font-size: 14px;}
.prdctfltr_wc.prdctfltr_bold .prdctfltr_filter label.prdctfltr_active > span{font-weight: 700; }
.prdctfltr_wc.prdctfltr_round .prdctfltr_filter label.prdctfltr_active > span:before{content: "\e907"; color: #85c858; border:none; vertical-align: top;width: 12px; height: 12px; margin: 0 12px 0 0;}
.prdctfltr_woocommerce_ordering .prdctfltr_sale span:before {content: '\f646'; font-size: 16px; color: #999;}
.prdctfltr_woocommerce_ordering span.prdctfltr_instock span:before {content: '\f290';font-size: 16px; color: #999;}
.prdctfltr_wc .prdctfltr_buttons{margin-bottom: 10px}
.prdctfltr_wc.pf_sidebar .prdctfltr_woocommerce_filter_submit{display: block;}
.prdctfltr_wc .prdctfltr_filter_title .prdctfltr_woocommerce_filter{margin-bottom: 12px}
.prdctfltr_customize_round{padding: 0 3px}
.woofiltersbig .pf_select .prdctfltr_filter .prdctfltr_regular_title{padding: 16px; padding-right: 32px;font-size: 17px; font-weight: normal;}
.woofiltersbig .prdctfltr_wc.prdctfltr_woocommerce.pf_select i.prdctfltr-down, .woofiltersbig .prdctfltr_wc.prdctfltr_woocommerce.pf_select i.prdctfltr-up{top: 16px}
.woofiltersbig .prdctfltr_woocommerce.prdctfltr_wc form.prdctfltr_woocommerce_ordering{display: -webkit-flex;-webkit-flex-wrap: wrap;display: -ms-flexbox;-ms-flex-wrap: wrap;display: flex;flex-wrap: wrap;flex-direction: row;}
.woofiltersbig .prdctfltr_filter_wrapper {flex-grow: 1;}
.woofiltersbig .prdctfltr_wc .prdctfltr_buttons{margin: 0}
.woofiltersbig .woocommerce .prdctfltr_buttons a.prdctfltr_woocommerce_filter_submit{padding: 22px; font-size: 18px; border-radius: 0 !important; box-shadow: none !important;margin: 0; }
.woofiltersbig .woocommerce .prdctfltr_buttons a.prdctfltr_woocommerce_filter_submit:hover{box-shadow: none !important}
.prdctfltr-widget .prdctfltr_wc.pf_default_select .prdctfltr_woocommerce_ordering .prdctfltr_filter, .woofiltersbig .pf_select .prdctfltr_filter_wrapper{margin-bottom: 0}
.prdctfltr_woocommerce .prdctfltr_filter .prdctfltr_search_terms{padding-bottom: 8px; border-bottom: 1px solid #eee}
.prdctfltr_customize_round .prdctfltr_customize_count{background-color: rgba(0, 0, 0, 0.35); border-radius: 50%; font-size: 11px}
@media screen and (max-width: 767px){
.prdctfltr_wc.prdctfltr_wc_regular.prdctfltr_woocommerce .prdctfltr_woocommerce_filter_submit{margin-bottom: 12px !important;display: block;}
}
@media only screen and (max-width: 567px) {
.woofiltersbig .prdctfltr_woocommerce.prdctfltr_wc form.prdctfltr_woocommerce_ordering{display: block !important;}
}Settings of 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.
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
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.
- Create filters like we explained in previous steps. You can use 3-4 filters which is better number of columns.
- 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
- 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.