miguel.nz

  • Home
  • Latest projects
  • Blog
  • Get in touch

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


Now that your Woocommerce product will load under single-product.php. You can do some modifications here. This is how mine looks now:


' . esc_html__( 'Previous', 'visual-composer-starter' ) . '' . esc_html__( 'Previous post:', 'visual-composer-starter' ) . '%title', true, false, 'product_cat' ); ?>
' . esc_html__( 'Next', 'visual-composer-starter' ) . '' . esc_html__( 'Next post:', 'visual-composer-starter' ) . '%title', true, false, 'product_cat' ); ?>

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:

  • get_template_part here
  • Woocommerce template
Share on Twitter or LinkedIn

About Miguel

Web developer focused on web design, user interface, front-end and back-end development with a background on computer science. My experience involves deep knowledge in Javascript, HTML, CSS and PHP.

More about Miguel

Previous Article

Yes, you can get beautiful forms with Contact Form 7

Next Article

Fixing apache file permissions on Mac (El Capitan)

Interested to work with me,
co-create or say Hello? Let's chat.