Astra theme

This article explains how to replace the native search bar in the Astra theme.

Replacing is based on editing the Astra child theme. Make sure you have installed the Astra child theme. If not, install it.

Replacing search bar

Open functions.php file in the child theme and add there following code:

add_filter('astra_get_search_form', function ($form) {

    if (defined('DGWT_WCAS_NAME')) {
        $form = '<div class="search-form">';
        $form .= do_shortcode('[wcas-search-form]');
        $form .= '</div>';
    }

    return $form;
});

add_filter('wp_head', function () {
    if (defined('DGWT_WCAS_NAME')) {
        ?>
        <style>
            .ast-dropdown-active .search-form {
                padding-left: 0 !important;
            }

            .ast-dropdown-active .ast-search-icon {
                display: none !important;
            }
        </style>
        <?php
    }
});