Custom searchbar woocommerce wrong query url

I have the following code for a custom search bar on the frontpage of my wordpress website. It shows the categories of woocommerce. The “var search_url” points to the category/shop page. this goes well, just not with the right query or url. I get this /product-category/andorra/?product_subcat=grandvalira&product_subsubcat=el-tarter and it should be like this /product-category/andorra/grandvalira/el-tarter/.

If i enter this in google chrome bar /product-category/product_cat=product_cat/?product_cat=grandvalira&product_cat=el-tarter it rewrites the url and goes to the requiered category. So i asume the var search_url should output like this but it still outputs like /product-category/andorra/?product_cat=product_subcat&product_cat=product_subsubcat?

Does anyone have an idea where the problem could be? i’m at a loss.

function custom_search_bar_shortcode() {
    ob_start(); ?>

    <form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url() ); ?>">
        <?php
            // Get top-level product categories
            $product_categories = get_terms( array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => true,
                'parent'     => 0,
            ) );

            if ( $product_categories ) :
        ?>
            <select name="product_cat" id="product_cat">
                <option value=""><?php esc_html_e( 'Kies Land', 'text-domain' ); ?></option>
                <?php foreach ( $product_categories as $category ) : ?>
                    <option value="<?php echo esc_attr( $category->slug ); ?>"><?php echo esc_html( $category->name ); ?></option>
                <?php endforeach; ?>
            </select>

            <select name="product_subcat" id="product_subcat" style="display: show;">
                <option value=""><?php esc_html_e( 'Kies Skigebied', 'text-domain' ); ?></option>
            </select>

            <select name="product_subsubcat" id="product_subsubcat" style="display: show;">
                <option value=""><?php esc_html_e( 'Kies Bestemming', 'text-domain' ); ?></option>
            </select>

            <button type="submit" class="button_front_search"><i class="fas fa-search"></i><?php esc_html_e( '', 'text-domain' ); ?></button>
        <?php endif; ?>
    </form>

    <script>
        jQuery(document).ready(function($) {
        $('#product_cat').change(function(){
            var category = $(this).val();
            if(category){
                $.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    type: 'POST',
                    data: 'action=get_subcategories&category='+category,
                    success:function(data){
                        $('#product_subcat').html(data);
                        $('#product_subcat').show();
                    }
                });
            } else {
                $('#product_subcat').html('<option value=""><?php esc_html_e( 'Kies Skigebied', 'text-domain' ); ?></option>');
                $('#product_subsubcat').html('<option value=""><?php esc_html_e( 'Kies Bestemming', 'text-domain' ); ?></option>');
                $('#product_subcat').show();
                $('#product_subsubcat').show();
            }
        });

        $('#product_subcat').change(function(){
            var subcategory = $(this).val();
            if(subcategory){
                $.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    type: 'POST',
                    data: 'action=get_subsubcategories&subcategory='+subcategory,
                    success:function(data){
                        $('#product_subsubcat').html(data);
                        $('#product_subsubcat').show();
                    }
                });
            } else {
                $('#product_subsubcat').html('<option value=""><?php esc_html_e( 'Kies Bestemmingen', 'text-domain' ); ?></option>');
                $('#product_subsubcat').show();
            }
        });

        // Update form action URL based on the selected subsubcategory
        $('#product_subsubcat').change(function(){
    var subsubcategory = $(this).val();
    var product_cat = $('#product_cat').val();
    var product_subcat = $('#product_subcat').val();
    var search_url = '<?php echo home_url(); ?>/?s=&post_type=product';

    if(product_cat) {
        search_url += '&product_cat=' + encodeURIComponent(product_cat);
    }

    if(product_subcat){
        search_url += '&product_cat=' + encodeURIComponent(product_subcat);
    }

    if(subsubcategory){
        search_url += '&product_cat=' + encodeURIComponent(subsubcategory);
    }

    $('.woocommerce-product-search').attr('action', search_url);
});
    });
    </script>

    <?php
    $output = ob_get_clean();
    return $output;
}
add_shortcode( 'custom_search_bar', 'custom_search_bar_shortcode' );

// AJAX function to get subcategories
add_action('wp_ajax_get_subcategories', 'get_subcategories_callback');
add_action('wp_ajax_nopriv_get_subcategories', 'get_subcategories_callback');

function get_subcategories_callback() {
    $category = $_POST['category'];
    $subcategories = get_terms( array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => true,
        'parent'     => get_term_by('slug', $category, 'product_cat')->term_id,
    ) );

    if ( $subcategories ) {
        $output = '<option value="">' . esc_html__( 'Kies Skigebied', 'text-domain' ) . '</option>';
        foreach ( $subcategories as $subcategory ) {
            $output .= '<option value="' . esc_attr( $subcategory->slug ) . '">' . esc_html( $subcategory->name ) . '</option>';
        }
        echo $output;
    }

    wp_die();
}

// AJAX function to get subsubcategories
add_action('wp_ajax_get_subsubcategories', 'get_subsubcategories_callback');
add_action('wp_ajax_nopriv_get_subsubcategories', 'get_subsubcategories_callback');

function get_subsubcategories_callback() {
    $subcategory = $_POST['subcategory'];
    $subsubcategories = get_terms( array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => true,
        'parent'     => get_term_by('slug', $subcategory, 'product_cat')->term_id,
    ) );

    if ( $subsubcategories ) {
        $output = '<option value="">' . esc_html__( 'Kies Bestemming', 'text-domain' ) . '</option>';
        foreach ( $subsubcategories as $subsubcategory ) {
            $output .= '<option value="' . esc_attr( $subsubcategory->slug ) . '">' . esc_html( $subsubcategory->name ) . '</option>';
        }
        echo $output;
    }

    wp_die();
}

The page I need help with: [log in to see the link]