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

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 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>
  • so before you build the ajax thing, i would make sure, the query_params are working as expected. some questions: why do you use meta, this could also work as (custom) taxonomy (its faster..)? and with tax you already get your archive pages (provided that you activate query_vars). in general, you know how to call wordpress for ajax requests? & my 2 cents regarding language: schwierigkeit is translated difficulty and it usally is schwer, mittel & leicht... – honk31 Dec 4 at 16:21

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.