Category dropdown and search on mobile

Hey whdsolutions,

Thank you for the inquiry.

There is no option for this by default, but you can try this code in the functions.php file:

function av_search_and_category_dropdown() {
    if (is_shop() || is_product_category() || is_product_taxonomy()) {
        echo '<div class="av-mobile-search-category-dropdown">';
        ?>
        <form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url(home_url('/')); ?>">
            <div style="display: flex; flex-direction: column;">
                <select name="product_cat" id="product_cat" style="width: 100%;">
                    <option value=""><?php _e('Select Category', 'woocommerce'); ?></option>
                    <?php
                    $categories = get_terms('product_cat');
                    foreach ($categories as $category) {
                        echo '<option value="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</option>';
                    }
                    ?>
                </select>
                <input type="text" placeholder="<?php _e('Search products...', 'woocommerce'); ?>" name="s" id="s" />
                <input type="hidden" name="post_type" value="product" />
                <button type="submit"><?php _e('Search', 'woocommerce'); ?></button>
            </div>
        </form>
        <?php
        echo '</div>';
    }
}
add_action('woocommerce_before_shop_loop', 'av_search_and_category_dropdown');

function av_prevent_single_product_redirect($query) {
    if (!is_admin() && $query->is_main_query() && $query->is_search() && is_search()) {
        $query->set('post_type', array('product'));
        $query->set('posts_per_page', 12); 
    }
    remove_action('template_redirect', 'wc_template_redirect'); 
}
add_action('pre_get_posts', 'av_prevent_single_product_redirect');

Then add this css code to only display the form on mobile view:

/* Hide search and category dropdown on larger screens */
.av-mobile-search-category-dropdown {
    display: none;
}

/* Show on mobile screens only */
@media (max-width: 768px) {
    .av-mobile-search-category-dropdown {
        display: block;
        padding: 10px;
        background-color: #f9f9f9;
    }
}

Best regards,
Ismael