So I am dealing with a website using Visual Composer Starter theme from WordPress which, by the way, uses Bootstrap 3.x. As the website uses Woocommerce but the theme does not support I had to work this around in order to make this look pretty.
This is what I’ve done so far:
Get a copy of the file visual-composer-starter/single.php into your theme or child theme and rename this file as single-product.php
If the header image bothers you, you can hide from the header.php. Like this
<?php if ( !is_singular( 'product' ) ) : ?> <div class="header-image"> <?php visualcomposerstarter_header_featured_content(); ?> </div> <?php endif; ?>
Now that your Woocommerce product will load under single-product.php. You can do some modifications here. This is how mine looks now:
<?php /** * Single * * @package WordPress * @subpackage Visual Composer Starter * @since Visual Composer Starter 1.0 */ get_header('shop'); // Start the loop. while ( have_posts() ) : the_post(); ?> <div class="<?php echo esc_attr( vct_get_content_container_class() ); ?>"> <div class="content-wrapper"> <div class="row"> <div class="col-md-12"> <div class="main-content"> <article class="entry-full-content"> <?php if ( vct_is_the_title_displayed() && get_the_title() ) : ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php endif; ?> <?php do_action( 'woocommerce_before_main_content' ); ?> <?php wc_get_template_part( 'content', 'single-product' ); ?> <div class="nav-links post-navigation"> <div class="row"> <div class="col-md-5"> <div class="nav-previous"> <?php previous_post_link( '%link', '<span class="meta-nav">' . esc_html__( 'Previous', 'visual-composer-starter' ) . '</span><span class="screen-reader-text">' . esc_html__( 'Previous post:', 'visual-composer-starter' ) . '</span><span class="post-title">%title</span>', true, false, 'product_cat' ); ?> </div><!--nav-previous--> </div><!--.col-md-5--> <div class="col-md-5 col-md-offset-2"> <div class="nav-next"> <?php next_post_link( '%link', '<span class="meta-nav">' . esc_html__( 'Next', 'visual-composer-starter' ) . '</span><span class="screen-reader-text">' . esc_html__( 'Next post:', 'visual-composer-starter' ) . '</span><span class="post-title">%title</span>', true, false, 'product_cat' ); ?> </div><!--.nav-next--> </div><!--.col-md-5--> </div><!--.row--> </div><!--.nav-links post-navigation--> </article><!--.entry-full-content--> </div><!--.main-content--> </div> </div> </div><!--.row--> </div><!--.content-wrapper--> </div><!--.<?php echo esc_html( vct_get_content_container_class() ); ?>--> <?php // End of the loop. endwhile; do_action( 'woocommerce_after_main_content' ); get_footer('shop');
What I basically did is to add the title on top, add the featured image on the left and the content on the right.
I've also modified this file this get_template_part( 'template-parts/content', 'single' ); into this get_template_part( 'template-parts/content', 'single-product' ); Which means I can customise the way I display the content from the single product.
Further reading: