Replace header Avada search with YITH WooCommerce Ajax Search

To replace the header search widget of Avada theme with YITH WooCommerce AJAX Search, it’s necessary to follow this procedure:

first of all, we need to add this code to the functions.php file of Avada (better if it is a child) so to remove the Avada search: 

//Remove the Avada default search
remove_filter( 'wp_nav_menu_items', 'avada_add_search_to_main_nav', 20 );

 then, we add our custom widget to the header by adding the following snippet: 

//Add our custom search
add_filter( 'wp_nav_menu_items', 'my_yith_search_to_avada_main_nav', 20, 4 );

if ( ! function_exists( 'my_yith_search_to_avada_main_nav' ) ) {
    function my_yith_search_to_avada_main_nav( $items, $args ) {


        // Disable woo cart on ubermenu navigations.
        $ubermenu = ( function_exists( 'ubermenu_get_menu_instance_by_theme_location' ) && ubermenu_get_menu_instance_by_theme_location( $args->theme_location ) );

        if ( 'v6' !== Avada()->settings->get( 'header_layout' ) && false === $ubermenu ) {
            if ( 'main_navigation' == $args->theme_location || 'sticky_navigation' == $args->theme_location ) {
                if ( Avada()->settings->get( 'main_nav_search_icon' ) ) {
                    $search_label = esc_attr__( 'Search', 'Avada' );

                    $items           .= '<li class="fusion-custom-menu-item fusion-main-menu-search">';
                    $highlight_class = '';
                    if ( 'bar' === Avada()->settings->get( 'menu_highlight_style' ) ) {
                        $highlight_class = ' fusion-bar-highlight';
                    }
                    $items .= '<a class="fusion-main-menu-icon' . $highlight_class . '" href="#" aria-hidden="true" aria-label="' . $search_label . '" data-title="' . $search_label . '" title="' . $search_label . '"></a>';
                    $items .= '<div class="fusion-custom-menu-item-contents">';
                    $items .= do_shortcode( '[yith_woocommerce_ajax_search]' );
                    $items .= '</div>';
                    $items .= '</li>';
                }
            }
        }

        return $items;
    }
}

add_filter( 'get_search_form', 'my_yith_search_to_avada_mobile_nav' );
if ( ! function_exists( 'my_yith_search_to_avada_mobile_nav' ) ) {
    function my_yith_search_to_avada_mobile_nav() {
        return do_shortcode( '[yith_woocommerce_ajax_search]' );
    }
}

 now our new widget is visible in the header but we need to adjust its style. So, by adding the next snippet, we can make it look alike the original widget: 

//Customize search button aspect
add_filter( 'yith_wcas_submit_as_input', '__return_false' );
add_filter( 'yith_wcas_submit_label', 'my_yith_wcas_submit_label' );
if ( ! function_exists( 'my_yith_wcas_submit_label' ) ) {
    function my_yith_wcas_submit_label() {
        return '<i class="fa fa-search"></i>';
    }
}

//Customize search box aspect
add_action( 'wp_enqueue_scripts', 'my_yith_wcas_style' );
if ( ! function_exists( 'my_yith_wcas_style' ) ) {
    function my_yith_wcas_style() {

        $css = '
   .fusion-main-menu .fusion-main-menu-search .fusion-custom-menu-item-contents{
       width:300px!important;
   }
  
   .fusion-mobile-menu-search .yith-ajaxsearchform-container{
           width:275px!important;
   }

   input#yith-s {
       height: 29px;
       width: 219px;
       background: #ffffff;
       margin: 0;
       border: 1px solid #d2d2d2;
       border-right: 0;
       padding: 0 15px;
       font-size: 13px;
   }
  
   .fusion-mobile-menu-search .yith-ajaxsearchform-container input#yith-s{
           width:245px!important;
   }

   button#yith-searchsubmit {
      height: 29px;
      width: 29px;
      float: right;
      border: 0 none;
      background: #000000;
     color: #ffffff;
     font-size: 1em;
  }

  .autocomplete-suggestions {
      margin-top: 3px;
      width: 248px!important;
  }

   #yith-searchsubmit:hover {
       background-color:' . Avada()->settings->get( 'primary_color' ) . ';
   }';
        wp_add_inline_style( 'yith_wcas_frontend', $css );
    }
}