WooBuilder Blocks Review: Build WooCommerce Product Pages With Gutenberg

If you run a WooCommerce store, you always want to put your products’ best feet forward so that you can rack up as many sales as possible.

But when it comes to the WooCommerce single product page, you’re pretty much just limited to the pre-made design that your theme comes with.

But what if you want to customize that design, for a single product, a category of products, or for all your products?

WooBuilder Blocks gives you the ability to customize your WooCommerce single product page using the new drag-and-drop WordPress block editor (AKA Gutenberg).

In our WooBuilder Blocks review, I’ll share more about its features and show you how this tool works on an actual WooCommerce store.

WooBuilder Blocks Review: The Feature List

The basic premise of WooBuilder Blocks is pretty simple – it lets you use the new WordPress block editor (Gutenberg) to design your single product pages by optionally activating the block editor for single products and giving you access to a set of WooCommerce product detail blocks.

You can use it to design product pages like this:

Or like this:

Or like whatever you want! That’s the whole point – you can build your own designs.

But while that functionality is simple to grasp, the implications are pretty powerful because it gives you the ability to fully customize all or some of your WooCommerce products.

To control where your designs appear, you can automatically apply the templates that you create to certain product taxonomies. For example:

• All products in Category X
• All products with Tag Y

And you also get some helpful new blocks, like a sales countdown timer to drive urgency.

Beyond that, you can also use all the regular blocks, as well as any blocks that you’ve added with third-party plugins. That gives you a ton of flexibility for adding new content. For example, you could bring in a video gallery or testimonials from happy customers.

And you’ll also get simple style options in the sidebar, just like the regular Gutenberg blocks.

WooBuilder Blocks Roadmap

While these features haven’t been released at the time that I’m writing this review, the developer has already released the product roadmap for what’s on the way.

In the immediate term, he’s working on:

• Pre-designed templates that you can insert and customize
• More product gallery layout options
• An advanced product layout block

And in the longer term, he has plans to add split testing for WooCommerce single products. This is a really interesting feature that would allow you to test different single product layouts to find the designs that convert best.

Ready to check it out? Let’s go hands-on and I’ll show you how it works…

Hands-On With WooBuilder Blocks: How Everything Works

In order to use WooBuilder Blocks, you’ll also need to install the free Caxton plugin from the same developer (PootlePress). Caxton is a collection of Gutenberg blocks that help you create more complex layouts and, because WooBuilder Blocks lets you use blocks from third-party plugins, this gives you more flexibility for your WooCommerce product designs.

Once you have both WooBuilder Blocks and Caxton installed and activated, you’re ready to start building.

There are two ways to go about designing your single product pages:

1. You can create templates that you automatically apply to products based on their taxonomies
2. You can design completely unique designs for individual products

No matter which approach you’re going with, you’ll get started in the same way, which is to open a product at your site and click the Enable WooBuilder Blocks button:

Using WooBuilder Blocks

Enabling WooBuilder Blocks will open the same familiar WordPress block editor interface that you use to create posts or pages. In fact, that’s one of the nice things about this approach – you don’t need to learn a new interface:

To design your product, you’ll be able to use all the regular WordPress blocks, along with a new set of Woobuilder blocks and the blocks from the Caxton plugin:

In total, you get dedicated blocks for your WooCommerce product’s…

1. Title
2. Add to Cart button
3. Images
4. Price
5. Reviews
6. Related products
7. Tabs
8. Short description
9. Meta information (e.g. product category)
10. Rating
11. Sale counter – a neat way to add urgency by counting down to when the sale ends

In addition, you’ll also get the Caxton blocks, which help you with your layout. Kadence Blocks would be another good option here, as that plugin gives you some really nice layout options.

For example, you could create a simple two-column layout with Caxton:

Then, you can add your WooBuilder blocks inside that two-column layout to add your product details.

One nice thing is that WooBuilder will dynamically add the actual product details, which helps create a more visual experience. That is, if you add the Price block, it will display the actual price of the product you’re editing, rather than generic content.

Here’s a simple example, where the left column has the image and meta info, and the right column has the title, price, and add to cart button:

And if you look at that on the frontend, you can see that layout, along with the theme’s styling:

Speaking of styling, let’s talk about how to make that layout look a little better…

Styling Your WooBuilder Blocks Designs

To style your designs, you’ll get color and typography controls in the sidebar for each block:

Different blocks will have additional options. For example, the Add to Cart block lets you add an outline to the button and input, as well.

In addition, remember that you can use all of the other blocks, too. For example, to add some spacing between the different elements, you could use the native Spacer block.

Once you do that, you’ll have a little more room to breathe on the product page:

Spicing Things Up With More Blocks

Again, one of the really neat things WooBuilder Blocks lets you do is incorporate third-party blocks from the plethora of plugins out there.

For example, let’s say you want to add a lightbox popup video to your product page to help show off your product.

You’d add the block on the backend (I’m using Stackable to get access to a video block like this). And then voila – a popup video lightbox that fits right into your product page:

Or, you could also bring in more blocks from WooBuilder Blocks. For example, the Sales Counter block is a really nice way to add urgency to your store when products are on sale:

How to Save Your Design as a Template

If you only want to use your design for a single product, all you need to do is update the product and you’re done.

However, if you’d like to reuse your layout across multiple products, you can opt to save it as a template:

When you do this, you’ll be able to see a list of all your templates by going to Products → All Templates.

And when you edit a template, you’ll be able to select which product categories and tags to apply it to:

For example, if I apply it to the Accessories category, all the products in that category will automatically adopt that template.

If you don’t want to apply the template to all products with a certain taxonomy, you can also quickly apply the template when you’re editing an individual product.

WooBuilder Blocks Pricing

WooBuilder Blocks offers four packages. All the packages are full-featured, the only difference is the number of sites you can use them on:

• 1 site – $49
• 5 sites – $75
• 25 sites – $99
• Unlimited sites – $199

Final Thoughts on WooBuilder Blocks

WooBuilder Blocks is a really neat way of integrating the new WordPress block editor into WooCommerce. Without the need for a page builder plugin like Elementor or Beaver Builder, you’re able to gain full control over the design of your product pages.

Where this becomes really powerful is combining WooBuilder Blocks’ blocks with all the innovative new blocks that third-party developers are creating.

That combination gives you a ton of flexibility, all without needing to learn a new interface.

Overall, if you like the basic premise – building WooCommerce single product pages with the Gutenberg block editor – you should definitely give this a look.

Everything worked perfectly in my testing, and the product roadmap looks really interesting going forward (mainly the split testing functionality).

To get started, click below:

Get WooBuilder Blocks