Porto Theme – Replace default search bar

Hello,
It will be included in the plugin core, but at this moment you can try the following code. Add the following code in the child theme’s functions.php file.

/** START | AJAX Search for WooCommerce (https://ajaxsearch.pro/) */

add_filter('porto_search_form_content', function ($html) {

    $html = do_shortcode('[wcas-search-form]');

    return $html;
});

add_filter('dgwt/wcas/scripts/mobile_breakpoint', function () {
    return 768;
});

add_action('wp_head', function () {
    ?>
    <style>
        .header-center .dgwt-wcas-search-wrapp {
            width: 440px;
        }

        @media screen and (max-width: 991px) {
            #header .searchform-popup .search-toggle {
                display: none;
            }
        }

        @media screen and (max-width: 767px) {
            #header .searchform-popup .search-toggle {
                display: block;
            }

            .header-center .dgwt-wcas-search-wrapp {
                display: none !important;
            }
        }
    </style>
    <?php
});

add_action('wp_footer', function () {
    ?>
    <script>
        (function ($) {

            $('.search-toggle').on('click', function (e) {

                var $wrapp = $(this).closest('.header-center');
                var $mobileHandler = $wrapp.find('.js-dgwt-wcas-enable-mobile-form');

                if ($mobileHandler.length > 0) {
                    $mobileHandler[0].click();
                }

            });

        }(jQuery));
    </script>
    <?php
});
/** END | AJAX Search for WooCommerce */

Best
Damian Góra