As Featured In Fatstacks

How To Customize WooCommerce Product Page Without Code

Published Categorized as Ecommerce Stores, Website Design

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

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

Other Useful Articles from Future State Media

Woo Product Page Plugins & Themes

Using Gutenberg on WooCommerce Product Pages

Woo Product Page Examples using Divi Builder & Divi Theme

Disable Related Products On WooCommerce Product Pages

You searched for:

Parent Topic: edit woocommerce product page

woocommerce change product page layout

woocommerce edit product page

elementor product page

woocommerce product page template

edit product page woocommerce

editing woocommerce product page

elementor woocommerce product page

woocommerce page layout

Parent Topic: customize woocommerce product page

customize woocommerce product page

edit woocommerce product page

woocommerce product page

how to customize woocommerce product page

woocommerce products page template

woocommerce custom product page

woocommerce single product page

woocommerce customize product page

woocommerce product page layout

how to edit woocommerce product page

woocommerce product layout

customize product page woocommerce

custom woocommerce product page

woocommerce single product

how to edit product page woocommerce

woocommerce product page customization

woocommerce product page design

custom product page woocommerce

style woocommerce product page

how to create custom single product page in woocommerce

change woocommerce product page layout

remove sidebar from woocommerce product page

woocommerce single product page customizer

woocommerce single product page hooks

woocommerce arrange product page

woocommerce css product page

woocommerce change single product page layout

woocommerce full width product page

change woocommerce product page

sidebar product page woocommerce

woocommerce product details page template

product page woocommerce

woocommerce show attributes on product page

woocommerce custom single product page

customize single product page woocommerce

woocommerce product page background

customize woocommerce single product page

product page template woocommerce

woocommerce layout product page

editing woocommerce single product page

woocommerce edit product page layout

woocommerce single product page image size

customizing woocommerce product page

woocommerce full width single product page

woocommerce product detail page

woocommerce product page template customization

woocommerce product page editor

woocommerce product template page

change layout of woocommerce product page

woocommerce custom product page layout

woocommerce hide sidebar on product page

woocommerce display cross sells on product page

woocommerce reorder product page

change product page layout woocommerce

create custom woocommerce product page

remove paypal button from product page woocommerce

position add to cart single product page woocommerce

woocommerce page builder single product tabs

woocommerce product page hover image change

adjust product page layout woocommerce

add next previous to woocommerce product page wordpress

play s3 video on woocommerce product page

show long description in woocommerce product page

wordpress woocommerce add tabs to product page

how to remove in stock from product page woocommerce

woocommerce hide featured image on product page

how to add banner in product page woocommerce

how to change product page in woocommerce

woocommerce add button to single product page

woocommerce product page chage code

how to format product page on woocommerce

remove sidebars from product page woocommerce

woocommerce price product page size

style sale woocommerce product page

woocommerce product page format

wordpress woocommerce product page layout

move location of tabs on product page woocommerce

add text under variation add to cart on woocommerce product page

how to remove tag from product page woocommerce

woocommerce add sidebar to product page

By Ashley Pearce

I'm the founder of Future State Media, a "small-on-purpose" creator-focused SEO agency skilled in helping creators systematically generate traffic, build audiences and maximise their monetisation whilst staying true to their brand.