Autusin theme

This article explains how to replace the native search bar in the Autusin theme by magentech.

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

Replacing search bar

#1 Create the following file in your child theme

/wp-content/themes/autusin-child-theme/widgets/sw_top/searchcate.php

#2 Add the following content to the searchcate.php file.

<div class="top-form top-search">
    <div class="topsearch-entry">
        <?php echo do_shortcode('[wcas-search-form]'); ?>
    </div>
</div>
<script>
    jQuery(document).ready(function ($) {

        $('.search-cate .icon-search').on('click', function () {
            var $input = $('.topsearch-entry .dgwt-wcas-search-input');
            if ($input.length > 0) {
                setTimeout(function(){
                    $input.focus();
                }, 100);

            }
        });

        $('.mobile-search .icon-seach, .footer-search a').on('click', function (e) {
            e.preventDefault();

            var $wrapper = $(this).parent();
            $wrapper.find('.widget-inner').hide();

            var $input = $wrapper.find('.js-dgwt-wcas-enable-mobile-form');
            if($input.length > 0){
                $input[0].click();
            }

        });

    });
</script>

#3 Add the following CSS to your functions.php file in the child theme

add_action( 'wp_head', function () {
  ?>
  <style>
    .search-cate .top-form.top-search {
      min-width: 600px;
    }
    .search-cate .top-form.top-search .topsearch-entry input {
      height: 60px;
    }

    @media (max-width: 768px) {
      .search-cate .top-form.top-search {
        min-width: 320px;
      }
    }
  </style>
  <?php
} );