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]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer