How to customize the WooCommerce Product Page

How to customize the WooCommerce Product Page – A complete guide

Do you want to learn how to fully customize the design and layout of your WooCommerce Product Page?

Here’s a simple way to edit the layout of the WooCommerce Product Page, that requires no coding, and uses the WordPress Block Editor (Gutenberg) and the WooBuilder Blocks plugin.

Why it’s important to customize the WooCommerce Product Page

The WooCommerce Product Page is one of the most important pages in your WooCommerce store, but normally you have little control over the design of this page.

Subsequently all WooCommerce Product pages tend to look exactly the same.

But not all products are the same, some Product Pages demand their own unique layout to really sell them.

Customizing the WooCommerce Product Page has two major benefits

1. More Sales – An awesome WooCommerce Product page will convert more of your prospects into new customers
   • Make no mistake high quality design is incredibly important in convincing your customers to buy from you. By creating a better design for your WooCommerce Product Page you’ll get a big advantage over your competitors because you can showcase your products in the best possible way.
2. Much much better SEO (Search Engine Optimization)
   • By breaking free of the normal WooCommerce Product Page layout you can include much more keyword rich content that your customers will be searching for on Google.

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.

How to Customize the WooCommerce Product Page – A video tutorial

Here’s a 5 minute video tutorial that show’s you how easy it is to customize the WooCommerce Product page.

In this tutorial I’m using the WordPress Block Editor and the WooBuilder Blocks plugin.

The Science behind making a better WooCommerce Shop 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.

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.

Customize WooCommerce Product Page – full length video walkthrough

WooCommerce Product Page customization in a few simple steps

Step 1 – Add WooCommerce products details into WooCommerce Product as normal. Save or publish the product and then click ‘Enable WooBuilder Blocks”

First head over and pick up a copy of the WooBuilder Blocks plugin here 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)

WooCommerce Single Product Blocks included with WooBuilder Blocks

We’ve built a whole bunch of new blocks that lets you build any layout using the Gutenberg Editor.

WooBuilder Blocks include; add to cart block, product title, product price, short description, product image, product reviews and product meta.

You choose where and if you use them :)

You can add these WooBuilder Blocks anywhere within your new WooCommerce Page layout.

Each Block also comes with it’s own set of customization options. For example it’s now easy to change the font, font size, font color of the WooCommerce Product title, and the WooCommerce add to cart.

Step 2 – Create your new design using the Gutenberg Block editor and WooBuilder Blocks

Top tip – to create complex grid layouts for your WooCommerce Product Page then consider using a specialized Gutenberg based layout block like either the Caxton Layout Block, or the Kadance Layout Block.

Step 3 – Publish your new WooCommerce Product page design

You can then use your new WooCommerce Product Page design as a template and apply it to multiple products using categories and tags

How to create Templates to to multiple WooCommerce Products using categories and tags

If you want to apply your new super duper WooCommerce Product Listing Page designs to multiple products then you can use the WooBuilder Template system. It’s incredibly easy to get working and only takes a few minutes. Here’s how it works.

How to 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

Here’s a video that explains how to fully customize WooCommerce Related Products.

WooCommerce Single Product A / B Split testing

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.

Here’s a video walkthrough of the WooCommerce Split Testing Block.

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;

1. 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

1. Create a unique WooCommerce Product Page layout
2. Create a template out of that unique Product Page
3. 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

1. Create your WooCommerce Product
2. Click on the red ‘Product Builder’ button
3. Design your new WooCommerce Product layout
4. Use your new design as a template for other WooCommerce producdts

---