Search custom post type result in same template page

Question

I have a saperate search section for products custom post type. Required result within the same page with pagging. and once clicked on any result it show in saperate page. But all in product custom post, product page, product template, product single. Following is the form and little bit of code.

<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="row">
<div class="col-md-3">Search Keyword:</div>
<div class="col-md-3"><input type="text" placeholder="Search Product..."></div>
<div class="col-md-2"><input type="submit" id="searchsubmit" value="Searchi"> <input type="hidden" name="post_type" value="product"></div>
</div>
<div class="row">
<lable for="r1"><input type="radio" name="product-filter" id="r1" checked="chcecked"> Any Words</lable>
<lable for="r2"><input type="radio" name="product-filter" id="r2"> All Words</lable>
<lable for="r3"><input type="radio" name="product-filter" id="r3"> Exact Phrase</lable>
</div>
<em>Search term must be a minimum of 3 characters and a maximum of 20 characters</em>
</form>

following is my custom post type

add_action('init', 'product_register');
function product_register() {
    $args = array(
    'label' => __('Products'),
    'singular_label' => __('Product'),
    'public' => true,
    'show_ui' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => true,
    'supports' => array('title', 'editor', 'thumbnail')
    );

    register_post_type('product', $args);
}
add_action('admin_init', 'admin_init');
register_taxonomy('catalog', array('product'),
    array('hierarchical' => true,
    'label' => 'Catalogs',
    'singular_label' => 'Catalog',
    'rewrite' => true)
);

function admin_init() {
    add_meta_box('prodInfo - meta', 'Product Options', 'meta_options', 'product', 'side', 'low');
}
function meta_options() {
    global $post;
    $custom = get_post_custom($post -> ID);
    $price = $custom['price'][0];
    echo '<label> Price: </label><input type="text" name="price" value="'. $price .'"/ > ';
}
function save_price() {
        global $post;
        update_post_meta($post->ID, 'price', $_POST['price']);
}
add_action('save_post', 'save_price');

How can I show result in a div? Also it direct me to a page with specific result. Please advice or guide?

Answer 1

1.Create a single-(cpt).php in your theme, duplicate a your single.php and rename it as per your CPT name, so this page template will use to show your CPT queries.

For more details refer the wordpress codex. https://codex.wordpress.org/Category_Templates

To create CPT arcive page follow the same proceduare.

archive-(cpt).php

For Taxonimies

taxonomy-(cpt).php

CPT is your custom post type name.

Check below article to get search results VIA ajax. https://premium.wpmudev.org/blog/how-to-use-ajax-in-wordpress-to-load-search-results/?ptm=c&utm_expid=3606929-108.O6f5ypXuTg-XPCV9sY1yrw.2&utm_referrer=https%3A%2F%2Fwww.google.com%2F