How to make your own filters and show them on your site in OpenCart

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Опубликовано автором admin

We continue to publish articles, which are devoted to the OpenCart ecommerce platform.
In the last one “How to add new brands in OpenCart. How to add brands to carousel module” we talked about brands and carousel module. Today we want to share with you some information concerning implementation of the filters.

Ok, let’s start.
Opencart Filter module has appeared from version So, keep in mind, that if you need this module, it would be right to update your site.

What is the reason of using filters in general?


The most important thing of this is usability. Web sites can have hundreds of products with the different range of prices, sizes, colors etc. If a visitor enters your site and sees such variety of products, he/she can be boring of sorting page, scrolling it down and, as a result, be inclined to leave your web resource.

On the other hand, if the user sees filters, he/she can only set some parameters of search by filter (for example, price and size) and find what he/she needs in a quick manner. In this case he/she doesn’t need to scroll all products and see price and size in each of them.

When you install the default OpenCart template for the first time, you can’t see Filters, because you have to create them by yourself.

Well, let we tell you how to do it.

Firstly, you need to install Module Filter.
Installation procedure is the same as for other modules. Go in admin: Modules -> Extensions -> Filter -> Install. In our example, we will add Filter in the left column on category page.
So, choose: Layout: Category, Position: Left.

Category small - OpenCart program screenshot

Opencart filter module installation

Ok, the Module is installed, but you can’t see it because it is empty. There are not any filters on your site yet.

Now we are about to create at least one filter (we will create filters by price range and size).
So, go to admin: Catalog -> Filters -> Insert. In the fields we set such price ranges: 0 — 200 $ and 200 — 1000 $ (for sure, you will set your own ranges on your web site).

Filter Name small - OpenCart screenshot

Filter Name big - OpenCart screenshot

Press SAVE.

In the same way create Filter group Size: Catalog -> Filters -> Insert.

Filter Group Name small - OpenCart program screeenshot

Filter Group Name big - OpenCart program screenshot

Press SAVE.

Now we have two filters: Price and Size, but, nevertheless, we don’t see them in our FrontEnd.
Next step is to set what filters will be displayed for each category. Or, maybe, for some category we don’t need any of the filters. And the last thing is to add filter and it value to each product.

Go in admin: Catalog -> Categories. In our example, we choose category “Desktops”. Tab “Data”, in the field “Filters” write price range. You don’t need to enter Filter Group Name in this field but Filter Name (begin to enter first letter of the Filter Name and auto complete works). For price, these names are:

  • • 0 — 200 $
  • • 200 — 1000 $

Also add filter Size.

Data small image - Open Cart interface

Data big image - OpenCart interface

Press SAVE.

Now you are able to see Filter module on the page for category “Desktops” on the left column with the title “Refine Search”. It shows that the filters are placed on the site but there are no products with these filters.

Keep in mind to see Filter Module on each category page. You have to add all Filter Names for each category.
You are to add filters to the products at least.
Go to admin: Catalog -> Products, for example, Apple Cinema 30″. Tab “Links”, field “Filters”. Do all procedure in much the same manner as for categories. For this product, we add the following filters:

  • • 0 — 200 $
  • • Big

Links small - OpenCart screenshot

Links big image - OpenCart program interface

Press SAVE.

So, now we can see the number of the products that are set to current filter on the category page near each Filter Name.

OpenCart small image - screenshot

OpenCart big - program interface screenshot

Thus, when we check filter and press button “Refine Search”, we can see products in a quick manner and don’t need to search them across the category page.

Ok, this is all for today.

See you in the next publications.

Tonytemplates team

Запись опубликована в рубрике Learning sessions. Добавьте в закладки постоянную ссылку.
13 комментариев: How to make your own filters and show them on your site in OpenCart
  1. best way to build muscle говорит:

    Awesome information once again! Thanks a lot:)

  2. Web Design India говорит:

    we need to know how to define height of filters appearing . We have very big search filters with lots of options . We want that vertical scroll bar (slider appears ) so that we can reduce its sizes.

    plz help


  3. sony говорит:

    very much helpful information..
    Thank you……

  4. mahesh говорит:

    I have done everything as like shared here.
    i did not see refine search in front end ? why?
    can u help me..

    Thanks & Regards

    • admin говорит:

      Maybe you haven’t installed block Filters in Extesions -> Modules (check Layout and Position for this block)?
      And also maybe you haven’t add in filters to each category and for each product? You have open each category, each product and set filters.
      Do you use default theme? Because some custom themes can change default modules.

  5. Riten говорит:

    I have done everything as like you posted here, but my refine search not working in the category page where as i have horizontal price search in the same page it is working in the page, am i missing some where. please guide me.

    • admin говорит:

      Unfortunately, we don’t understand what do you mean under «horizontal price search»? Do you speak about some additional extension? We described in our article default OpenCart functionality which works for default clean OpenCart template installation.

  6. Melo говорит:

    Hi, can you kindly let me know how to set the filter module to show in home page? I use the default theme, I can see the filter show in each categories, but don’t know how to show in Home page

    • admin говорит:

      Unfortunately, you can’t set this module on Home page because it’s not a Category page. Search in filters can be done only among categories. This is a base functionality of default OpenCart.
      Best regards,
      Tonytemplates team

  7. kepran говорит:

    Good Article, Thanks for sharing this

  8. devumair говорит:

    hi. i want to know that is it possible to remove filters automatically from products if that specific size is out of stock or sold out .

Leave a Reply to admin Cancel Reply