WooCommerce Product Page Customization Plugins & Themes

by | Dec 10, 2020

Customizing the WooCommerce Product Page design, in any theme is an essential step to conversion rate optimisation of your online store. At the end of the day the themes and the WooCommerce specific templates they create within the themes are generic, designed for highest levels of compatibility and are typically uninspiring.

Editing the default WooCommerce product page layout is top of the list in terms of conversion rate optimisation of your WooCommerce site.

So you’re left with the question…

How To Customize The Default WooCommerce Product Page

How to create custom single product page in WooCommerce?

Customizing the WooCommerce Product Page with a plugin that enables you to build an entirely new looking page (or a page with just some essential design tweaks!) is a great idea – regardless of what theme you’re using.

Of course, with an advanced theme like Divi from elegant themes you have the ability to create an entirely new product page template WITHOUT needing to write a single piece of code. You just head over to the Theme Builder from inside the WordPress dashboard and start creating an entirely new product page template (you can even be selective about which product pages use the template and which don’t). The flexibility is awesome, especially the ability to create several product page templates and use different designs for different styles of product in your WooCommerce catalogue.

Anyway, enough gushing over Divi (it is awesome though).

Rule number 1 in all of this “Product Page Customization” talk is that you DON’T need to hire a developer.

Yes a developer could develop you a whole new PHP product page template and edit some CSS. This then needs to be maintained and updated as WooCommerce and WordPress update their code – so this isn’t a “one hit” activity. This is why using the Theme Product Page template for WooCommerce is so easy – the theme providers are left with the job of updating the page templates every time there’s a core update to WooCommerce or WordPress. You may have seen the message:

Your theme contains outdated copies of some WooCommerce template files

If you see this message, and you’ve had a developer “customize” your product page template – this is now YOUR responsibility to fix – and this will happen several times a year.

There is a better way to customize the WooCommerce single product template…

Using a Page Builder Plugin to Customize the WooCommerce Product Page Layout

If you’ve read any of my other articles, you’ll know by now our recommended page builder is Divi. Divi Builder can be used as a standalone plugin with ANY theme – or you can use the Divi theme which has the Divi Builder plugin built in and extract the full benefits of Divi.

Using Divi Page Builder Plugin to Customize WooCommerce Product Page Designs

There are two routes to Product Page Customization in WooCommerce using Divi:

  1. Customize each product page – page by page using the page builder (not writing a single line of code!) all drag and drop
  2. Create a “Product Page Template” in the Theme Builder which you can them apply to each product page, replacing the default WooCommerce product page template provided by your theme. (Again, not writing a single line of code!) all drag and drop design

We use both approaches interchangeably

It’s fair to say, with Divi’s ability to also “clone an existing page” or “use an existing page as a template” means that you can quickly customize your entire product catalog of product pages using Divi.

For longevity and future proofing – using the Theme Builder makes a lot of sense. Essentially if you make a single edit to the Theme Builder Product Page Template – that edit gets rolled out in every page that uses THAT template in one fell swoop.

That’s just awesome – and takes ZERO code!

Using Elementor Page Builder Plugin to Customize WooCommerce Product Pages

We like Elementor, it’s no Divi! But as page builders go, we’re on board with this WordPress page builder software.

Elementor hasn’t got a “theme” so to speak – like Divi which is both a WooCommerce theme and a Page Builder.

Elementor is designed for good compatibility with well built WordPress and WooCommerce themes – but fundamentally because the builder isn’t tied into a theme you don’t have as much deep integration between theme and page builder. This makes sense. They’re the swiss army knife of page builders, handy in a lot of situations.

Of course you can cut down a tree with a Swiss Army knife (a skinny one) but Divi is the equivalent of a Chain Saw for the same job in comparison.

You can build yourself a new WooCommerce product page design with Elementor from the ground up.

To get access to the WooCommerce modules within Elementor that you’ll need to build a decent replacement product page, you’ll need Elementor Pro – but it’s a low cost builder so not really that big a deal.

The Pro Version is very much like the free version of Elementor – you basically get access to a lot more modules for designing pages with dynamic content – so essentially the same page design can be “copied and pasted” from one product page onto another and the content, such as the product price or product title that’s applicable to THAT product get pulled through into the page design on the front end.

Using Gutenberg Editor to Customize Product Pages – WooCommerce Product Page Layout Plugin

Gutenberg is NOT a page builder.

It may be one day – but right now, it’s an advanced post editor at best.

By default you CANNOT use the Gutenberg editor on Product Pages.

So why am I mentioning it?

Well, we looked at whether using Gutenberg to customize the WooCommerce Product Page design was a viable option – and we looked at a WooCommerce product page layout plugin from PootlePress that enables Gutenberg editor on Product Pages so you can at least try this approach.

Check out the detailed article here – explaining how to customize the WooCommerce Product Page with Gutenberg Editor.

What about making minor WooCommerce Product Page Edits?

You might just be looking at making minor edits to the Default WooCommerce Product Page layout – and we’ve covered some very specific edits you can make in a few other articles such as:

You Searched for:

woocommerce product page plugin

avada woocommerce product page

elementor woocommerce product page

extra theme woocommerce product page

beaver builder woocommerce product page

how to create custom single product page in woocommerce

woocommerce product page customization plugin

woocommerce single product page layout plugin

woocommerce single product page plugin

woocommerce custom product page plugin

woocommerce single product page customizer

woocommerce single product page builder

woocommerce single product page plugin

woocommerce single product template

woocommerce product description

woocommerce page templates

woocommerce page template

woocommerce additional information

woocommerce tabs

woocommerce product short description

woocommerce custom product builder

woocommerce product builder

woocommerce get product description

woocommerce single product page customizer

product page woocommerce