{"id":7656,"date":"2017-12-05T08:18:03","date_gmt":"2017-12-05T08:18:03","guid":{"rendered":"https:\/\/www.mconnectmedia.com\/blog\/?p=7656"},"modified":"2025-08-08T11:11:58","modified_gmt":"2025-08-08T05:41:58","slug":"magento-2-layered-navigation-extension-filter-product-custom-attributes","status":"publish","type":"post","link":"https:\/\/www.mconnectmedia.com\/blog\/2017\/12\/05\/magento-2-layered-navigation-extension-filter-product-custom-attributes\/","title":{"rendered":"Magento 2 Layered Navigation Extension to Filter Product with Custom Attributes"},"content":{"rendered":"

Almost all online merchants know how competitive the market and how it has made shoppers impatience to check the entire store thoroughly and find the right product they want. It seems that everyone is in a hurry and in search of the way that leads them immediately on the product page they are looking for or even at worst, they want to add the product right from the search result page or popup in the shopping cart and complete the checkout process instantly! To consider this scenario and extend the default Magento 2 navigation, M-Connect has developed Advanced Layered Navigation Magento 2 extension for online stores.<\/em><\/strong><\/p>\n

Of course, technological advancements are at the side of helpless merchants and provide advanced search options that a modern and typical e-commerce shopper needs. By default, Magento is providing Layered Navigation feature to assist merchants at some extents. Now, the question is what Layered Navigation is?<\/p>\n

What is Layered Navigation in Magento?<\/h3>\n

By default Magento provides Layered Navigation feature to help shoppers to search the product catalog quickly using various product attributes like color, size, brand, material, and category.<\/p>\n

Short Falls of Default Magento Native Layered Navigation<\/h4>\n

Unfortunately, Magento native Layered Navigation feature only displayed on \u2018Anchor Category\u2019 and \u2018Quick Search\u2019 result pages. Moreover, it needs to setup attributes via modification in code as well as admin panel of the back-end. It again requires an understanding of programming terms for Filter Counting, Attributes Types, and decide how many attributes you need.<\/p>\n

To work with Layered Navigation feature based on attributes in Magento, it is mandatory to set categories and sub-categories as Anchor and Non-Anchor pages. Luckily, on our previous blog \u201cWhat is Layered Navigation in Magento 2?<\/a>\u201d we have illustrated all required things simply and comprehensively.<\/p>\n

Technically, Magento native Layered Navigation feature is like a direction map guiding e-commerce visitors on a large storefront with plenty of products to find the desired product fast and with correct attributes.<\/p>\n

Unfortunately, it has some drawbacks too and among those two are prominent to overcome if any Magento merchant focuses on user experiences, user engagement, and fast conversion.<\/p>\n

The first one we have discussed earlier that it supports only \u2018Anchor Category\u2019 and \u2018Quick Search\u2019 result pages. The second one is equally significant, and it is page loading hurdles, as the entire page reloads with the selection of each attribute out of multiple attributes choices.<\/p>\n

Recommended Read: What is Product Attribute & How to create it in Magento 2?<\/a><\/strong><\/p><\/blockquote>\n

How Magento Developers at M-Connect Media Solved It?<\/h2>\n

The experience Mconnect Magento developers<\/a> have taken these shortfalls seriously and found out a robust solution as AJAX Layered Navigation Extension for Magento 2 merchants.<\/p>\n

View Extension: Mconnect ajax Advanced Layered Navigation Magento 2 Extension <\/strong><\/p><\/blockquote>\n

\"Layared<\/p>\n

The Magento extension development team at M-Connect Media<\/a> has overcome issues in the following ways.<\/p>\n

Implementation of AJAX Technology<\/strong><\/h3>\n

They have implemented the latest AJAX technologies to load the web page data asynchronously by eliminating the reloading of the entire page.<\/p>\n

\"Ajax<\/p>\n

Recommended Ajax Module: Advanced Ajax Login & Register for Magento 2 Stores <\/a><\/strong><\/p><\/blockquote>\n

Thus, data or only resulting module reloading takes place with each filtering selection of the given attributes in the drop-down menu, as depicted in the above image.<\/p>\n

Different Filter Types & Filter Location<\/strong><\/h3>\n

After Installation, When you navigate to admin panel Store > Settings > Configuration > M-Connect Media > Advanced Layered Navigation.<\/p>\n

\"Advanced<\/p>\n

Thus, you can see a configuration with various setting options like in the image above. Now, go to the General Setting tab and check the resulting screen as given below.<\/p>\n

\"General<\/p>\n

You will find two options for \u2018Filter Type\u2019 field, Auto, and Manual. Similarly, \u2018Filter Location\u2019 filed has Sidebar and Toolbar options.<\/p>\n

\"Sidebar<\/p>\n

The image above describes how filter looks on the selection of sidebar option for the page position option.<\/p>\n

Multi Filter List Selection<\/strong><\/h3>\n

The images below also display Filter List selected in configuration settings depicted below.<\/p>\n

\"Custom<\/p>\n

Filter List tab drag-n-drop facilities to move All Fields attributes to Selected Field column. Thus, the resulting front-end screen will display on those attributes that admin have dropped in the Selected Field column.<\/p>\n

Rating Filter a Ranking Feature<\/strong><\/h3>\n\n\n\n
\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The product reviews and rating play a vital role in decision making and trust-building on the online storefront.<\/p>\n

Stock Filter a Utility Feature<\/strong><\/h3>\n\n\n\n
\"Stock<\/td>\n\"Stock<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

This additional feature facilitates the shoppers to know how many items of the product category\/attribute is in the stock.If the merchant wants to display stock options like out of stock products, the configuration setting is available.<\/p>\n

Price Slider an Essential Feature<\/strong><\/h3>\n

Price is a very sensitive and detrimental factor in making purchasing decisions<\/a>. Therefore, the extension provides facilities to display a price slider and facilities to set minimum and maximum price range.<\/p>\n

Recommended Module: Ajax Price Slider – Allow Customers to Shop within Their Budget<\/strong><\/p><\/blockquote>\n

Clear All Filter a Useful Feature<\/strong><\/h3>\n

It has been observed that shoppers frequently change the mind and want to revisit the options of filtering the product search. In due course, \u2018Clear All\u2019 command proves useful and enable them to remove all filters to reinvent the wheel.<\/p>\n

Mconnect Layered Navigation Magento 2 Module – Advanced Product Filter & Search Functionality<\/a> <\/strong> from M-Connect Media<\/a><\/strong><\/div>\n