WooCommerce过滤商店文章

I've build a fancy dropdown filter at the top of the WooCommerce shop products list:

The list gets filled from a custom product meta called hardness. It can has 3 values: big, middle and small.

The only thing thats missing now is the function behind this. I don't know how to make this workable now. So the plan is when the user clicks on the groß row, the page gets reloaded via AJAX and only the products with the hardness meta = big gets shown.

I also need to add a class active to the selected item depending on shown products. When the user clicks the row again the filter should be changed or removed.

I'm totally stumped and would be grateful if someone can help me with this.

This is the code of the dropdown:

<div class="filter-toggle">
    Schwierigkeit
    <ul class="filter-menu">
        <li>
            <div class="filter-menu-data">
                <span class="menu-data-inner">groß</span>
            </div>
        </li>
        <li>
            <div class="filter-menu-data">
                <span class="menu-data-inner">mittel</span>
            </div>
        </li>
        <li>
            <div class="filter-menu-data">
                <span class="menu-data-inner">klein</span>
            </div>
        </li>
    </ul>
</div>