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