How to customize the WooCommerce Product Page [2020]

woobuilder woocommerce product page examples

Updated May 2020

Would you like to fully customize your WooCommerce Product Page?

You can customize the WooCommerce Product page with the WooBuilder Blocks plugin. This is a WordPress plugin that let’s you completely change the layout and design of the WooCommerce Product Page using the new Gutenberg Block Editor from WordPress.

In this article I’ll show you how to fully customize your WooCommerce Product Page in just a few minutes.

You won’t need any technical knowledge needed and won’t need to touch a line of code.

Why it’s important to create a better 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, subsequently all WooCommerce Product pages tend to look exactly the same.

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

By creating a better WooCommerce Product Page you can get a jump start over your competitors to really show off your products in the best way possible.

Whether you need to add a 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 using WooBuilder Blocks

  • How to fully customize the layout of the WooCommerce Product Page
  • How to change the layout of the WooCommerce Product Image
  • How to change the size of the WooCommerce Page Product Image
  • How to change the WooCommerce Product Page background
  • How to change the WooCommerce Product Page template
  • Hand pick which related products to show to increase up sells and cross sells
  • How to make the WooCommerce Product Page image full width
  • How to replace the WooCommerce Product image with a video
  • How to turn on and off Product Gallery Images
  • How to change the font, color and size of the WooCommerce Product title
  • How to change the position of the WooCommerce Product tabs
  • How to change the position of the WooCommerce Product reviews
  • How to add custom fields to the WooCommerce Product Page
  • How to change the order of the fields on the WooCommerce Product Page
  • How to change the style of the WooCommerce Product Page add to cart button
  • How to change the related products shown on the Product page

Here are some examples of WooCommerce Product pages that have been customized (no coding required)

  • brown top
  • woobuilder using coblock media card
  • woobuilder product
  • woobuilder with product gallery
  • woobuilder - customize the woocommerce single product page
  • woobuilder full screen image product
  • woobuilder with shape divider
  • How to customize the WooCommerce Product Page [2020] 1
  • woobuilder with 2 picture gallery
  • How to customize the WooCommerce Product Page [2020] 2
  • How to customize the WooCommerce Product Page [2020] 3
  • How to customize the WooCommerce Product Page [2020] 4

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 for woocommerce

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 theme!

You can customize the layout of the WooCommerce Product Page using any WordPress theme, for example, Divi, Storefront, Astra, Ocean WP, Avada, Enfold, Flatsome, Genesis, BeTheme, Twenty Nineteen, Salient, and Sydney.

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.

How to customize the WooCommerce Single Product Page

WooBuilder Blocks uses the Gutenberg Block editor to create awesome looking WooCommerce Product Pages.

Here’s a highlights video of WooBuilder Blocks in action

WooBuilder Blocks walkthrough video

Here’s a longer walkthrough video of WooBuilder Blocks, where you’ll see the process from start to finish on how easy it is to customize the WooCommerce Product page.

How WooBuilder Blocks works

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

enable 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 :)

WooCommerce Single Product Blocks included with WooBuilder Blocks

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

woobuilder blocks
WooBuilder blocks make it easy to customize the WooCommerce Product Page

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.

customize woocommerce product title
customize woocommerce product page title

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.

how woobuilder works
How to customize the WooCommerce Product Page [2020] 5

Step 3 – Publish your new WooCommerce Product page design

How to customize the WooCommerce Product Page [2020] 6

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.

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.


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

Time needed: 30 minutes.

How to customize the WooCommerce Product Page

  1. Create your WooCommerce Product

    Create your WooCommerce product the normal way and enter all information, including price , product image and other details

  2. Publish your WooCommerce Product

    It’s important that you then publish your Product

  3. Click on the Product Builder red button

    Now you will just need to click on the red ‘Product Builder’ button. This will open up a page in the live editor, with just one row.

  4. Design your Product

    Now you can drag and drop the WooCommerce modules from the left hand customizer into your page. We’ve create a whole range of modules including Product image, add to basked, product tabs, add to basket, reviews and more

  5. Publish your new WooCommerce design

    In your Admin toolbar click publish

  6. Templates

    Now you can use your design as a template for your other new products. Just go to dashboard / pagebuilder / setting.

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
How to customize the WooCommerce Product Page [2020] 10
how to add a WooCommerce element to a product page

FAQ

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.

49 thoughts on “How to customize the WooCommerce Product Page [2020]”

  1. Hi, I’d love to use this on our site (looks amazing!) however, downloaded plugin and can’t find the “enable WooBuilder blocks” button while on product page…..

    1. Jamie Marsland

      Hi Julian

      Can i double check you have purchase this plugin https://www.pootlepress.com/woobuilder-blocks/ .

      If you have, could you raise a support ticket here pootlepress.com/support-form

      It sounds like you might have the new Gutenberg Editor disabled – check if you have the classic editor plugin installed, as this disables the new Gutenberg Editor.

      jamie

  2. Hi, I want to show video only specific category on single product tab section . Which category have video the description tab section will show active. other category single product will show review tab active, Can any one help me

  3. Hi !! 3 questions for me :

    1/ Is your plugin compatible with any “one page checkout” plugin, (this one for example https://codecanyon.net/item/woocommerce-one-page-shopping/7158470) ?

    2/ You confirm that it works with variable products ? How does the images of each variation appear ?

    3/ I didn’t understand clearly if everything works only by buying this plugin, or do I have to buy another one to make it work (caxton blocks,…) ?

    Thank you !

    1. Jamie Marsland

      Hi Aude,

      Here’s a few answers

      1) This week we are working on our own ‘one page checkout’ functionality that works with the upcoming checkout block that’s going to be included in the next version of woocommerce blocks (from woocoommerce) as we feel this will give customers the maximum flexibility :)

      2) Yes woobuilder blocks works ‘out of the box’ with variable products. Here’s a demo http://woobuilderblocks.com/product/dnk-orange-sports-shoes/. It also works great with the WooCommerce attribute swatches plugin (by iconicwp.com) , here’s a demo of that one http://woobuilderblocks.com/product/dnk-yellow-sports-shoes/

      3) Yes you just need to buy woobuilder blocks. It does require our gutenberg framework plugin caxton but that is a free plugin :) This is all handled during installation. We built caxton as a framework for all our gutenberg based plugins (so we don’t need to include some of the same core block functionality in each plugin).

      1. Hi Jamie,

        Thank you for your quick reply !!
        Ok so for the “one page ckeck out” would you advise me to wait for the new version you are about to release ?
        I would have to install the plugin woocommerce blocks + yours, right ?
        Do you know when they will release the new version of woocommerce blocks ?

        Thank you for the demo, perfect.
        Noted for caxton!

        Aude.

    1. Jamie Marsland

      Yes if you use a layout block like our Caxton Layout Block – that has mobile settings built in :)

      1. Hi ! Same question I guess but asked differently : is your plugin responsive ?
        Or do we have to do different settings for mobile and desktop ? Thank you !

  4. Hello how are you? I use Yootheme Pro as my website template. Can you tell me if your plugin is compatible with it? It was not very clear to me if I need to use any more plug-ins together with WooBuilder Blocks, if so can you indicate which one? Thank you.

    1. Jamie Marsland

      Hi Ricardo,

      I haven’t tested with Youtheme so I’m not 100% sure – but we have a trial so you can test it out risk free :)

      WooBuilder Blocks uses the WordPress Block Editor so doesn’t need any pagebuilder –

      It does require our free Caxton plugin (this is our gutenberg framework) , but that is all handled during the installation

      jamie

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top