How To Customize WooCommerce Product Page Without Code

There are so many ways to edit the WooCommerce Product Page from the default WooCommerce page template – choosing the right way to customize WooCommerce product pages can be tricky.

So today I’m going to cover how to edit the WooCommerce product page using Page Builders like Divi or Elementor, advanced editors like the Gutenberg editor on product pages and editing product page file templates.

In this article I’m going to provide you your options when it comes to Editing WooCommerce Product Pages without the need to know ANY form of code – no PHP, no CSS, no HTML!

How to Change The WooCommerce Product Page Design

Table of Contents

Editing Product Page with Gutenberg Editor in WooCommerce

When it comes to customising the WooCommerce Product Page with the Gutenberg Editor it’s nowhere near as “straightforward” as it should be (and probably will be far easier in the future).

This is because by default Gutenberg isn’t enabled for Product Pages in WooCommerce.

So the suggestion by many is to “insert a piece of code” which enables Gutenberg Editor on WooCommerce Product Pages.

This is an “OK” suggestion – but we HATE editing code with a passion. Don’t go near WooCommerce product page css or template files! We REALLY don’t like it – and it’s a slippery slope when you start adding bits and pieces here and there which cause all sorts of mayhem when managing conflicts and updates in WooCommerce sites.

PLUS if you do this, it still means that you don’t have control over the FULL page container. Instead, you’re limited to the page container provided by the underlying page template.

With WooCommerce Storefront Theme, this means the Sidebar is visible on the Product Page (which in our opinion is the worst part about the Storefront Theme, potentially a purposeful move by WooCommerce to try and get you to buy their “Storefront Extensions bundle” which allows you the level of control over the Storefront theme that is ACTUALLY needed).

But there is an answer that goes beyond the WooCommerce Extensions Marketplace when it comes to using Gutenberg for Product Pages in WooCommerce!

Editing Product Page with WooBuilder (Gutenberg Editor)

WooBuilder by PootlePress overcomes this shortfall not only for the Storefront Theme but for any theme you’re using for your WooCommerce store.

This means if you have a sensible theme that allows you to disable the sidebar on product pages in WooCommerce as standard (unlike the Storefront theme!) you can use WooBuilder to design your entire product page using Gutenberg Blocks and any additional blocks that your third party plugins or the WooCommerce Blocks plugin have added to your Gutenberg Block Options.

Check out WooBuilder by PootlePress here.

We like it.

It’s a little pricey.

But for the added functionality it’s worth it in many cases.

Will Gutenberg Editor for Product Pages be built in to WooCommerce in future?

It’s also highly likely that Automattic (the guys behind WooCommerce and WordPress) will be bringing the Gutenberg Editor to WooCommerce

Does it make us want to use the Free Storefront Theme from WooCommerce in combination with the Gutenberg Editor for Product Pages?

Not really selling us on the idea – especially when we use the best theme for WooCommerce stores ever, which is Divi by Elegant Themes….

Customizing WooCommerce Product Pages with Divi Builder

With a built in page builder that can be used on ALL WordPress post types, including WooCommerce Product Pages with customisable page templates built in the page builder too! No knowledge of code is required and you can have an extremely custom looking, feeling and functioning WooCommerce store.

To Check out Divi – Click here

Divi Product Page Layout Examples

It’s amazing what you can do with a flexible page builder to create a high converting product page design which drives add to carts and sales – I’ve put together a whole list of customized WooCommerce Product Page Designs using Divi Builder to inspire your next product page design.

WooCommerce Product Page Template

Custom coding product pages isn’t for everyone. We build out product page templates using Divi, and occasionally using custom code. Here’s an example of a custom template with some basic customisations that make a BIG difference for conversion, speed and display on Mobile.

The reduced spacing at the top of the page ensures that the “Add to cart” button is visible top of fold on the majority of desktop screens – plus it keeps the add to cart button within a SINGLE scroll on mobile.

The increased ratings / reviews star size is much more impacting than the typical “shy and retiring” approach that most themes take.

The bullet pointed list of 3 major selling points having strong and prominent icon style bullets draws real attention to these points and brings the viewer straight to the Add to cart call to action.

The white space below the add to cart button is purposeful – this is where a popup or custom offer image can be introduced to cross sell and upsell bundles without completely destroying the structure of the page on Desktop and Mobile.

Having got rid of the tabbed layout, a 2 column layout allows readers to see “our description” and “customer reviews” simultaneously on desktop. Meanwhile on mobile, users who continue scrolling past the description arrive at the reviews INSTEAD of having to click through the tabs.

It’s a much more natural flow to sales and conversion without the need for the customer to actively select to read certain information or reviews about the product (they can of course still click on the “1 review” link underneath the stars at the top of the page and be taken right to the customer reviews.

Trying to make a specific change to the WooCommerce Product Page?

If you’ve not checked out our other articles on improving the WooCommerce Product Page – we might have EXACTLY what you’re looking for.

Maybe you’re trying to…

Disable and remove related products on the Product Page

Hide the Breadcrumbs on the default WooCommerce Product Page

Hide the Category or SKU label on the Product Page template

Remove the Additional Information Tab from the Product Page in WooCommerce

And we have a bunch of other guides on how to edit all aspects of WooCommerce customization (without code!) check out our WooCommerce Customization Guides here

How To Customize WooCommerce Product Page Without Code

How to Change The WooCommerce Product Page Design

Editing Product Page with Gutenberg Editor in WooCommerce

Editing Product Page with WooBuilder (Gutenberg Editor)

Will Gutenberg Editor for Product Pages be built in to WooCommerce in future?

Customizing WooCommerce Product Pages with Divi Builder

Divi Product Page Layout Examples

WooCommerce Product Page Template

Trying to make a specific change to the WooCommerce Product Page?

Other Useful Articles from Future State Media

Search The Blog

Recent Posts

Categories