How to create a multi level product filter on WordPress

Be it an ecommerce portal or a blog for your business, a robust user interface makes your users visit again and again. A number of times I visit ecommerce portals not to make a purchase but only to choose a product. The simple reason, they have a list of products which can be filtered based on various criteria (e.g. price, brand, version etc). For example, have a look on the filtering option of Amazon.com.

image

WordPress is first love to make websites nowadays. Easy to use backend and availability of a wide range of plugins and themes have made it an obvious choice for professional portals as well. Adding these kind of navigation options certainly add a good value to your website.

If your requirement is limited to adding a filtered navigation on the basis of WordPress Categories and Tags only, this job is as easy as installing a plugin.

Add Category + Tag Filter on WordPress

1. Install and activate Cat + Tag Filter plugin from WordPress backend.

image

2. Visit Appearance > Widget and locate the widget called Cat + Tag Filter. Drag this widget to your sidebar.

3. Setup the widget by choosing appropriate options.

category-tags-filter

4. That’s it. Visit your blog and you will find a navigation widget with categories and tags as filter options.

image

The limitation of this plugin is that the navigation is based on categories and tags only, hence sounds incomplete for an exhaustive user interface. If you need a widget with better and more navigation options (like the Amazon widget), there’s a trick for that too.

Add Category + Tags + Custom Taxonomies Filter on WordPress

You heard it right. We need to use the custom taxonomies functionality of WordPress to achieve this goal. Initially there were only two taxonomies in WordPress i.e. Categories and Tags, but now WordPress allows users to add custom taxonomies as well. For this example, we will make a Movie finder widget with custom taxonomies like Movie Genre, Language, Release year etc. We will achieve this with the help of 2 plugins, GD Custom Posts And Taxonomies Tools by Milan Petrovik and Query Multiple Taxonomies by Scribu.

1. Install and activate both the above mentioned plugins from your WordPress backend.

2. Visit GD CPT Tools > Taxonomies and click on add new.

3. Fill in name, label and click the Auto fill rest button. The plugin will automatically populate rest of data. click Save taxonomy button.

image

4. Repeat this step to create all the required taxonomies.

image

5. Now assign these taxonomies to posts (or custom posts). This is done the same way you assign Categories and tags.

6. Visit Appearance > Widgets and locate the widget called “Taxonomy Drill Down”.

7. Drag it to the sidebar and configure it as needed.

image

8. That’s it. Visit your WordPress site and start using that cool navigation widget to filter the posts.

image

Feel free to ask if you are stucked somewhere.

Author Bio

Ashwini Sah

A technology blogger and WordPress Lover :)

4 Comments

  1. Illona - April 10, 2013

    Hi!! Thanks for all the info! I am using GD Custom Posts And Taxonomies Tools and Query Multiple Taxonomies and everything seems to be working great however how can i make all the items visible always? even if nothing is tagged with that category? and can i somehow specify that only one can be selected from a specific group? I’ve been looking for a solution like this for a while now, and if I can do it using these two plugins, that would be amazing…for example, if i have:

    Size:
    Small
    Medium
    Large

    Price:
    Under 100
    Under 500
    Under 1000

    If some one selects Small and Under 100, and then selects Medium, it would deselect Small, so only one item can be selected in each group…

    Any help would be greatly appreciated, thanks in advance!!

    • Illona - April 10, 2013

      By the way, I found a way to show all of the items, I just have one post/product with text saying “no more products available” and set that to all the tags or categories…if you know of a better way of doing this, please let me know :)

      Still need help with showing only one per group though…

    • Ashwini Sah - April 11, 2013

      Hi Illona

      If none of your post/product tagged with small are also tagged with medium, the medium will automatically be disappeared. so the simple solution is to tag a product wit everything.

      Whatever you have done is the best solution :)

  2. anand - August 25, 2013

    hey thanks for the info dude…i tried using these plugins.cat+tag works fine but stucked at the other two.i tried creating custom taxonomies,added them in widget section too but those taxonomies do not appear in my site,only the default taxonomy “catagories” is appearing.am really new to this,kindly help me out…

Appointment Booking Plugin for Wordpress