WordPress change search results - php

Question

I have got the problem that my WordPress theme ("Sydney") is displaying the search results wrong. Instead of just listing posts I want to display WooCommerce products only.
Those should be ordered in a nice grid as shown in this picture:
.
At the moment the results are listed like this
.
How can I change the way the search results are displayed?
At the moment my search.php is looking like this:
<?php get_header(); ?>
<div id="primary" class="content-area col-md-9">
<main id="main" class="post-wrap" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h3><?php printf( __( 'Search Results for: %s', 'sydney' ), '<span>' . get_search_query() . '</span>' ); ?></h31>
</h3>
</header><!-- .page-header -->
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/**
* Run the loop for the search to output the results.
* If you want to overload this in a child theme then include a file
* called content-search.php and that will be used instead.
*/
get_template_part( 'content', 'search' );
?>
<?php endwhile; ?>
<?php the_posts_navigation(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
Thank you guys a lot!
** UPDATE
The solution provided by kashalo partly worked, but search results still look slightly different from the product page and are listed in only one column instead of a grid.
** UPDATE
The solution suggested by Alexander Wigmore looks almost the way I wanted it so look like. The only Problem with copying the page.phpin the search.phpis that the products are still getting displayed wheird, but not when they are displayed in the category they fit in. For example: When searching for saat the results are displaying the products at first with text only, but normaly under the Saatgut category.

Answer 1

my advise is not to directly modify the search file of wp or theme template but is a good practice to work with the child theme. For the design display of the result you can play a little with css to customize it as you want, instead for the results to show only the products you can use any filter builded on the theme you are using (if it have) or create yourself a function to filter the results (also called hooks).
An example for filtering results is like the above code:
add_action( 'pre_get_posts', 'filter_woocommerce_products' ); // the hook
function filter_woocommerce_products( $query ) { // the function
if( ! is_admin() && is_search() && $query->is_main_query() ) {
// verify if can use the search function and the search string is from the search call
$query->set( 'post_type', 'product' ); // filter the posts with type products that corrispond to woocommerce products.
}
}
and this function must be saved on the function.php file of your theme or the child theme.
For more information i suggest you to read more about child theme and the pre_get_posts documentation on the wp page.
Hope it helps and feel free to ask.

Answer 2

You'll want to modify the way search is handled by Wordpress.
This can easily be done by adding an "action", add the below code to your functions.php file.
function searchfilter($query) {
if ($query->is_search && !is_admin() ) {
$query->set('post_type',array('product'));
}
return $query;
}
add_filter('pre_get_posts','searchfilter');
This will then make the search page only show products. It's worth noting that you can add other post types back in via the array in this line: $query->set('post_type',array('product'));.