Creating a custom Woocommerce product modal on click - php

Question

I have created a basic HTML/jQuery structure for a modal that will pop up when clicked on. I'm in the process of integrating Woocommerce into my site and am unsure as to how I can do the following:
Have modal load respective product info
Integrate into a Woocommerce loop
Here is my HTML for the skeleton of what I'm trying to achieve:
<div class="col-md-4"><img src="<?php bloginfo('stylesheet_directory'); ?>/media/temp_product_images/Alto-183x300.jpg" alt="Product Img" class="product-img" data-toggle="modal" data-target="#myModal">
<p class="product-img-title text-center">Alto</p>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" 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">×</span></button>
<h4 class="modal-title text-center" id="myModalLabel">Alto</h4> </div>
<div class="modal-body" id="modal-body-one">
<div class="row">
<div class="col-sm-4"> <img src="<?php bloginfo('stylesheet_directory'); ?>/media/temp_product_images/Alto-183x300.jpg" alt="Modal Product Img" id="product-img"> </div>
<div class="col-sm-7">
<h5>Colours</h5>
<div class="scroll-container">
<div class="row">
<div class="col-xs-4">
<div class="selected-product-color"><img src="<?php bloginfo('stylesheet_directory'); ?>/media/temp_product_images/MACASSA.jpg" alt="Product Colour">
<p>Macassa</p>
</div>
</div>
</div>
<!-- End of Test Case -->
</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn flip"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<!-- Prices -->
<div class="modal-body" id="modal-body-two">
<div class="row">
<div class="col-sm-11">
<div class="row">
<h5 id="modal-prices">Download Price List</h5></div>
<div class="row">
<?php $my_query = new WP_Query('p=47');
while($my_query->have_posts()){
$my_query->the_post();
the_content();
} ?>
</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn flip"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="modal-footer"> Get Quote </div>
</div>
</div>
</div>
<!-- End of Modal -->
</div>
And here is my jQuery:
//Modal Change Content
$('#modal-body-two').hide();
$('.flip').on('click', function () {
$('#modal-body-one, #modal-body-two').toggle()
});
Is there a way that I can display the product info on click within a modal using Woocommerce? Thanks