The users can also make use of the price bar to filter the products based on the selected price range.<\/p>\n
Also, Magento 2 Layered Navigation extension is Ajax-based so the users need not wait for the page to reload.<\/p>\n
Watch the below video tutorial to understand the Magento 2 layered navigation extension workflow:<\/p>\n
Features<\/h3>\n<\/div>\n<\/div>\n\n\n\n- Ajax-based filter<\/span> helps the customers to view the results without page reload.<\/span><\/li>\n
- The plugin works for the category and search pages.<\/li>\n
- Attribute display can be either set as a vertical or horizontal view by the admin.<\/li>\n
- Users can choose multiple attributes and<\/span> attribute values at<\/span> a<\/span> time for filtration<\/span>.<\/span><\/li>\n
- In order to filter the desired product, choose multiple Attribute Options, and Attribute Types (Drop-down, Multiple select, Swatch & Price) as required.<\/li>\n
- The current selection is displayed directly in<\/span> the search box.<\/span><\/li>\n
- For filtration, product ratings can be used.<\/li>\n
- The customer can choose the Magento 2 layered navigation multiple select checkbox options at a time to filter the products.<\/li>\n
- In the available carousel filter by any attribute (Like brands).<\/li>\n
- Make attributes available for layered navigation directly from the grid.<\/li>\n
- Add a carousel filter base of category for layered navigation.<\/li>\n
- The customer can apply the Magento 2 Layered Navigation category filter for the child category.<\/li>\n
- Make use of the price bar for<\/span> a user-defined range search.<\/li>\n
- Magento 2 Layered Navigation plugin helps in keeping the previous state of<\/span> the browser.<\/span><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Installation<\/h3>\n<\/div>\n<\/div>\n\n\nThe installation is quite simple just like the standard\u00a0Magento 2 extensions<\/a>.<\/p>\n#Download Module<\/h3>\n
Firstly, you need to log in to the Webkul Store, go to\u00a0My Account>My Purchased Products section, verify, and then download and extract the contents of this zip folder on the system.<\/p>\n
#Upload Folder<\/h3>\n
Once the module zip extracts, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:<\/p>\n![\"Magento](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/m2_installation-1200x451.png\")
<\/figure>\n# Run Commands<\/h3>\n
You need to run the following commands:<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n
php bin\/magento setup:upgrade<\/pre>\n\n\n\nphp bin\/magento setup:di:compile<\/pre>\n\n\n\nphp bin\/magento setup:static-content:deploy<\/pre>\n\n\n\nphp bin\/magento indexer:reindex<\/pre>\n\n\n\nphp bin\/magento cache:flush<\/pre>\n\n\n\n\n\nMulti-Lingual Configuration<\/h3>\n<\/div>\n<\/div>\n\nNavigate through Store->Configuration->General ->Locale Options<\/strong>. And here select your desired language under the Locale<\/strong> drop-down option.<\/p>\n![\"LOcale](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Locale-options-1.webp\")
<\/p>\n<\/div>\n<\/div>\n
\n\n\nLanguage Translation<\/h3>\n<\/div>\n<\/div>\n\nFor the module translation, in your system navigate via app\/code\/Webkul\/AdvancedLayeredNavigation\/i18n<\/strong>. Here, open the file named en_US.CSV<\/strong> to edit.![\"translation\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/22-3.png\" "\\"translation\\"")
<\/a><\/p>\nAfter opening the file, replace the words after the comma(,)<\/strong> on the right with your translated words.
![\"translate](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/33-2.png\" "\\"translate")
<\/a><\/p>\nAfter the above step, now save the csv file and then upload it to the same folder and the translation is done.
![\"Translation\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2016-05-02_16-25-34-3.png\" "\\"Translation\\"")
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nModule Configuration Settings<\/h3>\n<\/div>\n<\/div>\n\nTo configure the module settings, navigate through Stores<\/strong>->Configuration<\/strong>->Webkul<\/strong>->Advanced layer Navigation<\/strong>.<\/p>\n![\"Module](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Module-configuration.webp\")
<\/p>\n
Here the admin will configure the settings –<\/p>\n
\n- Filter by Ratings<\/strong>:
Choose this option as Yes to allow the customers to filter the products according to ratings(customer) else select No.<\/li>\n- Carousel Filter<\/strong>:
Set this option as Yes to filter by attributes of your choice else select No.<\/li>\n- Background color<\/strong>:
Set the color for the carousel background.<\/li>\n- Border Color<\/strong>:
Set the color for the carousel border.<\/li>\n- Image Width<\/strong>:
Within the carousel, set the image’s width.<\/li>\n- Image Height:<\/strong>
Within the carousel, set the image’s height.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\nAdmin Management<\/h3>\n<\/div>\n<\/div>\n\nCreate Attribute<\/strong> –<\/p>\nFor adding the product attributes, the admin will navigate to Stores <\/strong>> Attributes <\/strong>> Product<\/strong>.<\/p>\n![\"Admin](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Admin-dashboard-1.webp\")
<\/p>\n
After clicking on the “Product<\/strong>” sub-menu option, it redirects the admin to the Product Attributes page as shown in the image below.<\/p>\nThe admin will the attribute listing on the Product Attributes page.<\/p>\n
Also, the admin can add a new product by simply clicking on the “Add New Attribute<\/strong>” button as shown below.<\/p>\n![\"Product--Attributes\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Product-Attributes-1.webp\")
<\/p>\n
On clicking the “Add New Attribute,<\/strong>” will redirect the admin to the New Product Attribute page<\/strong>.<\/p>\nThe admin will have to configure the settings under the following tabs-<\/p>\n
\n- Fill in the details for the attribute Properties,<\/strong><\/li>\n
- Then set the Labels<\/strong> under Manage Labels<\/strong> for the attribute, and<\/li>\n
- Lastly, set the Storefront Properties<\/strong> for this attribute.<\/li>\n<\/ul>\n
Properties tab<\/h6>\n
The admin can click on Properties, that opens up the Attribute Properties<\/strong> section.<\/p>\nThe admin can fill in the basic settings such as Default Label, Catalog Input, Manage Options details, Advanced Attribute Properties, etc. as shown in the image below.<\/p>\n
![\"add-attribute\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-attribute.webp\")
<\/p>\n
![\"add](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-attribute-advance.webp\")
<\/p>\n
The next tab is Manage Labels<\/strong>, under which the admin can manage the titles of the attributes, for Default Store View<\/strong> and Test Store View<\/strong>.<\/p>\n![\"Manage](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Manage-labels.webp\")
<\/p>\n
The last configuration tab is the Storefront Properties.<\/p>\n
The admin can configure the settings such as Use in Search, Visible in Advanced Search, Comparable on Storefront, Use in Layered Navigation, etc.\u00a0<\/p>\n
![\"Storefront](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Storefront-properties-1.webp\")
<\/p>\n<\/div>\n<\/div>\n
Another section of the Storefront Properties tab includes details such as Use of Promo Rule Conditions, Visible on Catalog Pages on Storefront, Used in Product Listing, Display Type.<\/p>\n
Under Display Type,<\/strong> the admin can either choose Vertical View<\/strong> or Horizontal View.<\/strong><\/p>\n\n\n![\"Storefront](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Storefront-properties-2.webp\")
<\/p>\n
Under storefront properties set “Yes<\/strong>” for the “Use in Search<\/strong>“, “Use In layered Navigation<\/strong>” options, and then click the save<\/strong> button to save the configuration.<\/p>\nAfter saving the attribute, you can search the attribute to check if it’s saved or not.<\/p>\n
![\"Saved](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Saved-product-attribute.webp\")
<\/p>\n
Now, to add this created attribute into an attribute set, navigate to Stores<\/strong>->Attributes<\/strong>->Attribute Set.<\/strong><\/p>\nHere, select the attribute set(we have selected the default) in which you want to put this newly created attribute.<\/p>\n
After this, just drag and drop this attribute under the product settings as shown below in the snapshot.<\/p>\n
![\"Edit](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Default-attribute.webp\")
<\/a><\/p>\n\n\nAssign Attribute to Product –<\/h4>\n<\/div>\n<\/div>\n
Here, you can assign the created attribute to the products. To add this attribute to a product, go to the add new product page, and then for the created attribute select the attribute value then save the product after that.<\/p>\n
This attribute<\/strong> will be visible<\/strong> on the advanced layered navigation<\/strong>\u00a0at the front end and you can filter it.<\/p>\n![\"Assign](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Attribute-at-add-new-product-e1714375346810.webp\")
<\/p>\n
Make Attribute Available for layered Navigation<\/strong>:<\/p>\nThe admin can easily provide the customers with the product attributes which can be used for layered navigation.<\/p>\n
To do so the admin needs to navigate through Stores<\/strong>->Attribute<\/strong>->Product<\/strong>.<\/p>\nHere, whichever attribute you want to make available for the layered navigation just check that and from the Actions<\/strong> drop-down select Use in Layered Navigation<\/strong> and then select Filterable(with results)<\/strong> and hit the Submit<\/strong> button after that.<\/p>\n![\"Filter](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Filter-product.webp\" "\\"Attributes")
<\/p>\n
At the store frontend, the customers will find the assigned attributes <\/strong>for use in the layered navigation<\/strong> for filtering the products.<\/p>\n![\"assign](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/webkul_magento2_advanced_layer_navigation_assign_attribute.png\" "\\"assign")
<\/p>\n
Enable Filter by any attribute (Like brands) in the carousel <\/strong>:<\/h4>\nTo enable this option admin needs to navigate through Advanced Layered Navigation-> Carousel Filter<\/strong><\/p>\nNote<\/span>:- Admin can choose only the “Dropdown” type attribute for the carousel filter.<\/p>\n![\"Advance](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Advance-layered-navigation--e1714375761470.webp\")
<\/p>\n
Now, the admin can set the Title<\/strong>, Attribute<\/strong>,\u00a0Category<\/strong> & Enable<\/strong> the module accordingly from the General tab.<\/p>\nFrom the Options tab, the admin can set the images for the “values of the attribute” for the carousel as shown in the image and then click on the Save button.<\/p>\n
![\"edit-carousel-filter-1\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/edit-carousel-filter-1.png\")
<\/p>\n
Admin can add the\u00a0products to the desired category with the appropriate attribute option according to the product.<\/p>\n
Now, the customer can see the carousel images to filter the result on the category page.<\/p>\n
![\"Filter\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Filter.png\")
<\/p>\n
By selecting the desired attribute (color) from the carousel customer will get the filtered result mapping with the selected attribute.<\/p>\n<\/div>\n<\/div>\n
\n\n\nWorkflow Frontend<\/h3>\n<\/div>\n<\/div>\n\n\nBy Magento 2 layered navigation, customers can now search the product with a user-defined price range filter that is based on Ajax so you don\u2019t need to wait for the page reload.<\/p>\n
![\"Search](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Price-Range.png\" "\\"Search")
<\/a><\/p>\nThe buyers can filter multiple attributes at a time without removing previous ones.
![\"filter](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Multiple-Attribute-Selection.png\" "\\"filter")
<\/a><\/p>\nFilter by Ratings<\/strong>:<\/h4>\nIf this option is enabled by the admin, then the customers will be able to filter the products by customer ratings.<\/p>\n
![\"filter](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/product-filter.png\" "\\"filter")
<\/p>\n
Also the Magento 2 Layered Navigation extension has different filter collection Types like – Multiple select, Drop-down, Swatch & Price .<\/p>\n
![\"different](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/webkul-magento2-layered-navigation-attribute-types.png\" "\\"different")
<\/p>\n
Magento 2 layered navigation extension also supports Attribute Options<\/strong> i.e you can see & select from multiple select checkbox options that is been created for the specific attribute on the catalog storefront page to search for your specific product.<\/p>\n![\"Attribute](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/webkul-magento2-layered-navigation-attribute-option-1.png\" "\\"Attribute")
<\/p>\n
Here you can select Magento 2 layered navigation multiple select checkbox options of specific attributes and can see current selection<\/strong> directly in the below screenshot.<\/p>\n![\"webkul-magento2-layered-navigation-attribute-options\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/webkul-magento2-layered-navigation-attribute-options-1.png\" "\\"multiple")
<\/a><\/p>\nFilter by Category –<\/strong><\/h4>\nThe customer can apply the Magento 2 Layered Navigation category filter for the child category also.<\/p>\n
Also, the customer can now select the multiple sub-categories of a child category to filter the products according to the selected sub-category.<\/p>\n
The customer can select multiple sub-categories by clicking on the check button and filter the products accordingly.<\/p>\n
![\"advance-layered-navigation-for-magento-2-category-filter\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/01082029\/advance-layered-navigation-for-magento-2-category-filter.png\")
<\/p>\n
Advanced Layered Navigation on Search Page<\/strong><\/h4>\nThe customers can use the ajax based filters on the search page as well.<\/p>\n
Advanced layered navigation is available everywhere in the store.<\/p>\n
The customers can type a word in the search box and filter the results according to their preferences such as size, color, category.<\/p>\n
![\"Advanced](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/screencapture-magento2-webkul-modules-demo2-catalogsearch-result-1505374372843.png\" "\\"At")
<\/a><\/p>\n\nAdvanced Layered Navigation: Horizontal View and its Backend Settings<\/h3>\n
In addition to this, Magento 2 layered navigation allows a Horizontal View of the Layered Navigation.<\/p>\n
The admin will have to set a few configurations in the backend first for displaying the attributes as a horizontal view.<\/p>\n
For that, the admin needs to navigate to Stores > Attributes > Product. This redirects the admin to the Product attribute page as shown below.<\/p>\n
![\"Select](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Select-action-product-attiribute-1.webp\")
<\/p>\n<\/div>\n
Further, the attributes, that the admin wishes to display as the horizontal view, from the given list must be chosen.<\/p>\n
For that, the admin will have to select the attributes, navigate to Actions drop down<\/strong> and choose Display<\/strong> Type.<\/strong><\/p>\nIn doing so, another textbox appears, where the admin needs to select the View Horizontal<\/strong> option and click on submit.<\/p>\n![\"View](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/View-Display-type-1.webp\")
<\/p>\n
Likewise, the attributes will display as Horizontal View<\/strong> (such as Size, Color, Material, New) on the category pages in the frontend for the customers.<\/p>\nPlease Note:<\/strong><\/p>\n\n- The Price<\/strong> attribute will always display as Vertical View<\/strong>.<\/li>\n<\/ul>\n
![\"webkul-magento2-advanced-layered-navigation-horizontal-display-of-attributes\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/webkul-magento2-advanced-layered-navigation-horizontal-display-of-attributes.png\")
<\/a><\/p>\nThat\u2019s all for the <\/span>Magento2 Advanced Layered Navigation Extension.<\/b> You may also check our quality\u00a0Magento 2 Extensions<\/a>. Still have any queries then create a ticket at our helpdesk system <\/span>webkul.uvdesk.com<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"
- \n
- Ajax-based filter<\/span> helps the customers to view the results without page reload.<\/span><\/li>\n
- The plugin works for the category and search pages.<\/li>\n
- Attribute display can be either set as a vertical or horizontal view by the admin.<\/li>\n
- Users can choose multiple attributes and<\/span> attribute values at<\/span> a<\/span> time for filtration<\/span>.<\/span><\/li>\n
- In order to filter the desired product, choose multiple Attribute Options, and Attribute Types (Drop-down, Multiple select, Swatch & Price) as required.<\/li>\n
- The current selection is displayed directly in<\/span> the search box.<\/span><\/li>\n
- For filtration, product ratings can be used.<\/li>\n
- The customer can choose the Magento 2 layered navigation multiple select checkbox options at a time to filter the products.<\/li>\n
- In the available carousel filter by any attribute (Like brands).<\/li>\n
- Make attributes available for layered navigation directly from the grid.<\/li>\n
- Add a carousel filter base of category for layered navigation.<\/li>\n
- The customer can apply the Magento 2 Layered Navigation category filter for the child category.<\/li>\n
- Make use of the price bar for<\/span> a user-defined range search.<\/li>\n
- Magento 2 Layered Navigation plugin helps in keeping the previous state of<\/span> the browser.<\/span><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\nInstallation<\/h3>\n<\/div>\n<\/div>\n
\n\nThe installation is quite simple just like the standard\u00a0Magento 2 extensions<\/a>.<\/p>\n
#Download Module<\/h3>\n
Firstly, you need to log in to the Webkul Store, go to\u00a0My Account>My Purchased Products section, verify, and then download and extract the contents of this zip folder on the system.<\/p>\n
#Upload Folder<\/h3>\n
Once the module zip extracts, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:<\/p>\n
<\/figure>\n# Run Commands<\/h3>\n
You need to run the following commands:<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n
php bin\/magento setup:upgrade<\/pre>\n\n\n\n
php bin\/magento setup:di:compile<\/pre>\n\n\n\n
php bin\/magento setup:static-content:deploy<\/pre>\n\n\n\n
php bin\/magento indexer:reindex<\/pre>\n\n\n\n
php bin\/magento cache:flush<\/pre>\n\n\n
\n\n\nMulti-Lingual Configuration<\/h3>\n<\/div>\n<\/div>\n
\nNavigate through Store->Configuration->General ->Locale Options<\/strong>. And here select your desired language under the Locale<\/strong> drop-down option.<\/p>\n
<\/p>\n<\/div>\n<\/div>\n\n\n\nLanguage Translation<\/h3>\n<\/div>\n<\/div>\n
\nFor the module translation, in your system navigate via app\/code\/Webkul\/AdvancedLayeredNavigation\/i18n<\/strong>. Here, open the file named en_US.CSV<\/strong> to edit.
<\/a><\/p>\nAfter opening the file, replace the words after the comma(,)<\/strong> on the right with your translated words.
<\/a><\/p>\nAfter the above step, now save the csv file and then upload it to the same folder and the translation is done.
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nModule Configuration Settings<\/h3>\n<\/div>\n<\/div>\n
\nTo configure the module settings, navigate through Stores<\/strong>->Configuration<\/strong>->Webkul<\/strong>->Advanced layer Navigation<\/strong>.<\/p>\n
<\/p>\nHere the admin will configure the settings –<\/p>\n
- \n
- Filter by Ratings<\/strong>:
Choose this option as Yes to allow the customers to filter the products according to ratings(customer) else select No.<\/li>\n- Carousel Filter<\/strong>:
Set this option as Yes to filter by attributes of your choice else select No.<\/li>\n- Background color<\/strong>:
Set the color for the carousel background.<\/li>\n- Border Color<\/strong>:
Set the color for the carousel border.<\/li>\n- Image Width<\/strong>:
Within the carousel, set the image’s width.<\/li>\n- Image Height:<\/strong>
Within the carousel, set the image’s height.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\nAdmin Management<\/h3>\n<\/div>\n<\/div>\n
\nCreate Attribute<\/strong> –<\/p>\n
For adding the product attributes, the admin will navigate to Stores <\/strong>> Attributes <\/strong>> Product<\/strong>.<\/p>\n
<\/p>\nAfter clicking on the “Product<\/strong>” sub-menu option, it redirects the admin to the Product Attributes page as shown in the image below.<\/p>\n
The admin will the attribute listing on the Product Attributes page.<\/p>\n
Also, the admin can add a new product by simply clicking on the “Add New Attribute<\/strong>” button as shown below.<\/p>\n
<\/p>\nOn clicking the “Add New Attribute,<\/strong>” will redirect the admin to the New Product Attribute page<\/strong>.<\/p>\n
The admin will have to configure the settings under the following tabs-<\/p>\n
- \n
- Fill in the details for the attribute Properties,<\/strong><\/li>\n
- Then set the Labels<\/strong> under Manage Labels<\/strong> for the attribute, and<\/li>\n
- Lastly, set the Storefront Properties<\/strong> for this attribute.<\/li>\n<\/ul>\n
Properties tab<\/h6>\n
The admin can click on Properties, that opens up the Attribute Properties<\/strong> section.<\/p>\n
The admin can fill in the basic settings such as Default Label, Catalog Input, Manage Options details, Advanced Attribute Properties, etc. as shown in the image below.<\/p>\n
<\/p>\n<\/p>\nThe next tab is Manage Labels<\/strong>, under which the admin can manage the titles of the attributes, for Default Store View<\/strong> and Test Store View<\/strong>.<\/p>\n
<\/p>\nThe last configuration tab is the Storefront Properties.<\/p>\n
The admin can configure the settings such as Use in Search, Visible in Advanced Search, Comparable on Storefront, Use in Layered Navigation, etc.\u00a0<\/p>\n
<\/p>\n<\/div>\n<\/div>\nAnother section of the Storefront Properties tab includes details such as Use of Promo Rule Conditions, Visible on Catalog Pages on Storefront, Used in Product Listing, Display Type.<\/p>\n
Under Display Type,<\/strong> the admin can either choose Vertical View<\/strong> or Horizontal View.<\/strong><\/p>\n
\n\n<\/p>\nUnder storefront properties set “Yes<\/strong>” for the “Use in Search<\/strong>“, “Use In layered Navigation<\/strong>” options, and then click the save<\/strong> button to save the configuration.<\/p>\n
After saving the attribute, you can search the attribute to check if it’s saved or not.<\/p>\n
<\/p>\nNow, to add this created attribute into an attribute set, navigate to Stores<\/strong>->Attributes<\/strong>->Attribute Set.<\/strong><\/p>\n
Here, select the attribute set(we have selected the default) in which you want to put this newly created attribute.<\/p>\n
After this, just drag and drop this attribute under the product settings as shown below in the snapshot.<\/p>\n
<\/a><\/p>\n\n\nAssign Attribute to Product –<\/h4>\n<\/div>\n<\/div>\n
Here, you can assign the created attribute to the products. To add this attribute to a product, go to the add new product page, and then for the created attribute select the attribute value then save the product after that.<\/p>\n
This attribute<\/strong> will be visible<\/strong> on the advanced layered navigation<\/strong>\u00a0at the front end and you can filter it.<\/p>\n
<\/p>\nMake Attribute Available for layered Navigation<\/strong>:<\/p>\n
The admin can easily provide the customers with the product attributes which can be used for layered navigation.<\/p>\n
To do so the admin needs to navigate through Stores<\/strong>->Attribute<\/strong>->Product<\/strong>.<\/p>\n
Here, whichever attribute you want to make available for the layered navigation just check that and from the Actions<\/strong> drop-down select Use in Layered Navigation<\/strong> and then select Filterable(with results)<\/strong> and hit the Submit<\/strong> button after that.<\/p>\n
<\/p>\nAt the store frontend, the customers will find the assigned attributes <\/strong>for use in the layered navigation<\/strong> for filtering the products.<\/p>\n
<\/p>\nEnable Filter by any attribute (Like brands) in the carousel <\/strong>:<\/h4>\n
To enable this option admin needs to navigate through Advanced Layered Navigation-> Carousel Filter<\/strong><\/p>\n
Note<\/span>:- Admin can choose only the “Dropdown” type attribute for the carousel filter.<\/p>\n
<\/p>\nNow, the admin can set the Title<\/strong>, Attribute<\/strong>,\u00a0Category<\/strong> & Enable<\/strong> the module accordingly from the General tab.<\/p>\n
From the Options tab, the admin can set the images for the “values of the attribute” for the carousel as shown in the image and then click on the Save button.<\/p>\n
<\/p>\nAdmin can add the\u00a0products to the desired category with the appropriate attribute option according to the product.<\/p>\n
Now, the customer can see the carousel images to filter the result on the category page.<\/p>\n
<\/p>\nBy selecting the desired attribute (color) from the carousel customer will get the filtered result mapping with the selected attribute.<\/p>\n<\/div>\n<\/div>\n
\n\n\nWorkflow Frontend<\/h3>\n<\/div>\n<\/div>\n
\n\nBy Magento 2 layered navigation, customers can now search the product with a user-defined price range filter that is based on Ajax so you don\u2019t need to wait for the page reload.<\/p>\n
<\/a><\/p>\nThe buyers can filter multiple attributes at a time without removing previous ones.
<\/a><\/p>\nFilter by Ratings<\/strong>:<\/h4>\n
If this option is enabled by the admin, then the customers will be able to filter the products by customer ratings.<\/p>\n
<\/p>\nAlso the Magento 2 Layered Navigation extension has different filter collection Types like – Multiple select, Drop-down, Swatch & Price .<\/p>\n
<\/p>\nMagento 2 layered navigation extension also supports Attribute Options<\/strong> i.e you can see & select from multiple select checkbox options that is been created for the specific attribute on the catalog storefront page to search for your specific product.<\/p>\n
<\/p>\nHere you can select Magento 2 layered navigation multiple select checkbox options of specific attributes and can see current selection<\/strong> directly in the below screenshot.<\/p>\n
<\/a><\/p>\nFilter by Category –<\/strong><\/h4>\n
The customer can apply the Magento 2 Layered Navigation category filter for the child category also.<\/p>\n
Also, the customer can now select the multiple sub-categories of a child category to filter the products according to the selected sub-category.<\/p>\n
The customer can select multiple sub-categories by clicking on the check button and filter the products accordingly.<\/p>\n
<\/p>\nAdvanced Layered Navigation on Search Page<\/strong><\/h4>\n
The customers can use the ajax based filters on the search page as well.<\/p>\n
Advanced layered navigation is available everywhere in the store.<\/p>\n
The customers can type a word in the search box and filter the results according to their preferences such as size, color, category.<\/p>\n
<\/a><\/p>\n\nAdvanced Layered Navigation: Horizontal View and its Backend Settings<\/h3>\n
In addition to this, Magento 2 layered navigation allows a Horizontal View of the Layered Navigation.<\/p>\n
The admin will have to set a few configurations in the backend first for displaying the attributes as a horizontal view.<\/p>\n
For that, the admin needs to navigate to Stores > Attributes > Product. This redirects the admin to the Product attribute page as shown below.<\/p>\n
<\/p>\n<\/div>\nFurther, the attributes, that the admin wishes to display as the horizontal view, from the given list must be chosen.<\/p>\n
For that, the admin will have to select the attributes, navigate to Actions drop down<\/strong> and choose Display<\/strong> Type.<\/strong><\/p>\n
In doing so, another textbox appears, where the admin needs to select the View Horizontal<\/strong> option and click on submit.<\/p>\n
<\/p>\nLikewise, the attributes will display as Horizontal View<\/strong> (such as Size, Color, Material, New) on the category pages in the frontend for the customers.<\/p>\n
Please Note:<\/strong><\/p>\n
- \n
- The Price<\/strong> attribute will always display as Vertical View<\/strong>.<\/li>\n<\/ul>\n<\/a><\/p>\n
That\u2019s all for the <\/span>Magento2 Advanced Layered Navigation Extension.<\/b> You may also check our quality\u00a0Magento 2 Extensions<\/a>. Still have any queries then create a ticket at our helpdesk system <\/span>webkul.uvdesk.com<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"
- Then set the Labels<\/strong> under Manage Labels<\/strong> for the attribute, and<\/li>\n
- Carousel Filter<\/strong>: