自定义Woocommerce搜索结果页面应该看起来像商店布局

Question

我正在主题中创建自定义搜索功能。我在主页上创建了一个表单，并将操作设置为自定义php搜索页面。表格看起来有点像。我正在Class WP_Query not发现错误。如何使它工作？

woo-search.php看起来像这样。我使用它作为模板文件。表单操作属性链接到已应用此模板的页面

<?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(); ?>

出于演示目的，wp_query中的查询是静态的。我想显示搜索结果，就像商店页面看起来一样，我的意思是产品图片，然后标题，然后价格和添加到购物车按钮。使用上面的代码我将需要单独获取所有代码并将其编码为商店页面。如何在此搜索结果中获取Woocommerce布局。我应该在while循环中做出哪些更改。