How to customize the WooCommerce Product Page – A complete guide
How to Customize the WooCommerce Product Page
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 probably the most important page in your WooCommerce store, but normally you have little control over the design. This is because the WooCommerce Product Page design is set by Woocommerce and generated automatically. One of the biggest problems most eCommerce stores face is this generic feeling, as research from the Baymard Institute has noted:
“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.”
Subsequently, all WooCommerce Product Pages tend to look exactly the same. But not all products are the same and many products deserve their own unique Product Page layout.
Would you like total freedom to design the whole WooCommerce Product Page any way you like? This guide will show you how to fully customize the WooCommerce Product Page. We’ll be using the WordPress Gutenberg Block Editor and the WooBuilder Blocks plugin. No Page Builder is required, and this method works on every WordPress Theme.
Let’s start with two examples.
The first example on the left is the default WooCommerce Single Page design, the second one on the right has been customized using the Block Editor. The WooCommerce Product Page that has been customized on the right is more visually exciting, showcases the product in a much more attractive way, and is very likely to boost sales.
Default layout
Customized with Block Editor
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.
What the Pros say about WooBuilder Blocks
Customizing the WooCommerce Product Page has two major benefits
1. Increased Sales
Having complete control over every element of the design, layout, and content of your WooCommerce Product Page is incredibly important if you want to give your revenue a boost. An awesome WooCommerce Product page will convert more of your prospects into new customers. With a custom Product Page you’ll be able to…
Start your 14 day free trial of WooBuilder Blocks
Total freedom to design the WooCommerce Product Page any way you want using the WordPress Block Editor.
- Showcase your products and reflect your brand.
- Maximise value from any product photography and video footage.
- Create urgency and spur your customers to purchase by adding powerful Product Page sales boosters like Sales Countdown Timers and Stock Quantity Counters.
- Establish trust and credibility by highlighting your customer reviews and testimonials.
Answer any customer objections upfront by displaying delivery timescales and shipping costs.
2. Improved SEO (Search Engine Optimization)
By breaking free of the default WooCommerce Product Page layout you can include much more keyword-rich content that your customers will be searching for on Google. This will give you a much better chance of ranking above your competitors on the search results page.
WooBuilder Blocks Feature list
| Features | Available in WooBuilder Blocks |
|---|---|
| Uses Gutenberg Block Editor Support | ✅ |
| Drag and Drop Designer | ✅ |
| Create Templates | ✅ |
| Custom Fonts | ✅ |
| Custom Add to Cart Button | ✅ |
| Support for Third-Party Gutenberg Blocks | ✅ |
| Support for Custom Hooks | ✅ |
| Request for Quote | ✅ |
| Sticky Add to Cart Button Block | ✅ |
| Stock Countdown | ✅ |
| Sales Countdowns | ✅ |
| Custom Tabs | ✅ |
| Custom Thank You Pages | ✅ |
| Custom Out of Stock Messages | ✅ |
| Hide Header, Footer, and Sidebar | ✅ |
| Custom Backgrounds (Images and Colours) | ✅ |
| Hand Pick Related Products | ✅ |
| Image Carousel/Slider Block | ✅ |
| Video for Product Images and Galleries | ✅ |
| Catalog Mode | ✅ |
How to customize the WooCommerce Product Page – step by step instructions
Here’s how the WooBuilder Blocks plugin works.
1. Add WooCommerce Product details as normal
First, you’ll need to pick up a copy of the WooBuilder Blocks plugin. Then go to Plugins > Add New in your WordPress dashboard, and upload the zip file to install it..
Once you have installed WooBuilder Blocks either create a new product or navigate to one of your existing products) and you’ll see a new option on the right that says ‘enable WooBuilder blocks’.
2. Create your new design using the Gutenberg Block editor and WooBuilder Blocks
Now you can use the Block Editor to design your WooCommerce Product Page. Simply click on Enable WooBuilder Blocks to start designing your Product Page with the Block Editor.
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 product templates that we’ve designed
- Use one of your own custom templates (instructions here on how to build your own WooCommerce templates).
Choose a pre-built layout
The Blocks included with WooBuilder Blocks
You can add WooBuilder Blocks anywhere within your WooCommerce Page layout, using the Gutenberg Block Editor to design your page.
WooBuilder Blocks include;
- Product Title Block
- Add to Cart Block
- Request a Quote Block
- Product Price Block
- Short Description Block
- Long 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
- WooCommerce Hooks Block
Customizing Blocks
Each WooBuilder Block also comes with lots of great customization settings.
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 button.
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.
Customize the Product Page layout
WooBuilder Blocks also comes with powerful settings so you can customize aspects of the Product Page layout.
- Hide Product Page Sidebar
- Hide Product Page Header
- Hide Product Page Footer
- Add a Background image
- Add a Background colour
3. Publish your new WooCommerce Product page design
When you have finished, you can publish your new snazzy design.
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 Templating system.
It’s incredibly easy to get working and only takes a few minutes.
12 Sales Boosting Tricks to Improve the WooCommerce Product Page
Customizing the WooCommerce Product Page can really boost your sales and conversions.
Here’s 12 top tips!
1) Add a Sales Countdown to increase urgency
Sales Countdowns can be a great way to encourage your customers to take action and make a purchase. Adding a sales countdown to the WooCommerce Product Page is really easy using WooBuilder Blocks.
All you have to do is add the Sales Countdown Block into the WooCommerce Product Page.
2) Showcase Product imagery with a Photo Carousel
The Product Images Carousel Block makes it easy to showcase your WooCommerce Products in a beautiful Carousel.
It automatically grabs your main product image and your product gallery images to use in the carousel. And because it’s a block and uses the WordPress Block Editor you can place it anywhere within your WooCommerce Product Page.
First just add the WooBuilder Product Images Carousel.
WooBuilder Blocks automagically takes your WooCommerce Product Image and Gallery Images and creates a beautiful auto-timed WooCommerce Carousel for your main product image.
3) Add a WooCommerce Featured Video
Video is a great way to really showcase your products and replacing your normal WooCommerce Product Image with a video is very easy – just add the video block! If you’re selling your own music videos or movies through your WooCommerce store, this is an easy way to add a trailer to each individual product page.
4) Customize WooCommerce Related Products
Related products are one of the most important ways you can encourage your visitors to browse your store, hold their interest for longer, and increase your Average Order Value (AOV). WooCommerce comes with a default “Related Products” section, but it looks very generic.
With WooBuilder Blocks, adding and customizing related products on the WooCommerce single product page is easy.
- 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
5) A/B Split Test the WooCommerce Product Page
Split Testing is a great way to check whether your new designs are working automatically by testing different versions of them. You can then look at the test metrics to see which version was better at meeting your goals.
WooBuilder Blocks is built with experimentation and development in mind, and so it comes with an A / B Split Testing Block. You can try out as many different layouts as you like and get key insights into which one worked best.
6) Add a full-screen WooCommerce Product Image
If your store is heavily visually-oriented, and you want to really highlight your Product Photography, WooBuilder Blocks lets you create a full-screen WooCommerce Product Layout.
All we need to do is use the WooBuilder Cover Block that comes with WooBuilder Blocks.
The WooBuilder Cover Block works in a similar way to the existing Gutenberg Cover Block, but it automatically grabs the WooCommerce product image and product data to create a beautiful full-screen WooCommerce Product.
As with all WooBuilder Blocks blocks, the WooCommerce cover block features quite a few customization options including,
- Change height
- Make full width
- Add parallax
- Add overlay colour
- Align text
The WooCommerce Cover Block can also be used to create templates that can be applied to multiple products.
7) Create a one-page WooCommerce website
One-Page WooCommerce websites are great if you only have one product that you want to showcase. These are also great if you need to create a WooCommerce Landing Page.
We’ve put together a video tutorial on how to create an awesome WooCommerce Landing Page or WooCommerce Single Page website, using the WordPress Gutenberg Block Editor and the WooBuilder Blocks plugin.
8) Vertically align your WooCommerce Product Gallery images
It’s important to have the flexibility to make your WooCommerce Gallery Images fit more accurately with your design and highlight them.
WooBuilder Blocks therefore gives you 4 options to choose for your product galleries
- Default layout
- Hide product gallery
- Left vertical align product gallery
- Right vertical align product gallery
9) Highlight customer reviews and testimonials
Customer reviews and testimonials are very important to establish trust and social proof of the value of your products. In the normal WooCommerce Product Page customer reviews are hard to find. As one of your most compelling sales tactics, you need your positive testimonials to be front-and-centre of your store.
Although some sites have a testimonials page,most customers will never visit it. The online shopping experience has to be accessible, clear, and, importantly, streamlined, so rather than forcing customers to skip to another page to see your reviews, you should make them visible throughout your website – most importantly on the WooCommerce Single Product Page.
Here’s one idea of how your customer testimonials could be used on the WooCommerce Product Page. In this example I’ve added a heading block and a paragraph block to the top of the Product Page. It’s really easy to do and makes a huge difference when a new customer lands on your product pages.
10) Display Shipping Information and timescales to prevent abandoned carts
Delivery methods, costs, and timescales are a crucial step in the customer journey, affecting whether they’ll either make a purchase from your store or go elsewhere. It’s important to meet and answer any objections up front to prevent customers from abandoning their carts further down the road.
As research from the Baymard Institute has noted:
The single most critical issue causing site abandonments 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.’
One simple way to solve this problem is to add clear details on your shipping costs and timescales directly on your product page. Here’s one idea.
11) Add a Stock Countdown to increase urgency
A great way to boost sales is to add a visual stock countdown to the WooCommerce Single Page to encourage customers to make a purchase before you run out of stock of a given product. Here’s a picture of the WooBuilder Blocks Stock Countdown Block, which you can add anywhere within the WooCommerce Product Page layout.
12) Display payment options to provide reassurance
Your customers would like to know what payment options you support upfront so they don’t waste time going through the whole checkout process only to find they can’t actually checkout using their preferred method.
I’d recommend displaying them right on the Product Page so that any sales questions about payment options are met straight away. This should reduce your cart abandonment rate as well as boosting conversions.
Here’s one idea of what you could do.
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.
Start your 14 day free trial of WooBuilder Blocks
Total freedom to design the WooCommerce Product Page any way you want using the WordPress Block Editor.
FAQ
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. Note that some themes disable the Gutenberg editor by default, so you may need to re-enable it in your theme settings.
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
In-depth and informative guide.