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

Better Product Filtering

We support several ways to add product filters for shop.

Default Woocommerce widgets

This is most light and most simple

You can add Next widgets

Themify Product Filters plugin

Product Filters

It works very well, support ajax loading, simple to customize and have really clean design. You can choose different designs for each filter, like dropbox, radiobutton, checkbox, icons.

MDTF plugin

You can download this plugin from Rehub – Plugins. It’s very powerful plugin with some additional features, like subscribing for search results. This plugin is made for posts, so, not always it’s working good for woocommerce products, but you can try.

Install plugin, go to MDTF settings and enable plugin for products. Create New filter section. Add symbol “~” before title of section if you don’t want to show it on site. Create Filter “price”, set it as range slider type and enable this option

In last field, set reflect key and add value as _price

Add another filter item, set name as “~Taxonomy” and set type of field as taxonomy.

Save your filter section and assign it to MDTF category (check right side).

Go to MDTF categories and see ID of your new category (you may need if if you already have many products on site).

Now, add MDTF widget in appearance – widgets – Woocommerce shop sidebar.

Choose your MDTF category, choose slug as “product” then add next settings

Save widget. After saving, you will see that plugin also added all your attributes to Taxonomy settings and now you can configure them

Click on options and choose how to show each filter. Other settings can be as default, but also, I recommend you to enable option Hide items where count of items is 0: In such way, filters on category pages will show only filters for current category

There is also design layout for filter – Multiple checkbox select. By default it has black color, but you can change it to more modern with next code

.mdf_select_emulator_container .dropdown dd ul {
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 25px #ededed !important;
    color: #111 !important;
    width: 100% !important;
}
.mdf_select_emulator_container .dropdown dt a{width:100% !important}

you can place this in theme options – general options – custom css

Now, when you create new product, you will see additional panel where you can choose filter category. When you save product, plugin will convert all values to filters. If you have already many products before setting filter widget, you can make quick assign. For this, check ID of category which you want to assign in MDTF categories. Then, go to MDTF settings page and found next

Choose here product post type and add your category ID. Click on assign button

When you use autoblog of Content Egg or frontend forms and you want to automatically assign MDTF category to product, use next thing

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

 

Was this article helpful to you? Yes 1 No

How can we help?