How to customize the WooCommerce Product Page – A complete guide
Would you like total freedom to design the whole WooCommerce Product Page any way you like.
To customize the WooCommerce Product Page; first, install the WooBuilder Blocks plugin, then enable the WordPress Gutenberg Block Editor on the Product Page, then design your Product page using the Block Editor and the WooBuilder Product Blocks.
Introduction – Why it’s important to customize the WooCommerce Product Page
The WooCommerce Product Page is one of the most important pages in your WooCommerce store, but normally you have little control over the design of this page.
Subsequently all WooCommerce Product pages tend to look exactly the same.
But not all products are the same, some Product Pages demand their own unique layout to really sell them.
Here’s two examples: the first one on the left is the default WooCommerce Single Page layout, the second one on the right has been customized.
Before
After
Customizing the WooCommerce Product Page has two major benefits
1. More Sales
An awesome WooCommerce Product page will convert more of your prospects into new customers
Make no mistake high-quality design is incredibly important in convincing your customers to buy from you. By creating a better design for your WooCommerce Product Page you’ll get a big advantage over your competitors because you can showcase your products in the best possible way.
2. Much much better SEO (Search Engine Optimization)
By breaking free of the normal WooCommerce Product Page layout you can include much more keyword rich content that your customers will be searching for on Google.
How to Customize the WooCommerce Product Page – A video tutorial
Here’s a 5 minute video tutorial that show’s you how easy it is to customize the WooCommerce Product page.
In this tutorial I’m using the WordPress Block Editor and the WooBuilder Blocks plugin.
Gallery – Examples of WooCommerce Product Pages that have been customized
Here’s some awesome examples of WooCommerce Product Pages that have been customized using WooBuilder Blocks and the WordPress Block Editor.
If you would like to see some live examples click here.
How to customize the WooCommerce Product Page – step by step instructions
1. Add WooCommerce Product details as normal
First head over and pick up a copy of the WooBuilder Blocks plugin and then install it via plugins on your WordPress website.
Once you have installed WooBuilder Blocks enter your product details in the normal way (or go to an existing product) and you’ll see a new option on the right that says ‘enable WooBuilder blocks’.
Once you enable WooBuilder Blocks you’ll have the three options shown in the screenshot below.
- Build your WooCommerce Product design from scratch
- Use one of the pre-built templates that we’ve designed
- Use one of your templates (instructions here on how to build your own WooCommerce templates)
Choose how to start; Start from scratch, Pick a prebuilt template, Use one of your templates
WooBuilder Blocks comes with pre-designed templates
The Blocks included with WooBuilder Blocks
You can add these WooBuilder Blocks anywhere within your new WooCommerce Page layout, using the Gutenberg Block Editor to design your page.
WooBuilder Blocks include;
- Add to Cart Block
- Request a Quote Block
- Product Title Block
- Product Price Block
- Short Description Block
- Product Image Block
- Video Gallery Block
- Product Image Carousel Block
- Product Cover Block
- Product Reviews Block
- Star Ratings Block
- Product Meta Block
- Tabs Blocks
- Sales Countdown Block
- Stock Countdown Block
- Related Products Block
- Upsell Block
- Template Block
- Split Testing Block
Each Block also comes with its own set of customization options.
For example, it’s now easy to change the font, font size, the font color of the WooCommerce Product title, and the WooCommerce add-to cart.
2. Create your new design using the Gutenberg Block editor and WooBuilder Blocks
Top tip – to create grid layouts for your WooCommerce Product Page then consider using the WordPress Columns Block or a specialized Gutenberg based layout block like Gutenberg Pro, the Caxton Layout Block, or the Kadance Layout Block.
3. Publish your new WooCommerce Product page design
You can then use your new WooCommerce Product Page design as a template and apply it to multiple products using categories and tags
4. Create Templates that can be used on multiple WooCommerce Products
If you want to apply your new super duper WooCommerce Product Listing Page designs to multiple products then you can use the WooBuilder Template system.
It’s incredibly easy to get working and only takes a few minutes.
Here’s how it works.
The Science behind making a better WooCommerce Shop Page
The Baymard Institute are the World’s leading research company on ecommerce design, and have analyzed thousands of ecommerce websites.
These is what they say about the Product Page.
‘Nearly all users go through a product page before making any purchase, and it’s often on the product page where users make up their mind on whether or not they want to purchase the item.The product page is the centerpiece of your users’ e-commerce experience. Yet at the same time, the product page layout and features tend to be under a lot of strain as they often rely on the same template re-used across the entire site’s product catalog.
It’s often on the product page where users make up their mind on purchasing the item or not. Hence, we’ve observed that even small UX issues in a site’s product page implementation will often cause direct site abandonments. For example, the single most critical issue is that 51% of sites do not offer a shipping estimate or a shipping calculator at their product pages, this is despite the fact that a majority of users will try to seek out this very information.’
Source: Baymard Institute
Whether you need to add a shipping estimate, an awesome product video, or much larger product images, or more SEO friendly text – this method makes it all possible.
The beauty of this approach is that there are no limitations on the design of WooCommerce Product page layout.
Here’s just some of the things you’ll be able to customize with the WooCommerce Product page.
- Fully customize the layout of the WooCommerce Product Page
- Change the layout of the WooCommerce Product Image
- Change the size of the WooCommerce Page Product Image
- Change the WooCommerce Product Page background
- Change the WooCommerce Product Page template
- Hand pick which related products to show to increase up sells and cross sells
- Make the WooCommerce Product Page image full width
- Replace the WooCommerce Product image with a video
- Turn on and off Product Gallery Images
- Change the font, color and size of the WooCommerce Product title
- Change the position of the WooCommerce Product tabs
- Change the position of the WooCommerce Product reviews
- Add custom fields to the WooCommerce Product Page
- Change the order of the fields on the WooCommerce Product Page
- Change the style of the WooCommerce Product Page add to cart button
- Change the related products shown on the Product page
The WordPress plugin I used to customize the WooCommerce Product page
Introducing WooBuilder Blocks
Each of the WooCommerce Product Pages examples above have been customized and built in a matter of minutes with the WooBuilder Blocks plugin.
WooBuilder Blocks is a WordPress plugin that lets you customize the WooCommerce Single Product Page for a single product, a category of products, or for all your products.
WooBuilder Blocks is built to be super fast and lean, and because it’s designed to be used with the WordPress Block Editor (Gutenberg), no Page Builder is required, so it won’t slow down your website.
WooBuilder Blocks works on any WordPress theme!
You can customize the layout of the WooCommerce Product Page using any WordPress theme. WooBuilder Blocks has been tested with Divi, Storefront, Astra, Ocean WP, Avada, Enfold, Flatsome, Genesis, BeTheme, Twenty Nineteen, Salient, Sydney and more.
Important note: Divi and Avada disable the new Block Editor (Gutenberg) so you’ll need to re-enable Gutenberg in the theme settings. Once Gutenberg is re-enabled WooBuilder Blocks will work as expected.
Customize WooCommerce Product Page – full length video walkthrough
How to customize WooCommerce Related Products
One the big benefits of this approach is that you can easily get 100% control of your WooCommerce Single Product Page related products.
Here’s just a few of the WooCommerce related product customizations that are possible.
- Change what products to show in WooCommerce related products
- Hide WooCommerce related products
- Change the number of WooCommerce related products
- Change WooCommerce related products title
- Change WooCommerce related products columns
- Change WooCommerce related products image size
- Add a WooCommerce related products carousel
- Create a totally unique WooCommerce Related Products section
Here’s a video that explains how to fully customize WooCommerce Related Products.
How to add Video to replace your WooCommerce Product Image
Video can be incredibly powerful to showcase your products.
Because we are using the WordPress Block Editor, then adding a Video to replace the default WooCommerce image is really simple.
All we need to do is the following
- Grab the Video embed code from your video
- Add the HTML block into your layout
- Paste the code
Here’s a little video (no sound) that shows you how simple it is.
How to set up WooCommerce Single Product A / B Split testing
WooBuilder Blocks also comes with an A / B Split Testing Block. This lets you test different versions of the same product and then choose the winner.
Here’s a video walkthrough of the WooCommerce Split Testing Block.
Example products built with WooBuilder Blocks and Gutenberg
Take WooBuilder Blocks for a risk free 14 day trial (cancel at any time)
Not using Gutenberg yet? Then Use our Pagebuilder Pro plugin to customize the WooCommerce Single Product Page
If you are not using the new Gutenberg Block editor, 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;
- 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
- Create a unique WooCommerce Product Page layout
- Create a template out of that unique Product Page
- 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.
default layout customized layout
How it works
Create your unique WooCommerce Product Page is really easy
- Create your WooCommerce Product
- Click on the red ‘Product Builder’ button
- Design your new WooCommerce Product layout
- Use your new design as a template for other WooCommerce producdts
FAQ
How do I change the layout of a product in WooCommerce?
Our WooBuilder Blocks plugin lets you change the layout of your WooCommerce Product Page. It uses the new Gutenberg Block Editor so that you can create any layout you can imagine. In addition WooBuilder Blocks also gives you extra options including Split Testing.
How do I override a WooCommerce template?
You can either dive into the code or use the WooBuilder Blocks plugin :) WooBuilder automatically overrrides the normal WooCommerce template so you can change the design easily.
Can I create WooCommerce Product Page templates that I can use on multiple products?
Yes. With WooBuilder Blocks you can save your design as a template and then apply to multiple products using WooCommerce Categories and Tags.
Does WooBuilder Blocks work on every theme?
Yes. WooBuilder Blocks is designed to be theme neutral. We’ve tested on most of the most popular WordPress themes, including Astra, Divi, Avada, GeneratePress, WPOcean and many more.
Can I A/B test different WooCommerce product layouts?
A/B testing (or Split Testing) is when you test out two versions of your WooCommerce product (here’s a good article with more detail on how A/B testing works). WooBuilder Blocks now comes with a Split Testing Block. This lets you run multiple versions and layouts of the same WooCommerce product. The Split Testing Block gives you real time statistics on which has been the most successful layout. Finally you can select the winning layout as your choice.
Thanks for good tutorial. Very helpful
Videos are really helpful.. thanks
Thanks for the video. Very nice content!
Where can we find the plugin for woo builder? Is it only available to certain wordpress versions?
Hi Chelsea,
WooBuilder is part of our Pagebuilder plugin , found here https://pootlepress.com/pootle-pagebuilder-pro/
kind regards
jamie
Hi Chelsea,
We now have a gutenberg based version of woobuilder which you can find here https://pootlepress.com/woobuilder-blocks/
Thanks for the above information it helps me customise my site and also to know the working of it
Can I switch image area and product short description area once install the plugin?
Yes :)
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.
How do we edit the template of an existing product page?
Hi Sina, that’s shown in the 2nd video on the page,
You make mention of it in the video but do not actually show how to do it. I need assistance with it too please
superb thanks bro
Hi! This plugin competable with AVADA?
Hi, yes it is :)
Hello
Can you have more than one layout for a product page?
Yes you can :)
Hi,
Can we use it for bookable products?
Yes you can :)
Will this plugin allow you to add any WooCommerce Subscriptions options to a product page?
Hi , yes it will :) It works with WooCommerce Subscriptions and Memberships – here’s an example product built with WooBuilder Blocks and WooCommerce Subscriptions http://www.socialpress.co.uk/product/subscription-product/
Hi, I’d love to use this on our site (looks amazing!) however, downloaded plugin and can’t find the “enable WooBuilder blocks” button while on product page…..
Hi Julian
Can i double check you have purchase this plugin https://www.pootlepress.com/woobuilder-blocks/ .
If you have, could you raise a support ticket here pootlepress.com/support-form
It sounds like you might have the new Gutenberg Editor disabled – check if you have the classic editor plugin installed, as this disables the new Gutenberg Editor.
jamie
Will Woobuilder work with product attributes?
Yes :)
Hi Mike – yes it does :)
Are you 100% Sure it will work with total theme? Total theme uses WP Bakery. Are you sure there is no conflict?
Hi Neil – we have customers using WooBuilder Blocks with WP Bakery. Just make sure in WP Bakery settings that you don’t have the Gutenberg Editor disabled. Here’s a link from WP Bakery website that explains things https://kb.wpbakery.com/docs/faq/does-wpbakery-page-builder-works-with-the-gutenberg/
Very beautifully describe about how to customize the WooCommerce Product Page. It easy to understand and implement. Thanks for sharing with us.
Hi, I want to show video only specific category on single product tab section . Which category have video the description tab section will show active. other category single product will show review tab active, Can any one help me
How can I show more than 2 related products?
Hi,
I would just the woocommerce blocks to hand pick whatever products you want to show :)
jamie
Thank you, can it be used for DIVI theme?
Yes it can :)
Hi, you made a tiny typo here http://prntscr.com/rqruqg – “Woobuider”
Overall great content, very useful, thank you =)
Thanks for the ‘heads up’ fixed :)
Overall great content, very useful, Thanks in advanced:)
Hi !! 3 questions for me :
1/ Is your plugin compatible with any “one page checkout” plugin, (this one for example https://codecanyon.net/item/woocommerce-one-page-shopping/7158470) ?
2/ You confirm that it works with variable products ? How does the images of each variation appear ?
3/ I didn’t understand clearly if everything works only by buying this plugin, or do I have to buy another one to make it work (caxton blocks,…) ?
Thank you !
Hi Aude,
Here’s a few answers
1) This week we are working on our own ‘one page checkout’ functionality that works with the upcoming checkout block that’s going to be included in the next version of woocommerce blocks (from woocoommerce) as we feel this will give customers the maximum flexibility :)
2) Yes woobuilder blocks works ‘out of the box’ with variable products. Here’s a demo http://woobuilderblocks.com/product/dnk-orange-sports-shoes/. It also works great with the WooCommerce attribute swatches plugin (by iconicwp.com) , here’s a demo of that one http://woobuilderblocks.com/product/dnk-yellow-sports-shoes/
3) Yes you just need to buy woobuilder blocks. It does require our gutenberg framework plugin caxton but that is a free plugin :) This is all handled during installation. We built caxton as a framework for all our gutenberg based plugins (so we don’t need to include some of the same core block functionality in each plugin).
Hi Jamie,
Thank you for your quick reply !!
Ok so for the “one page ckeck out” would you advise me to wait for the new version you are about to release ?
I would have to install the plugin woocommerce blocks + yours, right ?
Do you know when they will release the new version of woocommerce blocks ?
Thank you for the demo, perfect.
Noted for caxton!
Aude.
Hi Aude,
Yes i would wait – we should have a beta ready next week,
WooBuilder Blocks is now part of woocommerce (but also as a plugin) so you may need to add the plugin to get the latest version (with the checkout block)
You can actually get the beta of woocommerce blocks now from here https://github.com/woocommerce/woocommerce-gutenberg-products-block/releases
any questions, feel free to ask :)
jamie
Ok perfect, thank you !
Can this edit mobile pages as well?
Yes if you use a layout block like our Caxton Layout Block – that has mobile settings built in :)
Hi ! Same question I guess but asked differently : is your plugin responsive ?
Or do we have to do different settings for mobile and desktop ? Thank you !
Hi
Yes we have settings for different layouts for mobile and tablet :)
kind regards
Jamie
Hello how are you? I use Yootheme Pro as my website template. Can you tell me if your plugin is compatible with it? It was not very clear to me if I need to use any more plug-ins together with WooBuilder Blocks, if so can you indicate which one? Thank you.
Hi Ricardo,
I haven’t tested with Youtheme so I’m not 100% sure – but we have a trial so you can test it out risk free :)
WooBuilder Blocks uses the WordPress Block Editor so doesn’t need any pagebuilder –
It does require our free Caxton plugin (this is our gutenberg framework) , but that is all handled during the installation
jamie
Hi,
I want to ask if this plugin is compatible with Kallyas theme. And another question, it’s possible to design this view, more or less?
https://www.carnext.com/es-es/coches/renault/clio/4z6mx-v6qd-1z63/
https://www.clicars.com/coches-segunda-mano-ocasion/comprar-land-rover-range-rover-evoque-2-0l-td4-110kw-110kw-4×4-se-auto–150-4×4-suv-automatico-2017-7988
Thanks
Hi,
Yes that layout is possible :)
Regarding the theme – I haven’t tested with that particular theme, but it should work fine. We have a trial option so you can try woobuilder blocks out for 14 days.
kind regards,
jamie
Hi Jamie,
In this design:
https://new.dimasumotor.com/producto/volkswagen-golf-2-0-tsi-270cv-dsg-4motion-r/
I want to be able to put the product attributes differently, not as a tab.
How can I put the attributes as icons?
Where is the configuration of Product Images Carousel?
How can I put the bullets under the Product Images Carousel?
Thanks,
Hi can you also use this program to change the homepage and other pages of your site?
Can you also change your homepage with your software?
Hi Jag, we have another plugin called Storefront Blocks that lets you change the homepage. Here’s the link https://www.pootlepress.com/storefront-blocks/
thanks
Jamie
Thanks