How to customize the WooCommerce Product Page with WordPress Gutenberg

Introduction

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

Here are some examples of WooCommerce Product Pages that have been designed using WooBuilder Blocks and the WordPress Block Editor.

Video tutorials

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.

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.


Comments

57 responses to “How to customize the WooCommerce Product Page with WordPress Gutenberg”

  1. Thanks for good tutorial. Very helpful

  2. Videos are really helpful.. thanks

  3. Thanks for the video. Very nice content!

  4. Where can we find the plugin for woo builder? Is it only available to certain wordpress versions?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Chelsea,

      WooBuilder Blocks is available in our plugin store
      kind regards
      jamie

    2. Jamie Marsland Avatar
      Jamie Marsland

      Hi Chelsea,

      We now have a gutenberg based version of woobuilder which you can find here https://pootlepress.com/woobuilder-blocks/

  5. Thanks for the above information it helps me customise my site and also to know the working of it

  6. Can I switch image area and product short description area once install the plugin?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Yes πŸ™‚

  7. 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.

  8. How do we edit the template of an existing product page?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Sina, that’s shown in the 2nd video on the page,

      1. You make mention of it in the video but do not actually show how to do it. I need assistance with it too please

  9. Vivek jade Avatar
    Vivek jade

    superb thanks bro

  10. Hi! This plugin competable with AVADA?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi, yes it is πŸ™‚

  11. Hello
    Can you have more than one layout for a product page?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Yes you can πŸ™‚

  12. Hi,
    Can we use it for bookable products?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Yes you can πŸ™‚

  13. TheKev Avatar

    Will this plugin allow you to add any WooCommerce Subscriptions options to a product page?

    1. Jamie Marsland Avatar
      Jamie Marsland

      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/

  14. Julian Avatar

    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…..

    1. Jamie Marsland Avatar
      Jamie Marsland

      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

  15. Will Woobuilder work with product attributes?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Yes πŸ™‚

    2. Jamie Marsland Avatar
      Jamie Marsland

      Hi Mike – yes it does πŸ™‚

  16. Neil Mansfield Avatar
    Neil Mansfield

    Are you 100% Sure it will work with total theme? Total theme uses WP Bakery. Are you sure there is no conflict?

    1. Jamie Marsland Avatar
      Jamie Marsland

      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/

  17. Very beautifully describe about how to customize the WooCommerce Product Page. It easy to understand and implement. Thanks for sharing with us.

  18. 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

  19. Getmilk Avatar

    How can I show more than 2 related products?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi,

      I would just the woocommerce blocks to hand pick whatever products you want to show πŸ™‚

      jamie

  20. Thank you, can it be used for DIVI theme?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Yes it can πŸ™‚

  21. Hi, you made a tiny typo here http://prntscr.com/rqruqg – “Woobuider”

    Overall great content, very useful, thank you =)

    1. Jamie Marsland Avatar
      Jamie Marsland

      Thanks for the ‘heads up’ fixed πŸ™‚

  22. Overall great content, very useful, Thanks in advanced:)

  23. 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 !

    1. Jamie Marsland Avatar
      Jamie Marsland

      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).

      1. 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.

        1. Jamie Marsland Avatar
          Jamie Marsland

          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

          1. Ok perfect, thank you !

  24. Manny Avatar

    Can this edit mobile pages as well?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Yes if you use a layout block like our Caxton Layout Block – that has mobile settings built in πŸ™‚

      1. 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 !

        1. Jamie Marsland Avatar
          Jamie Marsland

          Hi

          Yes we have settings for different layouts for mobile and tablet πŸ™‚

          kind regards
          Jamie

  25. 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.

    1. Jamie Marsland Avatar
      Jamie Marsland

      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

    1. Jamie Marsland Avatar
      Jamie Marsland

      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

      1. 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,

  26. Hi can you also use this program to change the homepage and other pages of your site?

  27. Can you also change your homepage with your software?

    1. Jamie Marsland Avatar
      Jamie Marsland

      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

  28. Thanks

  29. In-depth and informative guide.

Leave a Reply

Your email address will not be published. Required fields are marked *