Custom category link bar woocommerce wrong query url

I have the following code for a custom ‘search bar’ or ‘category link 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/. Accually the andora (&product_cat=product_cat) part in the link is being rewritten i think.

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 assume after the var search_url is executed the url should be rewritten into the userfriendly url?

I have understood that woocommerce should rewrite this url for me, but im not sure how that works.

this is the website where it is showing https://www.snowtripper.nl/

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" data-action="get_subcategories">
                <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;" data-action="get_subsubcategories">
                <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();
                var action = $(this).data('action');

                if(category && action){
                    $.ajax({
                        url: '<?php echo admin_url('admin-ajax.php'); ?>',
                        type: 'POST',
                        data: {
                            action: action,
                            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();
                var action = $(this).data('action');

                if(subcategory && action){
                    $.ajax({
                        url: '<?php echo admin_url('admin-ajax.php'); ?>',
                        type: 'POST',
                        data: {
                            action: action,
                            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(); ?>/product-category/';

                if(product_cat) {
                    search_url += product_cat + '/';
                }

                if(product_subcat){
                    search_url += product_subcat + '/';
                }

                if(subsubcategory){
                    search_url += 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]