How to customize the WooCommerce Product Page

Would you like to change the layout of your WooCommerce Product Pages?

Here’s a way to create unique WooCommerce Product Pages, with no coding, just easy drag and drop.

Here’s some examples of what you will learn how to do

Customizing the WooCommerce Product Page is now really easy and here are two simple ways to customize your Product Page.

The first way uses Gutenberg and our new WooBuilder plugin, the second way uses our PageBuilder Pro plugin.

  1. Using GutenbergLearn how to customize the WooCommerce Single Product Page with Gutenberg
  2. If you are not using GutenbergLearn how to customize the WooCommerce Single Product Page without Gutenberg

Already using Gutenberg?

Then use our new WooBuilder plugin.

If you are using Gutenberg then you can use our WooBuilder plugin.

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

WooBuilder highlights video

WooBuilder walkthrough video

Here’s how WooBuilder works

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

New Blocks include; add to cart block, product title, product price, short description, product image.

WooCommerce Single Product Blocks included with WooBuilder

woobuilder blocks

Step 1 – Add products details into WooCommerce Product

how woobuilder works

Step 2 – enable WooBuilder and create your new design using Gutenberg and WooBuilder Blocks

Step 3 – Publish your new design

Example products built with WooBuilder and Gutenberg

Not using Gutenberg yet?

Use our Pagebuilder Pro plugin to customize the WooCommerce Single Product Page

If you are not using Gutenberg yet, 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 add a WooCommerce element to a product page

17 thoughts on “How to customize the WooCommerce Product Page

  1. Thanks for good tutorial. Very helpful

  2. Videos are really helpful.. thanks

  3. Thanks for the video. Very nice content!

  4. Where can we find the plugin for woo builder? Is it only available to certain wordpress versions?

    1. Hi Chelsea,

      WooBuilder is part of our Pagebuilder plugin , found here

      kind regards

  5. Thanks for the above information it helps me customise my site and also to know the working of it

  6. Can I switch image area and product short description area once install the plugin?

    1. Yes :)

  7. How does one change the template on existing product pages? I’m able to add new products with no issue but can’t find where to modify older items.

  8. How do we edit the template of an existing product page?

    1. Hi Sina, that’s shown in the 2nd video on the page,

      1. You make mention of it in the video but do not actually show how to do it. I need assistance with it too please

  9. superb thanks bro

  10. Hi! This plugin competable with AVADA?

    1. Hi, yes it is :)

  11. Hello
    Can you have more than one layout for a product page?

    1. Yes you can :)

Leave a Reply

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