Porto theme compatibility

Porto theme comes with a customization for YITH WooCommerce Ajax Search Free, so if you install the premium version of Search plugin you will have some errors and the premium search will not work.

The followings are the steps to fix the issue

1. Copy the premium template from /wp-content/plugins/yith-woocommerce-ajax-search-premium/templates/yith-woocommerce-ajax-search.php the plugin premium template to you child theme in /wp-content/themes/porto-child/woocommerce/yith-woocommerce-ajax-search.php
2. Move All Categories to right side. Be defult the premium template has the All Categories Select on the left side of the search bar, so if you want to have it as Porto theme on the right side, you will also need to edit the new premium template /wp-content/themes/porto-child/woocommerce/yith-woocommerce-ajax-search.php you have to move the lines 22-54 after the search-navigation div
3. Change button Search to Search icon. The new premium template also use default Search text button, to change it as a Search Icon add this codes to your child theme functions.php file (at the end of the file)

add_filter('yith_wcas_submit_as_input', '__return_false');

add_filter( 'yith_wcas_submit_label', 'my_yith_wcas_submit_label' );

function my_yith_wcas_submit_label() {

    return '<i class="fa fa-search"></i>';

}

As final step you will probably need some custom css code in order to get a better style for premium template this codes need to be added in **appearance > customize > additional CSS**

/* ajax search premium */

#header form#yith-ajaxsearchform > div.yith-ajaxsearchform-container > * {
  display: inline-block;
  vertical-align: top;
  margin-left: -5px
}

#header form#yith-ajaxsearchform > div.yith-ajaxsearchform-container  input {
  height: 42px;
  border-right: none;
  border-color: rgb(43, 156, 213);
  border-radius: 25px 0 0 25px;
  width: 250px;
}

#header form#yith-ajaxsearchform > div.yith-ajaxsearchform-container  input {
  color: #f60;
}

#header form#yith-ajaxsearchform  #yith-searchsubmit {
  height: 42px;
  background-color: #fff;
  color: #f60;
  border-color: rgb(43, 156, 213);
  border-radius: 0 25px 25px 0;
  width: 50px;
}

#header form#yith-ajaxsearchform > div.yith-ajaxsearchform-container > .yith-ajaxsearchform-select select {
    width: 150px;
    border-color: rgb(43, 156, 213);
    border-radius: 0;
    color: #f60;
    height: 42px;
}

#header form#yith-ajaxsearchform  .screen-reader-text {
  display: none;
}

#header form#yith-ajaxsearchform .autocomplete-suggestions {
  width: 350px !important;
}

Please note: this css codes could be need some fixes due to different Porto header options