Problems with Woocommerce Theme Integration

Hi. I have just recently installed the Woocommerce plugin to use it on my self-hosted website that uses Shoreditch Theme.

As the Theme is not integrated with Woocommerce before, I tried to integrate woocommerce with my theme following the steps shown here.
https://docs.woothemes.com/document/third-party-custom-theme-compatibility/

However, in my page.php,
my loop does not start with <?php if ( have_posts() ) :

Instead, it looks something like this:

get_header(); ?>

<?php
while ( have_posts() ) : the_post();

get_template_part( ‘template-parts/content’, ‘hero’ );

endwhile; // End of the loop.
?>

<div class=”site-content-wrapper”>

<div id=”primary” class=”content-area”>
<main id=”main” class=”site-main” role=”main”>

<?php
while ( have_posts() ) : the_post();

get_template_part( ‘template-parts/content’, ‘page’ );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}

endwhile; // End of the loop.
?>

</main><!– #main –>
</div><!– #primary –>

<?php get_sidebar(); ?>

</div><!– .site-content-wrapper –>

(1) Can i understand where should i replace with <?php woocommerce_content(); ?> here?

(2) I have already added the hooks and declared Woocommerce support and right now in my SHOP page, the Product Image, “Read More” Button is not aligned but the Product Description is.

Hope to receive a response! : )
Thanks in advance.

https://ww.wp.xz.cn/plugins/woocommerce/