On December 6th, 2018 the controversial new editor experience for WordPress dropped and it’s called Gutenberg. While many are concerned about how it was rolled out I don’t think that anyone can deny that Gutenberg is the future of WordPress. That also means that Gutenberg is the future of WooCommerce, so let’s dive in and see what Gutenberg has to offer WooCommerce currently.
What Gutenberg Blocks are Available for WooCommerce?
By default there are no blocks bundled with WooCommerce as of WooCommerce 3.5.1 so you’ll need to head over to the WooCommerce site to get WooCommerce Product Blocks. WooCommerce Product Blocks is a free add-on to WooCommerce. To continue along with me you’ll need to get the plugin, add it to your site and then activate it. From there, navigate to a page to start adding products to the site.
Adding a WooCommerce Product with Gutenberg
To get started adding products, start by clicking on the plus in the top left corner of your Gutenberg-powered site. Now type “products” to filter the block options down to the blocks that deal with the products in the store. Then click on the “Products” block.
This block should appear below any content on your page. Now you can choose to show products in a number of different ways. Let’s choose to add an individual product to our page to get started. Click “Individual products”, which should bring up a search box for you to start searching your products by their names. Once you find the product you want, click on it to add it to the block.
You’re not limited to a single product though, you can even add multiple products from a single search. They’ll display listed across in a grid fashion by default.
Once you have the products you want to show selected, click done and then make sure you save your page.
In addition to hand-picking products, you can add products from a specific category to a page. If there are sub-categories you can choose which ones you want to display.
Selecting a category will add every product inside that category to the page.
You can also use a Product Block to show products by a specific product attribute. As Valentine’s Day approaches, you could use your color product attribute to build a custom page with all the red products you have in the store to suit the season.
Just like the other ways we’ve looked at showing products, this will add all of the products that match the attribute to your page. You can use a number of attributes like:
- Products on Sale
- Best Sellers
- Featured Products
- Top-Rated Products
The other block that is available with the WooCommerce Product Blocks plugin allows you to show products by category, which duplicates the functionality of adding products by category with the products block.
Customizing Your WooCommerce Gutenberg Product Block
While we’ve toured some of the basics of adding product blocks to your content, we haven’t taken a look at what the customization options are to maximize how your page looks.
To start, WooCommerce Product Blocks lets you customize the number of products that are shown in both columns and rows.
You could leverage this to show a single product on a long form sales page by making your product block only display one item per column. Then you would choose a single product to add to the block.
You can also use the block settings to change the order of your products with the following options available now:
- Newest – newest first
- Price – low to high
- Price – high to low
- Rating – highest first
- Sales – most first
- Title – alphabetical
Finally, under the advanced options, you can add a custom CSS class if you want to do further styling to your block to help it suit your theme. Given the right CSS rules, you could change the layout.
Building a Custom Product Landing Page with WooCommerce and Gutenberg
Now let’s take some of the knowledge we’ve gained about WooCommerce and Gutenberg to build ourselves a long form sales page for a product. You can start by creating a new page giving it a title. I’ve also added a bit of text to a paragraph block and used the drop cap option found on the right side of our block settings.
With many long-form sales pages, we’ll end up adding the product to the page a few times. You do this to give people the opportunity to purchase your product as soon as they are convinced that it’s a good buy for them.
Next, add a product block and choose a single product to add to your page. Then move over to the right side and change the column display to a single product per column. This should give you a large version of the product displayed on the page with an add to cart button just below it.
Next, click on the three vertical dots at the top of your product block and choose to “Add to Reusable Blocks.” This will let us take the block we’ve created for ourselves and easily get to the exact settings we already have without needing to go through the hassle of finding the product and changing our column settings again later. Title this block whatever you want and then save the reusable block.
Now we can add some more text to the page which would be used to show the users the benefits of our amazing hoodie. Let’s even use the quote block to provide a testimonial from one of the happy hoodie clients.
Then you’d normally add some more text showing off the benefits of your product for the users or answering any questions they may have about the product. We can use a column block to do this and answer two questions for our user. We can finish off this page by using our reusable hoodie block to invite the user to purchase our amazing hoodie again.
Previously when clients wanted a custom product landing page like this they would have to use some page building plugin. Some of these are decent, but a vast majority are less than desirable on your site. When I compare the experience of Gutenberg to these other page building options, Gutenberg is far more intuitive for my customers to use on their own without needing me to build anything custom for them.
Other Gutenberg Resources
If you’re getting ready to really wrap your head around Gutenberg now that WordPress 5.0 has dropped, here is a list of solid training resources you can use to get yourself up to speed.
Combining WooCommerce and Gutenberg
This short tutorial on Gutenberg helps you start thinking in blocks as you layout your content. Patrick provides another reason you’d want to use a longer sales page to sell different types of products.
iThemes provides us with two great resources for Gutenberg. First is a webinar on WooCommerce and Gutenberg. This is an hour of talk on Gutenberg and WooCommerce.
The second resource is a short video talking about how you can use Gutenberg in your site. They mention the fact that you can add widgets to your blocks which opens up many more possibilities for page layout than I’ve provided above.
Gutenberg and WooCommerce: Working with Product Blocks
At Robot Ninja, they provide a tutorial on the product block options that we’ve covered here. They add to it by talking through how to make sure your site is ready for Gutenberg. If you run any site, you should have a staging version setup but especially for an eCommerce site. Make sure you take the advice here and test your site with Gutenberg before going live.
Building your Own Gutenberg Block
Bill Erickson provides us with a walkthrough on what it was like for him building a block for Gutenberg. He also mentions the great course by Zac Gordon on Gutenberg Development.
Gutenberg is Here
Love or hate the idea, Gutenberg is here so it’s time to dive into what this means for your site. Specifically, you should be familiar with how Gutenberg works and what options are out there for your WooCommerce site.
Today I’ve given you a bit of a look at how you can use Gutenberg with your site to create a long form sales page for your products. There is so much power in Gutenberg for store owners. All you need to do is dive in and start testing it out with your content.
Build a High-Performing WooCommerce Store
Create a store that converts traffic with Nexcess’ Managed WooCommerce Hosting solution. It comes standard with Jilt to help you recover abandoned carts, performance tests whenever you need them, and the platform reduces query loads by 95%, leading to a faster store.