WooCommerce过滤器商店文章

Question

我已经在WooCommerce商店products list的顶部构建了一个精美的下拉过滤器：

该列表从名为hardness的自定义产品元数据中填充。它可以具有3个值：big，middle和small。

---

现在唯一缺少的是其背后的功能。我不知道现在如何使它可行。因此，计划是当用户单击groß行时，通过AJAX重新加载页面，并且仅显示带有hardness meta = big的产品。

我还需要根据显示的产品向所选商品添加active类。当用户再次单击该行时，应更改或删除过滤器。

我很沮丧，如果有人可以帮助我，我将不胜感激。

---

这是下拉菜单的代码：

<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>