Hiding or Showing Filters In Certain Categories in magento

Learn hiding or showing filters in certain categories in magento with practical examples, diagrams, and best practices. Covers magento, attributes, categories development techniques with visual exp...
Tags:
Categories:

Dynamic Filter Visibility: Showing or Hiding Filters in Specific Magento Categories

Hero image for Hiding or Showing Filters In Certain Categories in magento

Learn how to control the visibility of layered navigation filters (attributes) based on the category being viewed in Magento, enhancing user experience and product discoverability.

Magento's layered navigation is a powerful tool for helping customers find products. However, not all filters are relevant for every category. Displaying irrelevant filters can clutter the interface and confuse users. This article will guide you through methods to dynamically show or hide specific filters (product attributes) based on the category a customer is browsing, leading to a cleaner, more intuitive shopping experience.

Understanding Magento's Filter Mechanism

In Magento, layered navigation filters are derived from product attributes. Each attribute can be configured to be used in layered navigation. The core challenge is that this configuration is global for the attribute. To achieve category-specific visibility, we need to override or extend Magento's default behavior, typically by modifying layout XML files or programmatically adjusting the filter collection.

flowchart TD
    A[Customer Views Category Page]
    A --> B{Is Layered Navigation Enabled?}
    B -->|Yes| C[Magento Collects Filterable Attributes]
    C --> D{Is Attribute Configured for Layered Nav?}
    D -->|Yes| E[Attribute Appears as Filter]
    D -->|No| F[Attribute Hidden]
    B -->|No| G[No Layered Navigation]
    E --> H[Apply Custom Logic (e.g., Category Check)]
    H --> I{Should Filter Be Visible in THIS Category?}
    I -->|Yes| J[Display Filter]
    I -->|No| K[Hide Filter]
    K --> L[Enhanced User Experience]

Magento Filter Visibility Flow with Custom Logic

For scenarios where you want to hide a filter for a specific category or a small set of categories, Magento's layout XML update mechanism is often the simplest approach. This involves adding a layout update to the target category that removes the block responsible for rendering the specific filter.

1. Identify the Filter Block Name

Each filter in layered navigation is rendered by a block. You'll need to identify the block name associated with the attribute you want to hide. This often follows a pattern like catalog.leftnav.filter_attribute_code.

2. Navigate to Category Edit Page

In the Magento Admin Panel, go to Catalog > Categories. Select the category for which you want to hide the filter.

3. Add Layout Update XML

Under the 'Design' tab, expand the 'Layout Update XML' section. Add the following XML snippet, replacing attribute_code with your actual attribute code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.leftnav.filter_attribute_code" remove="true"/>
    </body>
</page>

Layout XML to remove a specific filter block

1. Save Category and Clear Cache

Save the category and then clear Magento's cache (System > Cache Management) to see the changes reflected on the frontend.

2. Considerations for Multiple Filters

If you need to hide multiple filters, you'll add multiple <referenceBlock> tags, one for each filter you wish to remove.

Method 2: Programmatic Control (For Complex Logic or Many Categories)

For more advanced scenarios, such as hiding filters based on custom logic, user groups, or when dealing with a large number of categories and attributes, a programmatic approach is more scalable. This typically involves creating a custom module that observes an event or overrides a core class responsible for collecting layered navigation filters.

flowchart TD
    A[Custom Module]
    A --> B[Observer (e.g., `catalog_block_product_list_collection`)]
    B --> C{Check Current Category}
    C --> D{Check Attribute Code}
    D --> E{Apply Visibility Logic}
    E -->|Hide| F[Remove Attribute from Collection]
    E -->|Show| G[Keep Attribute in Collection]
    F --> H[Frontend Filter Display]
    G --> H

Programmatic Filter Visibility Flow

A common approach is to observe the catalog_block_product_list_collection event, which is dispatched when the product collection for a category page is being prepared. You can then modify the filter collection before it's rendered.

<?php
// app/code/Vendor/Module/etc/frontend/events.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_block_product_list_collection">
        <observer name="vendor_module_hide_filters" instance="Vendor\Module\Observer\HideCategoryFilters" />
    </event>
</config>

events.xml to register an observer

<?php
// app/code/Vendor/Module/Observer/HideCategoryFilters.php

namespace Vendor\Module\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Event\Observer;
use Magento\Catalog\Model\Layer\Resolver as LayerResolver;

class HideCategoryFilters implements ObserverInterface
{
    protected $layerResolver;

    public function __construct(
        LayerResolver $layerResolver
    ) {
        $this->layerResolver = $layerResolver;
    }

    public function execute(Observer $observer)
    {
        $currentCategory = $this->layerResolver->get()->getCurrentCategory();
        $categoryId = $currentCategory->getId();

        // Define which attributes to hide for which categories
        $hideFiltersConfig = [
            10 => ['color', 'size'], // Hide 'color' and 'size' for category ID 10
            12 => ['material']      // Hide 'material' for category ID 12
        ];

        if (isset($hideFiltersConfig[$categoryId])) {
            $filtersToHide = $hideFiltersConfig[$categoryId];
            $collection = $observer->getEvent()->getCollection();

            // Iterate through the collection and remove filters
            foreach ($collection->getItems() as $item) {
                if (in_array($item->getAttributeCode(), $filtersToHide)) {
                    $collection->removeItemByKey($item->getId());
                }
            }
        }
    }
}

Observer to hide filters based on category ID

Conclusion

Controlling filter visibility in Magento based on categories significantly improves the user experience by presenting only relevant options. Whether you opt for simple layout XML updates or a more robust programmatic solution, tailoring your layered navigation ensures a cleaner interface and helps customers find what they need more efficiently. Choose the method that best fits the complexity and scale of your requirements.