How to customize the WooCommerce Product Page

How to customize the WooCommerce Product Page – A complete guide

Introduction – Why it’s important to customize the WooCommerce Product Page

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. One of the biggest problems most eCommerce stores face is this generic feeling, as research from the Baymard Institute has noted:

“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.”

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. 

Would you like total freedom to design the whole WooCommerce Product Page any way you like? 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. 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.

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. With a custom Product Page you’ll be able to…

• Showcase your products and reflect your brand.
• Maximise value from any product photography and video footage.
• Create urgency and spur your customers to purchase by adding powerful Product Page sales boosters like Sales Countdown Timers and Stock Quantity Counters.
• Establish trust and credibility by highlighting your customer reviews and testimonials.

Answer any customer objections upfront by displaying delivery timescales and shipping costs.

2. Improved 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, the WooCommerce plugin 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.

WooBuilder Blocks Feature list

Features	Available in WooBuilder Blocks
Uses Gutenberg Block Editor Support	✅
Drag and Drop Designer	✅
Create Templates	✅
Custom Fonts	✅
Custom Add to Cart Button	✅
Support for Third-Party Gutenberg Blocks	✅
Support for Custom Hooks	✅
Request for Quote	✅
Sticky Add to Cart Button Block	✅
Stock Countdown	✅
Sales Countdowns	✅
Custom Tabs	✅
Custom Thank You Pages	✅
Custom Out of Stock Messages	✅
Hide Header, Footer, and Sidebar	✅
Custom Backgrounds (Images and Colours)	✅
Hand Pick Related Products	✅
Image Carousel/Slider Block	✅
Video for Product Images and Galleries	✅
Catalog Mode	✅

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, you’ll need to  pick up a copy of the WooBuilder Blocks plugin. Then go to Plugins > Add New in your WordPress dashboard, and upload the zip file to install it..

Once you have installed WooBuilder Blocks either create a new product or navigate to one of your existing products) and you’ll see a new option on the right that says ‘enable WooBuilder blocks’.

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. Simply click on Enable WooBuilder Blocks to start designing your Product Page with the Block Editor.

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 product templates that we’ve designed
• Use one of your own custom templates (instructions here on how to build your own WooCommerce templates).

Choose a pre-built layout

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.

3. Publish your new WooCommerce Product page 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 Tricks to Improve the WooCommerce Product Page

Customizing the WooCommerce Product Page can really boost your sales and conversions.

Here’s 12 top tips!

1) Add a Sales Countdown to increase urgency

2) Showcase Product imagery with a Photo Carousel

3) Add a WooCommerce Featured Video

4) Customize WooCommerce Related Products

5) A/B Split Test 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. You can then look at the test metrics to see which version was better at meeting your goals.

WooBuilder Blocks is built with experimentation and development in mind, and so it  comes with an A / B Split Testing Block. You can try out as many different layouts as you like and get key insights into which one worked best.

6) Add a full-screen WooCommerce Product Image

7) Create a one-page WooCommerce website

8) Vertically align your WooCommerce Product Gallery images

9) Highlight customer reviews and testimonials

10) Display Shipping Information and timescales to prevent abandoned carts

11) Add a Stock Countdown to increase urgency

12) Display payment options to provide reassurance

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.

---