I'm trying to create a catalog of my products.
I have only one vocabulary which has hierarchical taxonomy.

For example:
Tiles
-- Wall tiles
-- Floor tiles
Bathroom
-- Bath tubes
-- Taps

My products could be in one main category but in several sub-categories.

This hierarchical taxonomy simplifies the entry of new product. There is no need to enter a collection field and several product categories.
And with the help of taxonomy menu (and nice menu), my main menu could contain all my product categories as a dropdown menu and not only The collection level.

On the page of any level term:
1. I should display all products of this category but also from sub-category(es)
2. My products should be grouped by sub-categories

How I made my views
(without Search API because doesn't handle taxonomy depth as far I know) :

Path: taxonomy/term/%

Contextual filter: Content: Has taxonomy term ID (with depth)
Depth: 1 (in my case I have only 2 levels, increase if you have more than that)

Fields:

• Content: Rendered Node
• Content: Product category

Multiple field settings
Display all values in the same row -> Unchecked

Format: Grid
Grouping field: Content: Product category

It works great when i"m seeing a main level category for example Tiles
But goes wrong when I'm on a sub level.

If I have a tile which is under Floor and Wall, when I will see the "Floor tiles" page for example, both sub-categories "Floor tiles" and "Wall tiles" will be displayed instead of only "Floor tiles" because the grouping field is my node terms and not the one of my contextual filter.

Is there any other way to do that ?