Developing Custom Single Product Page in Custom Layout with WooCommerce & Bootstrap

Question

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

I have downloaded, installed woocommerce and copied files from it's template folder to theme root folder. I am using Bootstrap 4 and I want to layout single product page using Bootstrap.

I want to display my single product page as : expectation
But What I am getting is: reality

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. ;)

Solution

I'm not sure if this is a duplicate or not, however I would highly advise more reading and learning of how to set up and use a child theme with Woo-commerce would help you out a lot in this situation: https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/

There are a more templates other than the two you had mentioned above (single-product, and content-single-product), which you will need to edit in order to achieve the layout you're looking for. Also, one thing to watch out for is using more than one bootstrap container in a given area. I can see that in your single-product.php template you have a container-fluid, immediately followed by another container. This can break your whole layout so be careful with this!

Comments

[Milan Bastola]

hello, it's okay to nest container inside container in bootstrap. <section class="single-product container-fluid"> gives a full-width container so we can put background and do anything we want in a section. and second <div class="container"> is for contents to take with of page container size.

[CaliCo]

This is true, however I don't quite see the use of doing so since your fluid-container is essentially just a block element with 15px padding on both left and right sides. Anyway, regardless if it's not the containers that are causing the break in layout - it's likely to be a miss-use of a row, column, or not having an additional row to separate columns. Do you have a live text link perhaps of the single product page?

[Milan Bastola]

yes these tags are not causing the break in layout. The Problem is: I have a layout made in bootstrap (as shown in above image: i.stack.imgur.com/PTj6v.png) and I am not being able to display single product page in this layout. I am new to woocommerce integration so I don't know what is the reason behind this. :(