Query Woocommerce product with bootstrap modal in custom t..

<?php
/*
Template Name: Mobile Version
*/
get_header(); global $product;
$categorydesign = get_option( 'custom_category_options', array() );
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<script>
/*
if ( window.width > 768) {
document.location = "https://www.theitaliankitchen.com.bd";

}
*/

</script>

    <?php
        /**
         * tokoo_before_main_content hook
         *
         * @hooked tokoo_wrapper_start - 10 (outputs opening divs for the content)
         */
        do_action( 'tokoo_before_main_content' );
     ?>

    <div class="shopmobile-version-area ">
        <div class="shop-mobile-version column ">
            <div class="msite-title-area fix">
                <h2><a href="<?php echo bloginfo('home'); ?>"><?php echo bloginfo('name'); ?></a></h2>
            </div>
            <!-- Category Design Area-->
            <div class="category-design-area fix">

                <?php

                if ( ! empty( $categorydesign['category_designgroup'] ) ) :
                    foreach ( $categorydesign['category_designgroup'] as $catdesign ) : ?>
                    <?php
                        $category_info = $catdesign['category_design_name'];
                        $cat_name = get_term_by('slug', $category_info, 'product_cat'); // get name by slug
                        $cat_link = get_term_link($cat_name->term_id); // get term link by id
                        $icon_link = $catdesign['category_design_icon'];
                ?>


                    <!--Single Category Item-->
                    <div class="single-category-item">
                        <a href="<?php echo $cat_link; ?>"><img src="<?php echo $icon_link;?>" alt="<?php echo $cat_name->name;?>"></a>
                        <h4> <a href="<?php echo $cat_link; ?>"><?php echo $cat_name->name;?></a> </h4>
                    </div><!--/ Single Category Item-->

                <?php endforeach; endif; ?>

            </div><!--/ Category Design Area-->

            <div class="mproduct-area fix">

            <?php

                $mproduct = new WP_Query(array(
                        'post_type'     => 'product',
                        'posts_per_page'=> 10,
                ));
                if($mproduct->have_posts()) : while($mproduct->have_posts()) : $mproduct->the_post(); ?>

                <!--Single Product for Mobile Page-->
                <div class="msingle-product fix">
                    <div class="msingle-product-image">
                        <a href="<?php the_permalink(); ?>">
                        <?php if(has_post_thumbnail( get_the_ID())){

                             echo get_the_post_thumbnail( get_the_ID(), 'com_product_img' );
                        } else {
                            echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" />';
                        }
                        ?></a>
                    </div>
                    <div class="mproduct-price">
                        <h2><strong>Price : </strong> <?php echo $product->get_price_html(); ?></h2>
                    </div>
                    <div class="mproduct-name">
                        <h2><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( $product->get_title() ) ?>"><?php echo esc_attr( $product->get_title() ) ?></a></h2>
                    </div>
                    <div class="mproduct-add-to-cart">
                        <?php woocommerce_template_loop_add_to_cart(); ?>
                        <!-- Modal -->
                        <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
                          <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel"><?php the_title(); ?></h4>
                              </div>
                              <div class="modal-body">

                                <div class="msingle-product-image product_img_model">
                                    <a href="<?php the_permalink(); ?>">
                                    <?php if(has_post_thumbnail( get_the_ID())){

                                         echo get_the_post_thumbnail( get_the_ID(), 'com_product_img' );
                                    } else {
                                        echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" />';
                                    }
                                    ?></a>
                                </div>

                                <div class="mproduct-price">
                                    <h2><strong>Price : </strong> <?php echo $product->get_price_html(); ?></h2>
                                </div>
                                <div class="product_variable_list">


                                <?php wc_get_template_part('content', 'single-product'); ?>


                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Continue Shipping</button>
                              </div>
                            </div>
                          </div>
                        </div>
                    </div>
                </div><!--/ Single Product for Mobile Page-->


            <?php endwhile; endif;?>
            </div>

        </div>
    </div>

    <?php
        /**
         * tokoo_after_main_content hook
         *
         * @hooked tokoo_wrapper_end - 10 (outputs closing divs for the content)
         */
        do_action( 'tokoo_after_main_content' );
     ?>


<?php get_footer(); ?>