title: WordPress - Custom Product Search Option in Home Page
body: <p>I've a <code>WordPress</code> website and am trying to add a custom search option in the website's home page as well in the header section. Unfortunately I can't see any option to include it from the website's dashboard and decided to follow the link to create a custom one as follows: </p>
  
  <p><a href="https://businessbloomer.com/woocommerce-add-custom-search-bar-headerfooter" rel="nofollow noreferrer">Tutorial Link - Custom Search</a> 
  <br/><br/>and this is the code that I've tried same as the tutorial:</p>
  
  <pre><code>add_action('tickercontainer','add_search_to_footer'); //Guessinghere I've to declare the div class
  
  function add_search_to_footer() {
  get_search_form();
  }
  
  function SearchFilter($query) {
  if ( !is_admin() &amp;&amp; $query-&gt;is_search ) {
  $query-&gt;set('post_type', 'post'); //OR USE 'PRODUCT'
  }
  return $query;
  }
  
  add_filter('pre_get_posts','SearchFilter');
  
  function storefront_search_form_modify( $html ) {
      return str_replace( array('Search &amp;hellip;','Search'), array('WooCommerce Hooks, Storefront Theme, Google AdWords...','Search Article'), $html );
  }
  
  add_filter( 'get_search_form', 'storefront_search_form_modify' );
  
  function new_nav_menu_items($items) {
      $searchicon = '&lt;li class="search"&gt;&lt;a href="#colophon"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;';
      $items = $items . $searchicon;
      return $items;
  }
  
  add_filter( 'wp_nav_menu_additional-resources_items', 'new_nav_menu_items' );
  </code></pre>
  
  <p>Though I am not sure what I am missing here and would expect some ideas to implement in an appropriate way.</p>
  
  <p><strong>Note</strong>: Right now, after including the code above, I can't see the search option in the website. </p>