How to Customize Woocommerce Single Product page layout ??

, , ,
woocommerce_custom_img

Motto: Client wants to change the layout of single product page of Woocommerce, the challenge is when we upgrade the Woocommerce plugin, it will overwrite all the code files so customization will be removed. So we need to find out the way by which we can customize the Woocommerce & we can upgrade it by just once click from WordPress back end.

One project we customized the layout of single product page and we upgraded the plugin to latest stable version and changes gone! See the destructed layout below.

Default Layout

Basically there are 2 steps:
1. Create functions.php in theme root folder & customized as per your requirement
2. Create exact directory structure of Woocommerce plugin which is under ‘wp-content’ folder to your theme root folder & customized required files as per your demand

Now to reset the required layout, I processed following steps :
1. Create following folders in your theme

=>  woocommerce->single-product->tabs
 eg.  <Your Project>/wp-content/themes/<Your Active theme Name>/woocommerce/single-product/tabs

2. Copy content-single-product.php  file from woocommerce plugin folder  in your theme’s woocommerce folder with following changes in code

<div class="summary entry-summary">
 <?php
 do_action( 'woocommerce_single_product_summary' );
 do_action( 'woocommerce_after_single_product_summary' );
 ?>
 </div>

Remove  Line ” do_action( ‘woocommerce_after_single_product_summary’ ) ” outside
<div class=”summary entry-summary”></div>

3. Copy  tabs.php  file from woocommerce->single- product->tabs  plugin folder  in your theme’s
      woocommerce->single- product->tabs folder with following changes in code

$tabs = apply_filters( 'woocommerce_product_tabs', array() );

      Under  $tabs (variable)  Remove all code  in tabs.php file

4. Create functions.php file in your theme folder
eg.  <Your Project>/wp-content/themes/<Your Active theme Name>/functions.php

// Remove Description & Attributes tabs in with following code
 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs',         10 );
 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products',          20);
// Add Priorities of  all content in right side  Like (Title, Price, Meta, Description, Attributes)
 add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
 add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
 add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
 add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
 add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 20 );
 add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 20 );
 add_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_output_product_data_tabs', 20 );
// Add Custom image below leftSide banner image
 function wdm_add_custom_image(){
 echo '<div class="staticbanneronsinglepag"><img src="./wp-                                                                                                             content/uploads/2017/10/Banner_for_single_product_page.jpg"/></div>';
 }
 add_action('woocommerce_product_thumbnails','wdm_add_custom_image');
// Show attributes after summary in single-product view
 add_action('woocommerce_single_product_summary', function() {
 global $product,$post;
 echo $product->list_attributes();
 echo '<div class="woocommerce-product-details_CustomPageDesc">'.$post->post_content.'</div>';
 }, 25);

With above all steps I am able to configure the required single product page layout which you can compare here with above project image.

/by