Problem designing custom layout for woocommerce pages

I am using WooCommerce in one of the project. As I am new to WooCommerce development I am getting problems as follows:

I want to display my single product page as : https://i.stack.imgur.com/PTj6v.png
But What I am getting is: https://i.stack.imgur.com/4qRUf.jpg

Here are my codes:
single-product.php : https://pastebin.com/tPVC2XFv

<?php

if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly
}

get_header( ‘shop’ ); ?>

<header class=”page-banner product-header container-fluid”>
<div class=”container”>
<?php if (apply_filters(‘woocommerce_show_page_title’, true)) : ?>
<?php echo woocommerce_template_single_title(); ?>
<?php endif; ?>
<?php woocommerce_breadcrumb(); ?>
<?php do_action(‘woocommerce_archive_description’); ?>
</div>
</header>

<section class=”single-product container-fluid”>
<div class=”container”>
<div class=”row”>
<div class=”col-4″>
<?php
/**
* woocommerce_sidebar hook.
*
* @hooked woocommerce_get_sidebar – 10
*/
do_action( ‘woocommerce_sidebar’ );
?>
</div>
<div class=”col-8″>
<?php while ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part( ‘content’, ‘single-product’ ); ?>

<?php endwhile; // end of the loop. ?>
</div>
</div>
</div>
</section>

<?php get_footer( ‘shop’ );

/* Omit closing PHP tag at the end of PHP files to avoid “headers already sent” issues. */

content-single-product.php : https://pastebin.com/2LL8YewM

<?php
/**
* The template for displaying product content in the single-product.php template
*
* This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.0.0
*/

if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}

/**
* Hook Woocommerce_before_single_product.
*
* @hooked wc_print_notices – 10
*/
do_action( ‘woocommerce_before_single_product’ );

if ( post_password_required() ) {
echo get_the_password_form(); // WPCS: XSS ok.
return;
}
?>
<div id=”product-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”row”>
<div class=”col-5″>
<?php
/**
* Hook: woocommerce_before_single_product_summary.
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>
<div class=”col-7″>
<?php
/**
* Hook: Woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title – 5
* @hooked woocommerce_template_single_rating – 10
* @hooked woocommerce_template_single_price – 10
* @hooked woocommerce_template_single_excerpt – 20
* @hooked woocommerce_template_single_add_to_cart – 30
* @hooked woocommerce_template_single_meta – 40
* @hooked woocommerce_template_single_sharing – 50
* @hooked WC_Structured_Data::generate_product_data() – 60
*/
do_action( ‘woocommerce_single_product_summary’ );
?>
</div>
</div>

<?php
/**
* Hook: woocommerce_after_single_product_summary.
*
* @hooked woocommerce_output_product_data_tabs – 10
* @hooked woocommerce_upsell_display – 15
* @hooked woocommerce_output_related_products – 20
*/
do_action( ‘woocommerce_after_single_product_summary’ );
?>
</div>

<?php do_action( ‘woocommerce_after_single_product’ ); ?>

I don’t know what is wrong the images in product gallery slider are having inline styling so the layout is not displaying as I want. I want your proper guidance guys. I hope I will get help from awesome people like you. 😉

Read more here:: Problem designing custom layout for woocommerce pages

Leave a Reply

Your email address will not be published. Required fields are marked *