How to customize the WooCommerce Product Page – A complete guide
Introduction – Why it’s important to customize the WooCommerce Product Page
Would you like total freedom to design the whole WooCommerce Product Page any way you like?
The WooCommerce Product Page is probably the most important page in your WooCommerce store, but normally you have little control over the design. This is because the WooCommerce Product Page design is set by Woocommerce and generated automatically.
Subsequently, all WooCommerce Product Pages tend to look exactly the same. But not all products are the same and many products deserve their own unique Product Page layout.
This guide will show you how to fully customize the WooCommerce Product Page. We’ll be using the WordPress Gutenberg Block Editor and the WooBuilder Blocks plugin. No Page Builder is required, and this method works on every WordPress Theme.
Let’s start with two examples.
The first example on the left is the default WooCommerce Single Page design, the second one on the right has been customized using the Block Editor. I hope you’ll agree the WooCommerce Product Page that has been customized on the right is more visually exciting, showcases the product in a much more attractive way, and is very likely to boost sales.
Customized with Block Editor
Gallery – Examples of WooCommerce Product Pages that have been customized
Here’s some awesome examples of WooCommerce Product Pages that have been customized using WooBuilder Blocks and the WordPress Block Editor. If you would like to see some live examples click here.
Customizing the WooCommerce Product Page has two major benefits
1. Increased Sales
Having complete control over every element of the design, layout, and content of your WooCommerce Product Page is incredibly important if you want to give your revenue a boost. An awesome WooCommerce Product page will convert more of your prospects into new customers
- You’ll be able to create a beautiful Product Page that will let you showcase your products and reflect your brand.
- You’ll be able to get the most value out of any product photography and video footage.
- You’ll be able to create urgency and spur your customers to purchase by adding powerful Product Page sales boosters like Sales Countdown Timers and Stock Quantity Counters.
- You’ll be able to establish trust and credibility by highlighting your customer reviews and testimonials.
- You’ll be able to answer any customer objections upfront by displaying delivery timescales and shipping costs.
2. Much much better SEO (Search Engine Optimization)
By breaking free of the default WooCommerce Product Page layout you can include much more keyword-rich content that your customers will be searching for on Google. This will give you a much better chance of ranking above your competitors on the search results page.
How to Customize the WooCommerce Product Page – A video tutorial
Here’s a 5 minute video tutorial that show’s you how to customize the WooCommerce Product page.
In this tutorial I’m using the WordPress Block Editor and the WooBuilder Blocks plugin. WooBuilder Blocks is a Woocommerce product page layout plugin.
To customize the WooCommerce Product Page; first, install the WooBuilder Blocks plugin, then enable the WordPress Gutenberg Block Editor on the Product Page, then design your Product page using the Block Editor and the WooBuilder Product Blocks.
How to customize the WooCommerce Product Page – step by step instructions
Here’s how the WooBuilder Blocks plugin works.
1. Add WooCommerce Product details as normal
First head over and pick up a copy of the WooBuilder Blocks plugin and then install it via plugins on your WordPress website.
Once you have installed WooBuilder Blocks enter your product details in the normal way (or go to an existing product) and you’ll see a new option on the right that says ‘enable WooBuilder blocks’.
Once you enable WooBuilder Blocks you’ll have the three options shown in the screenshot below.
- Build your WooCommerce Product design from scratch
- Use one of the pre-built templates that we’ve designed
- Use one of your templates (instructions here on how to build your own WooCommerce templates)
WooBuilder Blocks comes with pre-designed templates
The Blocks included with WooBuilder Blocks
You can add WooBuilder Blocks anywhere within your WooCommerce Page layout, using the Gutenberg Block Editor to design your page.
WooBuilder Blocks include;
- Product Title Block
- Add to Cart Block
- Request a Quote Block
- Product Price Block
- Short Description Block
- Long Description Block
- Product Image Block
- Video Gallery Block
- Product Image Carousel Block
- Product Cover Block
- Product Reviews Block
- Star Ratings Block
- Product Meta Block
- Tabs Blocks
- Sales Countdown Block
- Stock Countdown Block
- Related Products Block
- Upsell Block
- Template Block
- Split Testing Block
- WooCommerce Hooks Block
Each WooBuilder Block also comes with lots of great customization settings.
For example, it’s now easy to change the font, font size, the font color of the WooCommerce Product title, and the WooCommerce add-to cart.
2. Create your new design using the Gutenberg Block editor and WooBuilder Blocks
Now you can use the Block Editor to design your WooCommerce Product Page.
Top tip – to create grid layouts for your WooCommerce Product Page then consider using the WordPress Columns Block or a specialized Gutenberg based layout block like Gutenberg Pro, the Caxton Layout Block, or the Kadance Layout Block.
3. Publish your new WooCommerce Product page design
When you have finished, you can publish your new snazzy design.
4. Create Templates that can be used on multiple WooCommerce Products
If you want to apply your new super duper WooCommerce Product Listing Page designs to multiple products then you can use the WooBuilder Templating system.
It’s incredibly easy to get working and only takes a few minutes.
12 Sales Boosting WooCommerce Product Page Edits
Customizing the WooCommerce Product Page can really boost your sales and conversions.
Here’s 12 top tips!
1) Add a Sales Countdown
Sales Countdowns can be a great way to encourage your customers to take action and make a purchase. Adding a sales countdown to the WooCommerce Product Page is really easy using WooBuilder Blocks.
All you have to do is add the Sales Countdown Block into the WooCommerce Product Page.
2) Showcase Product imagery with a Photo Carousel
The Product Images Carousel Block makes it easy to showcase your WooCommerce Products in a beautiful Carousel.
It automatically grabs your main product image and your product gallery images to use in the carousel. And because it’s a block and uses the WordPress Block Editor you can place it anywhere within your WooCommerce Product Page.
First just add the WooBuilder Product Images Carousel.
WooBuilder Blocks automagically takes your WooCommerce Product Image and Gallery Images and creates a beautiful auto-timed WooCommerce Carousel for your main product image.
3) Add a WooCommerce Featured Video
Video is a great way to really showcase your products and replacing your normal WooCommerce Product Image with a video is very easy.
Just add the video block!
4) Customize WooCommerce Related Products
One the big benefits of this approach is that you can easily get 100% control of your WooCommerce Single Product Page related products.
Here’s just a few of the WooCommerce related product customizations that are possible.
- Change what products to show in WooCommerce related products
- Hide WooCommerce related products
- Change the number of WooCommerce related products
- Change WooCommerce related products title
- Change WooCommerce related products columns
- Change WooCommerce related products image size
- Add a WooCommerce related products carousel
- Create a totally unique WooCommerce Related Products section
5) A/B Split Testing the WooCommerce Product Page
Split Testing is a great way to check whether your new designs are working automatically by testing different versions of them.
WooBuilder Blocks also comes with an A / B Split Testing Block. This lets you test different versions of the same product and then choose the winner.
6) Add a full screen WooCommerce Product Image
Sometimes it’s great to be able to really showcase your Product Photography and create a full-screen WooCommerce Product Layout.
All we need to do is use the WooBuilder Cover Block that comes with WooBuilder Blocks.
The WooBuilder Cover Block works in a similar way to the existing Gutenberg Cover Block, however we automatically grab the WooCommerce product image and product data.
There are quite a few customization options to the WooCommerce Cover Block including,
- Change height
- Make full width
- Add parallax
- Add overlay colour
- Align text
The WooCommerce Cover Block can also be used to create templates that can be applied to multiple products.
7) Create a one page WooCommerce website
One Page WooCommerce websites are great if you only have one product that you want to showcase. These are also great if you need to create a WooCommerce Landing Page.
Here’s a video tutorial on how to create an awesome WooCommerce Landing Page or WooCommerce Single Page website, using the WordPress Gutenberg Block Editor and the WooBuilder Blocks plugin.
8) Vertically align your WooCommerce Product Gallery images
Sometimes it’s great to make your WooCommerce Gallery Images fit more accurately with your design and highlight them.
WooBuilder Blocks gives you 4 options to choose for your product galleries
- Default layout
- Hide product gallery
- Left vertical align product gallery
- Right vertical align product gallery
9) Highlight customer reviews and testimonials
Customer reviews and testimonials are very important to establish trust and social proof of the value of your products. In the normal WooCommerce Product Page customer reviews are somewhat hidden. It’s better if you can make more of your customer testimonials, ideally make them very visible on the Product Page.
I’ve seen some sites that have a testimonials page. Whilst this is ok, it’s important to remember that most of your customers will never visit your testimonials page, so you need to make them visible throughout your website, and importantly on the WooCommerce Single Product Page.
Here’s one idea of how your customer testimonials could be used on the WooCommerce Product Page. In this example I’ve added a heading block and a paragraph block to the top of the Product Page. It’s really easy to do and makes a huge difference when a new customer lands on your product pages.
10) Display Shipping Information and timescales
Delivery timescales are likely to be a reason why you customers either make a purchase or go elsewhere. It’s important to meet and answer any objections up front. One simple way to do this is to add clear details on your shipping costs and timescales. Here’s one idea.
11) Add a Stock Coundown
A great way to boost sales is to add a visual stock countdown to the WooCommerce Single Page. Here’s a picture of the WooBuilder Blocks Stock Countdown Block.
You can add this anywhere within the WooCommerce Product Page layout, but a visual Stock Countdown timer is going to boost your sales because it’s much clearer for your customers that they need to take action quickly!
12) Display payment options
Your customers would like to know what payment options you support upfront so they don’t waste time going through the whole checkout process.
I’d recommend displaying them right on the Product Page so that any sales questions about payment options are met straight away. This should reduce you cart abandonment as well and boost conversions.
Here’s one idea of what you could do.
The Science behind making a better WooCommerce Product Page
The Baymard Institute are the World’s leading research company on ecommerce design, and have analyzed thousands of ecommerce websites.
These is what they say about the Product Page.
‘Nearly all users go through a product page before making any purchase, and it’s often on the product page where users make up their mind on whether or not they want to purchase the item.
The product page is the centerpiece of your users’ e-commerce experience. Yet at the same time, the product page layout and features tend to be under a lot of strain as they often rely on the same template re-used across the entire site’s product catalog.
It’s often on the product page where users make up their mind on purchasing the item or not. Hence, we’ve observed that even small UX issues in a site’s product page implementation will often cause direct site abandonments. For example, the single most critical issue is that 51% of sites do not offer a shipping estimate or a shipping calculator at their product pages, this is despite the fact that a majority of users will try to seek out this very information.’
Source: Baymard Institute
Whether you need to add a shipping estimate, an awesome product video, or much larger product images, or more SEO friendly text – this method makes it all possible.
The beauty of this approach is that there are no limitations on the design of WooCommerce Product page layout.
Here’s just some of the things you’ll be able to customize with the WooCommerce Product page.
- Fully customize the layout of the WooCommerce Product Page
- Change the layout of the WooCommerce Product Image
- Change the size of the WooCommerce Page Product Image
- Change the WooCommerce Product Page background
- Change the WooCommerce Product Page template
- Hand pick which related products to show to increase up sells and cross sells
- Make the WooCommerce Product Page image full width
- Replace the WooCommerce Product image with a video
- Turn on and off Product Gallery Images
- Change the font, color and size of the WooCommerce Product title
- Change the position of the WooCommerce Product tabs
- Change the position of the WooCommerce Product reviews
- Add custom fields to the WooCommerce Product Page
- Change the order of the fields on the WooCommerce Product Page
- Change the style of the WooCommerce Product Page add to cart button
- Change the related products shown on the Product page
The WordPress plugin I used to customize the WooCommerce Product page
Introducing WooBuilder Blocks
Each of the WooCommerce Product Pages examples above have been customized and built in a matter of minutes with the WooBuilder Blocks plugin.
WooBuilder Blocks is a WordPress plugin that lets you customize the WooCommerce Single Product Page for a single product, a category of products, or for all your products.
WooBuilder Blocks is built to be super fast and lean, and because it’s designed to be used with the WordPress Block Editor (Gutenberg), no Page Builder is required, so it won’t slow down your website.
WooBuilder Blocks works on any WordPress theme
You can customize the layout of the WooCommerce Product Page using any WordPress theme. WooBuilder Blocks has been tested with Divi, Storefront, Astra, Ocean WP, Avada, Enfold, Flatsome, Genesis, BeTheme, Twenty Nineteen, Salient, Sydney and more.
Important note: Divi and Avada disable the new Block Editor (Gutenberg) so you’ll need to re-enable Gutenberg in the theme settings. Once Gutenberg is re-enabled WooBuilder Blocks will work as expected.
Example products built with WooBuilder Blocks and Gutenberg
Take WooBuilder Blocks for a risk free 14 day trial (cancel at any time)
Not using Gutenberg yet?
Then Use our Pagebuilder Pro plugin to customize the WooCommerce Single Product Page
If you are not using the new Gutenberg Block editor, then you can use our PageBuilder Pro plugin and the WooBuilder module you can just drag and drop the various WooCommerce Product elements to where you would like them to appear and completely customize the layout of your WooCommerce Products.
How to customize the WooCommerce Product Page
This video shows you how you can;
- Create a unique layout for your WooCommerce Product Pages
How to create templates of your WooCommerce Product Page
What’s more, you can also create re-usable templates of your stunning new WooCommerce Product Pages and apply them in 1 click to your other products.
This video shows you how you can
- Create a unique WooCommerce Product Page layout
- Create a template out of that unique Product Page
- Apply that template to your products
An example of a customized WooCommerce Product Page
On the left is the default WooCommerce Product Page layout, and on the right is an example of a layout built with our WooBuilder plugin.
How it works
Create your unique WooCommerce Product Page is really easy
- Create your WooCommerce Product
- Click on the red ‘Product Builder’ button
- Design your new WooCommerce Product layout
- Use your new design as a template for other WooCommerce producdts
How do I change the layout of a product in WooCommerce?
Our WooBuilder Blocks plugin lets you change the layout of your WooCommerce Product Page. It uses the new Gutenberg Block Editor so that you can create any layout you can imagine. In addition WooBuilder Blocks also gives you extra options including Split Testing.
How do I override a WooCommerce template?
You can either dive into the code or use the WooBuilder Blocks plugin :) WooBuilder automatically overrrides the normal WooCommerce template so you can change the design easily.
Can I create WooCommerce Product Page templates that I can use on multiple products?
Yes. With WooBuilder Blocks you can save your design as a template and then apply to multiple products using WooCommerce Categories and Tags.
Does WooBuilder Blocks work on every theme?
Yes. WooBuilder Blocks is designed to be theme neutral. We’ve tested on most of the most popular WordPress themes, including Astra, Divi, Avada, GeneratePress, WPOcean and many more.
Can I A/B test different WooCommerce product layouts?
A/B testing (or Split Testing) is when you test out two versions of your WooCommerce product (here’s a good article with more detail on how A/B testing works). WooBuilder Blocks now comes with a Split Testing Block. This lets you run multiple versions and layouts of the same WooCommerce product. The Split Testing Block gives you real time statistics on which has been the most successful layout. Finally you can select the winning layout as your choice.