Woo-commerce shop page removes custom DIVs - woocommerce

Question

I am making a custom theme based on twentytwelve. I am facing a problem regarding woocommerce shop page. I have a page template that work fine. However, when I activate woocommerce plugin and show the shop base page (using my custom page template) it removes all my custom divs and other custom contents. I have followed woocommerce documentation, using both woocommerce.php and action hooks. But it did not produce any result. Here is my code for the page template.
<?php
/**
* Template Name: Front Page Template
*
* Description: A page template that provides a key component of WordPress as a CMS
* by meeting the need for a carefully crafted introductory page. The front page template
* in Twenty Twelve consists of a page content area for adding text, images, video --
* anything you’d like -- followed by front-page-only widgets in one or two columns.
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<div class="rotator">
<ul id="rotmenu">
<?php
$recentposts=get_pages('number=5');
// echo $recentposts;
$ii=0;
if ($recentposts) {
$ii=0;
//foreach($recentposts as $page) {
//setup_postdata($page);
for ($ii=1;$ii<=5;$ii=$ii+1){
//$ii=$ii+1;
$title='r_slideshow_0'.$ii.'_title';
$image='r_slideshow_0'.$ii.'_uploader';
$details='e_slideshow_0'.$ii.'_textarea';
$link='r_slideshow_0'.$ii.'_link';
// echo $page;
// echo $title;
//echo $image;
//echo $details;
//echo of_get_option($image, 'no entry');
?>
<li>
<?php echo of_get_option($title, 'no entry');/*echo $page->post_title;*/ ?>
<div style="display:none;">
<div class="info_image"><?php echo of_get_option($image, 'no entry');?></div>
<div class="info_heading"><?php echo of_get_option($title, 'no entry'); ?></div>
<div class="info_description">
<?php echo of_get_option($details, 'no entry'); ?>
Read Details >><br/>
</div>
</div>
</li>
<?php
//$ii=$ii+1;
}
}
?>
</ul>
<div id="rot1">
<img src="" width="100%" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
<!--#rotator on front static page-->
<?php
if(of_get_option('boxchoice_radio', '0' )){
?>
<!--box content-->
<div class="section_front_page group_front_page">
<div class="col_front_page span_1_of_3">
<img src="<?php echo of_get_option('frontpage_boximage_01' ); ?>"style=" ">
<?php if(of_get_option('frontpage_textarea_01' ) && of_get_option('frontpage_textarea_01' )!='Default Text')
{
?>
<?php echo of_get_option('frontpage_textarea_01' ); ?>
<?php } ?>
<br/>
<?php if(of_get_option('frontpage_linkarea_01' ) && of_get_option('frontpage_linkarea_01' )!='Default')
{
?>
Read More >>
<?php } ?>
</div>
<div class="col_front_page span_1_of_3">
<img src="<?php echo of_get_option('frontpage_boximage_02' ); ?>" style="">
<?php if(of_get_option('frontpage_textarea_02' ) && of_get_option('frontpage_textarea_02' )!='Default Text')
{
?>
<p>
<?php echo of_get_option('frontpage_textarea_02' ); ?>
</p>
<?php } ?>
<br/>
<?php if(of_get_option('frontpage_linkarea_02' ) && of_get_option('frontpage_linkarea_02' )!='Default')
{
?>
Read More >>
<?php } ?>
</div>
<div class="col_front_page span_1_of_3">
<img src="<?php echo of_get_option('frontpage_boximage_03' ); ?>"style=" float:right; width:100%;" >
<br/>
<?php if(of_get_option('frontpage_textarea_03' ) && of_get_option('frontpage_textarea_03' )!='Default Text')
{
?>
<?php echo of_get_option('frontpage_textarea_03' ); ?>
<?php } ?>
<?php if(of_get_option('frontpage_linkarea_03' ) && of_get_option('frontpage_linkarea_03' )!='Default')
{
?>
Read More >>
<?php } ?>
</div>
</div>
<!--#end of box content-->
<?php
} //end of boxes
?>
<!--#end of box content-->
<!--default content on page-->
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-page-image">
<?php the_post_thumbnail(); ?>
</div><!-- .entry-page-image -->
<?php endif; ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'front' ); ?>
<?php get_footer(); ?>
I have used this in my functions.php file to make it woocommerce compatible,
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
echo '<div id="main">';
}
function my_theme_wrapper_end() {
echo '</div>';
}
However, it did not work. Only the product shows up spanning full width on the page and default sidebar lies at its bottom.
I need some help on this. Can you give me any ideas?

Answer 1

Best is that you use the "template overwrite" method:
Copy the woocommerce/templates/ folder inside your theme folder, to yourtheme/woocommerce/
Inside that folder, you can modify the html structure to your heart's content and it will be used instead of woocommerce standard html templates.
Once this is done, open up these two files:
/wp-content/themes/your-theme/woocommerce/shop/wrapper-start.php
/wp-content/themes/your-theme/woocommerce/shop/wrapper-end.php
and modify the html to match yours.

Answer 2

there are two method one is Using woo commerce_content() and other is Using hooks so please follow first method to merge woo commerce in to your theme that documentation for merge woo commerce in to theme if you do not follow it willbe harmful for your theme design .....