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 Gutenberg – Learn how to customize the WooCommerce Single Product Page with Gutenberg
2. If you are not using Gutenberg – Learn 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

Step 1 – Add products details into WooCommerce Product

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

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