Combining WooCommerce & Gutenberg

Printing Press from Gutenberg

With Gutenberg getting closer and closer to being merged into WordPress core lots of plugins are thinking about ways they can take advantage of the new interface.

WooCommerce has been preparing for Gutenberg since last year. They're replacing the old [products] shortcode with a Gutenberg block and overall it looks great. If you want to display a specific set of products on a page the interface is phenomenal.

This is a great place to start and store owners can play with that functionality the day Gutenberg comes out. While this is a great place to start it's no where near where it's going to end. Gutenberg gives site builders so much control over their blog posts & pages. And eventually I'd like to see that same control applied to product pages.

Blocks & Templates

One of the cool things about Gutenberg is how extendable it is. Any plugin can add their own block or set of blocks. The new Products block will be included in WooCommerce core.

But if you want to change it you can write your own plugin to do so. Or you can add or modify blocks within a theme. If a particular layout works great in your theme you can modify blocks so they fit your theme perfectly.

Gutenberg isn't even out yet and there are plugins like Atomic Blocks collecting useful blocks for any theme. Atomic Blocks includes a lot of functionality including a testimonial block & a customizable button block both of which would be very helpful to an e-commerce store owner.

Product Page Layouts

Once all of the standard e-commerce functionality has been block-ified we'll start to see some really cool layouts that you can build with Gutenberg and that's what I'm most excited about.

Gutenberg Default Product Page

Here's the standard product page that we're familiar with in WooCommerce. We have a big image on the left, a description, a price, and button to add the product to the cart. These are the essentials of a product page. But not all product pages need these elements and they don't always need them in this order.

Gutenberg Product Page Dimensions

Let's say you're building a store for a furniture company (that was my first WooCommerce project). The dimensions for furniture is super important and you want it to be front and center.

You could put the dimensions front and center in Gutenberg. And you could change out one of the images for a video.

This is a pretty minor change and something that could be done through code but with Gutenberg you won't need code. You'll be able to build a product page with blocks and configure them.

Gutenberg Product Page Large Image

Let's take it one step further. I love buying art prints and I love looking through art galleries online. Unfortunately the typical WooCommerce page layout doesn't suit art. But with Gutenberg we can choose how how many columns you want. You could change the two column standard layout to a one column layout and let your image shine.

You can keep the description below the image and then add an add to card button. A minimalist design works really well for artists. It lets the work speak for itself which is what both I, the consumer, and the artist want.

Gutenberg Product Page Long

Finally let's look at a long form product page. Long form product pages are actually very effective at converting visitors. Instead of burying information in tabs they let you display all of the information visually on a longer page. This let's users scan the page for the information they want.

And it let's you add visual interest. It's very common to see the image on the left, text on the right; text on the left, image on the right pattern go back and forth on these long form pages.

They let you highlight some of the best testimonials so everyone sees them. And you can add multiple add to cart buttons so as soon as the user is ready to purchase they can do so. They don't have to read the whole page. Just enough to convince them and then there's an add to cart button.

Getting Ready for Gutenberg

All of the mockups that I showed in this post omit the sidebar. Eventually with phase 2 of Gutenberg (sometime in 2019) you should be able to control the sidebar. But for right now you'll need to have some other way to hide the sidebar. There are two main ways of doing this:

  • Your theme has a “full width” template
  • If you use Storefront you can use Powerpack (affiliate link) to hide the sidebar on the product pages

Or of course you can modify your theme with code to hide the sidebar. You don't have to hide the sidebar of course but most store owners don't know what to do with it and just fill it up with useless information. It's usually better to hide the sidebar and use that space for the product page itself.

Testing Gutenberg

You can test all of this functionality. You can test Gutenberg before it comes with WordPress itself by downloading the Gutenberg feature plugin from WordPress.org.

And with WooCommerce 3.4 you can use the new products block as well. The beta for WooCommerce 3.4 should be out sometime next week so you can test that functionality when it comes out.

All of this is still being tested so don't make any of these changes on a live site. Make sure to use a test site.

Conclusion

Gutenberg looks amazing. The ability to visually control a lot of different elements will give store owners so much power. It's a bit of a shame more hasn't been done already for e-commerce but that doesn't mean you can't do it.

Go ahead and create a plugin to enhance WooCommerce and make the most of Gutenberg. That's the beauty of WordPress. If something isn't to your liking you can change it.

4 thoughts on “Combining WooCommerce & Gutenberg

  1. I’ve installed Gutenberg and I also have the latest WooCommerce version (3.4.4) but when I’m adding products is do it the same way I always have. I’m I missing something?

  2. Same like Ivaylo
    Any changes?

  3. What happens to all the variables when creating a product in multiple colours, different SKU, variable head picture etc. With Gutenberg it seems you can simply build blocks but where is all the underlying stuff of the product?

  4. Alexandra jorgin

    This is something every Woocommerce developer need to know.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.