WooCommerce question

Hello wordpressers! I have an interesting issue going on with the WooCommerce plugin. and this is how it starts.

I install the plugin, and guess what, of course it is not compatible with my current theme so it looks like a mess. I start looking for solutions.

I come across this useless website that WooCommerce provides:
https://docs.woothemes.com/document/third-party-custom-theme-compatibility/

I say useless because the instructions go halfway and of course, they want you to buy their theme, you gotta make money somehow. (I understand)

So right now I decided to do the “Replace the Loop” fix which looks easier. So here is my unchanged code:

<?php get_header(); ?>

<?php get_template_part('includes/breadcrumbs'); ?>

<?php get_template_part('includes/top_info'); ?>

<div id="content" class="clearfix">

<div id="left-area">

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

<div class="entry post clearfix">

<?php if (get_option('chameleon_page_thumbnails') == 'on') { ?>

<?php 

$thumb = '';

$width = 186;

$height = 186;

$classtext = 'post-thumb';

$titletext = get_the_title();

$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Entry');

$thumb = $thumbnail["thumb"];

?>

<?php if($thumb <> '') { ?>

<div class="post-thumbnail">

<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>

<span class="post-overlay"></span>

</div> <!-- end .post-thumbnail -->

<?php } ?>

<?php } ?>

<?php the_content(); ?>

<?php wp_link_pages(array('before' => '<p><strong>'.esc_html__('Pages','Chameleon').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

<?php edit_post_link(esc_html__('Edit this page','Chameleon')); ?>

</div> <!-- end .entry -->

<?php if (get_option('chameleon_show_pagescomments') == 'on') comments_template('', true); ?>

<?php endwhile; endif; ?>

</div> <!-- end #left-area -->

<?php get_sidebar(); ?>

</div> <!-- end #content -->

<?php get_footer(); ?>

Then I changed what the website says the following way:

<?php get_header(); ?>

<?php get_template_part('includes/breadcrumbs'); ?>

<?php get_template_part('includes/top_info'); ?>

<div id="content" class="clearfix">

<div id="left-area">

<?php woocommerce_content(); ?> // Replaced

<div class="entry post clearfix">

<?php if (get_option('chameleon_page_thumbnails') == 'on') { ?>

<?php 

$thumb = '';

$width = 186;

$height = 186;

$classtext = 'post-thumb';

$titletext = get_the_title();

$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Entry');

$thumb = $thumbnail["thumb"];

?>

<?php if($thumb <> '') { ?>

<div class="post-thumbnail">

<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>

<span class="post-overlay"></span>

</div> <!-- end .post-thumbnail -->

<?php } ?>

<?php } ?>

<?php the_content(); ?>

<?php wp_link_pages(array('before' => '<p><strong>'.esc_html__('Pages','Chameleon').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

<?php edit_post_link(esc_html__('Edit this page','Chameleon')); ?>

</div> <!-- end .entry -->

<?php if (get_option('chameleon_show_pagescomments') == 'on') comments_template('', true); ?>

<?php woocommerce_content(); ?> // Replaced

</div> <!-- end #left-area -->

<?php get_sidebar(); ?>

</div> <!-- end #content -->

<?php get_footer(); ?>

What happens next and I am not being able to solve is here:

https://www.blucable.com

The content on the Services page duplicates and shows the description of one of the products in the bottom…

Any clues on how to fix this? thanks guys!