An Introduction to Using Gutenberg with WooCommerce

January 21, 2019 Curtis McHale

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.

Check Mark Get industry-leading tips on growing your store. Subscribe to the Liquid Web eCommerce newsletter and get content like this sent straight to your inbox.

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.

add a product 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.

search for individual products

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.

search for multiple products

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.

add products from specific categories

Selecting a category will add every product inside that category to the page.

selecting a product will add every category to that 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.

show products by a specific product attribute

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.

customize the number of products shown in 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.

create a new long form sales page

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.

add a product block and add a single product

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.

add to reusable blocks

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.

add more text to entice user

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.

add benefits of product or Q&A

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 Training

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 Liquid Web’s 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.

The post An Introduction to Using Gutenberg with WooCommerce appeared first on Liquid Web.

 

About the Author

Curtis McHale

Curtis is a husband, father, developer and business coach. He specializes in helping people build a business that lets them spend time with their family instead of working all the time. To learn more about running an effective business visit: https://curtismchale.ca.

More Content by Curtis McHale
Previous Article
What is a DDoS Attack?
What is a DDoS Attack?

A Distributed Denial of Service (DDoS/DDOS) attack is an attempt to render your server unreachable and gene...

Next Article
How Do You Add Custom Fields to WooCommerce Products?
How Do You Add Custom Fields to WooCommerce Products?

Depending on your store, you might need to add custom fields to your WooCommerce products. Those could be t...