Filters for customized Divi Blog module

Question

So I've been working on a Wordpress website using a child theme of Divi & the builder. I modified my Blog module to include custom post types (made with ACF) and its custom fields and taxonomies. Ex: recipes, having "recipe_label" and "recipe_categories" taxonomies, fields like "recipe_short-description", etc

My custom posts are well displayed in my page. However, I'm having trouble right now making filters for it. I have my filter forms, I tried using javascript, php, making a custom plugin, but can't make anything work fine enough.

recipes page

Can someone help me please ? (PS: Tell me what you need to see to help me, I can provide code snippets but not access to my website as it is still confidential...)

Also, I know there are plugins doing the job but I can't pay for it as most of the needed functionnalities are premium.

Thanks!

The closest I've been to success was a php function with permalink formatting, which used a base permalink ending with the id/slug of the chosen taxonomy (on click on another taxonomy the id/slug was replaced by the new one) and lead to a Divi template for categories and tags. The problem was that it was impossible to select several labels, several categories, or categories + labels.

The rest (several javascript/ajax -for dynamic filters- attempts) was not working at all, displaying 404 errors on the console.

//Below the code of the initial function

//filtering buttons
function custom_recipe_filter_query($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }

    $recipe_labels = isset($_GET['recipe_label']) ? array_map('sanitize_text_field', $_GET['recipe_label']) : array();

    if (!empty($recipe_labels)) {
        $tax_query = array(
           'taxonomy' => 'recipe_label',
            'field'    => 'slug',
            'terms'    => $recipe_labels,
            'operator' => 'IN',
        );

       $query->set('tax_query', array($tax_query));
    }
}

add_action('pre_get_posts', 'custom_recipe_filter_query');

function custom_recipe_rewrite_rule() {
    add_rewrite_rule('^recettes-easy/([^/]*)/?', 'index.php?recipe_label=$matches[1]', 'top');
}
add_action('init', 'custom_recipe_rewrite_rule', 10, 0);


//WORKING CODE

//label filters

<div class="isFilterButtonCloud" >
  <div class="isSidebarTitle">
    Filtres
  </div>
  <div class="categoryInputList"> 
    <form method="get" action="<?php echo esc_url(home_url('/recettes-easy')); ?>" id="recipeFilterForm">
         <button type="submit" name="recipe_label" value="fetes" id="fetesBtn" class="isRecipeFilterBtn">
            Fêtes
         </button> 
           <button type="submit" name="recipe_label" value="facile" id="facileBtn" class="isRecipeFilterBtn">
             Facile
           </button> 
         <button type="submit" name="recipe_label" value="rapide" id="rapideBtn" class="isRecipeFilterBtn">
           Rapide
         </button> 
          <button type="submit" name="recipe_label" value="epice" id="epiceBtn" class="isRecipeFilterBtn">
           Épicé
         </button> 
         <button type="submit" name="recipe_label" value="vegetarien" id="vegetarienBtn" class="isRecipeFilterBtn">
           Végétarien
          </button> 
            <button type="submit" name="recipe_label" value="sans-gluten" id="sansGlutenBtn" class="isRecipeFilterBtn">
             Sans gluten
           </button> 
           <button type="submit" name="recipe_label" value="sans-lactose" id="sansLactoseBtn" class="isRecipeFilterBtn">
              Sans lactose
           </button> 
           <button type="submit" name="recipe_label" value="sans-sucre" id="sansSucreBtn" class="isRecipeFilterBtn">
              Sans sucre
           </button> 
           <button type="submit" name="recipe_label" value="cuisine-du-fenua" id="cuisineDuFenuaBtn" class="isRecipeFilterBtn">
              Cuisine du fenua
           </button> 
           <button type="submit" name="recipe_label" value="cuisine-du-monde" id="cuisineDuMondeBtn" class="isRecipeFilterBtn">
              Cuisine du monde
           </button>
    </form>
  </div>
</div>

<script>
    // Get all checkboxes in the form
    var checkboxes = document.querySelectorAll('#recipeFilterForm input[type=checkbox]');

    // Add an event listener to each checkbox
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener('change', function(e) {
            // Remove 'active' class from all checkboxes
            for (var j = 0; j < checkboxes.length; j++) {
                checkboxes[j].classList.remove('active');
            }

            // Add 'active' class to the clicked checkbox
            if (e.target.checked) {
                e.target.classList.add('active');
                
                // Redirect to the new URL when a checkbox is clicked
                var base_url = "https://www.easymarket.pf/recipe_categorie/";
                window.location.href = base_url + e.target.id;
            }
        });
    }
  
    // Get all buttons in the form
    var buttons = document.querySelectorAll('.isRecipeFilterBtn');

    // Add an event listener to each button
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function(e) {
            // Remove 'active' class from all buttons
            for (var j = 0; j < buttons.length; j++) {
                buttons[j].classList.remove('active');
            }

            // Add 'active' class to the clicked button
            e.target.classList.add('active');
        });
    }
</script>

//category filters

<form id="recipeFilterForm" method="get" action="<?php echo esc_url(home_url('/recettes-easy')); ?>">
<div class="isCategoryCheckboxes">
  <div class="isSidebarTitle">
    Catégories
  </div>
  <div class="categoryInputList"> 
    <nobr>
      <label for="snacking">
        <input type="checkbox" id="snacking"> 
        Snacking
      </label>
    </nobr> 
    <nobr>
      <label for="entree">
        <input type="checkbox" id="entree"> 
        Entrée
      </label>
    </nobr> 
    <nobr>
      <label for="plat">
        <input type="checkbox" id="plat"> 
        Plat
      </label>
    </nobr> 
    <nobr>
      <label for="dessert">
        <input type="checkbox" id="dessert"> 
        Dessert
      </label>
    </nobr> 
    <nobr>
      <label for="boissons">
        <input type="checkbox" id="boissons"> 
        Boissons
      </label>
    </nobr>
  </div>
</div>
</form>

//filtering buttons
function custom_recipe_filter_query($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }

    $recipe_labels = isset($_GET['recipe_label']) ? array_map('sanitize_text_field', $_GET['recipe_label']) : array();

    if (!empty($recipe_labels)) {
        $tax_query = array(
           'taxonomy' => 'recipe_label',
            'field'    => 'slug',
            'terms'    => $recipe_labels,
            'operator' => 'IN',
        );

       $query->set('tax_query', array($tax_query));
    }
}

add_action('pre_get_posts', 'custom_recipe_filter_query');

function custom_recipe_rewrite_rule() {
    add_rewrite_rule('^recettes-easy/([^/]*)/?', 'index.php?recipe_label=$matches[1]', 'top');
    add_rewrite_rule('^recipe_label/([^/]*)/?', 'index.php?recipe_label=$matches[1]', 'top');
}
add_action('init', 'custom_recipe_rewrite_rule', 10, 0);