miguel.nz

Customise your product page under Visual Composer Starter theme

October 20, 2017   |   2 minutes read.

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: