Custom Woocommerce Search Result Page should look like shop layout - wordpress

Question

I am creating custom search feature in a theme. I have created a form on the homepage and with action set to a custom php search page. Form looks like this somewhat. I AM GETTING Class WP_Query not found Error. How to make it work?
The woo-search.php looks like this. I am using this as a template file. forms action attribute links to the page which has this template applied
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
* Template Name: Search Page
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php
global $wp_query;
global $wpdb;
if (isset($_POST['submit'])) {
// echo "Submitted <br>";
$product_kinds = $_POST['product-kinds'];
echo $product_kinds;
$the_query = new WP_Query(array('category_name' => '2-wheeler-batteries'));
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
}else{
echo "Get Away";
}
?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
For demonstration purpose the query inside wp_query is static. I want to display the search result just like the shop page looks like, I mean with product image, then title, then price and add to cart button. With above code I will need to fetch all seperately and code it to look like the shop page. How do I fetch Woocommerce layout in this search results. What changes should I make in the while loop.