- WooBuilder Blocks review by Paul C from WPTUTS
- Amazing designs with WooBuilder blocks
- Video tutorials
- How to create a beautiful Product Page with WooBuilder Blocks
- How to add Product Image compare to WooCommerce
- How to add a Request a quote and Call for Price buttons to the WooCommerce Product Page
- How to build a full-screen WooCommerce Product Page
- How to fully customize WooCommerce Related Products on the Product Page
- How to Make your WooCommerce Product images POP!
- How to create a One Page website for your WooCommerce Product Page
- Eight powerful new ways to improve the WooCommerce Product Page
- How to create WooCommerce Product Page Templates
- Block Themes and WordPress Full Site Editing
Customizing your WooCommerce Product Page is made easy with the WooBuilder Blocks plugin and WordPress Gutenberg Block Editor.
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 template layout is set by Woocommerce.
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.
But with WooBuilder Blocks you’ll have 100% control over the WooCommerce Product Page
We’ve built all the WooCommerce Product Blocks that you need so can design the Product Page in any way you like, In a matter of minutes, you will be able to create awesome Product Pages.
WooBuilder Blocks review by Paul C from WPTUTS
Amazing designs with WooBuilder blocks
Here are some examples of WooCommerce Product Pages that have been designed using WooBuilder Blocks and the WordPress Block Editor.
In my video tutorial below I show you how to customize the product page in WooCommerce.
The tutorial shows how to enable the block editor and load Gutenberg, and how to use the blocks to customize the WooCommerce product layout, including adding a gallery, a two-column layout, a short description, a product title, star ratings, the price, and an “Add to Cart” button.
How to create a beautiful Product Page with WooBuilder Blocks
In this video I demonstrate how to create custom designs for a specific product page. I based it on Chris Lema’s article on designing effective product pages, emphasizing the significance of reviews, product images, and videos.
How to add Product Image compare to WooCommerce
The video is about a free plugin for WooCommerce called Image Comparison Block. I demonstrate how to use the plugin to create a side-by-side image comparison on a WooCommerce product page.
How to add a Request a quote and Call for Price buttons to the WooCommerce Product Page
The video describes two features that can be added to a WooCommerce product page: a “Request for Quote” button and a “Call for Price” button.
The Request for Quote button leads customers to a form where they can request a quote for a product instead of purchasing it directly on the site.
The form dynamically picks up the product name and sends the product information to the seller. The Call for Price button replaces the “Add to Cart” button and allows customers to make a call to the seller directly from their phone.
The Request for Quote form was built using the Ninja Forms plugin.
How to build a full-screen WooCommerce Product Page
In the video below is my tutorial on how to build a full-screen WooCommerce product page using the Gutenberg block editor and the Astra theme.
The tutorial walks through the steps of setting up the product information in WooCommerce, using the block editor to customize the product page, using the Columns block to create a two-column layout, and using the plugins to add background colors and other customizations to the product page.
The video covers how to use blocks such as the Product Title, Price, and Short Description to add product information to the page.
How to fully customize WooCommerce Related Products on the Product Page
In my tutorial below I show you how to fully customize related products on a product page. I show how to change what products to show, hide certain related products, change the number of WooCommerce related products, change the title of related products, change the number of columns shown, change the product image sizes, add a related product carousel, and create a unique WooCommerce related product section.
How to Make your WooCommerce Product images POP!
In my video tutorial below I show you how to make product images stand out on a WooCommerce store. The first tip is to place the product image against a colored background, the second tip is to use a shaped background to make the product image stand out, and the third tip is to use the product image as the entire background of the page, making the product stand out even more.
How to create a One Page website for your WooCommerce Product Page
In my video tutorial below, I show you how to create a one pager website for WooCommerce.
Eight powerful new ways to improve the WooCommerce Product Page
My video tutorial below shows how to create a landing page using WooCommerce, highlighting a particular product with a gallery, parallax effect, and add-to-cart button.
How to create WooCommerce Product Page Templates
My video tutorial below explains how to create templates for single product pages in WooCommerce. The process involves creating a custom design and then saving it as a template. The template can then be applied to multiple products by categorizing them or adding tags. The video demonstrates how to save a template, find it in the product templates section, and apply it to a specific category. The changes made to the product layout will be reflected on all products within that category, making it easier to apply similar designs to multiple products.
Block Themes and WordPress Full Site Editing
In my video below I demonstrate how WooBuilder Blocks recently received a big update with new features. It allows users to use Gutenberg to design product pages and save them as templates. The update now fully supports Block Themes, which means the layout designed in the site editor will be applied to every single product on the site. The second big update is the ability to use WooBuilder blocks on any page, not just a single product page, by using blocks to design the pages and insert dynamic content.
57 thoughts on “How to customize the WooCommerce Product Page with WordPress Gutenberg”
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?
WooBuilder Blocks is available in our plugin store
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?
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 🙂
Can you have more than one layout for a product page?
Yes you can 🙂
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…..
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.
Will Woobuilder work with product attributes?
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?
I would just the woocommerce blocks to hand pick whatever products you want to show 🙂
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 !
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).
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!
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 🙂
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 !
Yes we have settings for different layouts for mobile and tablet 🙂
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.
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
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?
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.
In this design:
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?
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/
In-depth and informative guide.