Is Gutenberg any good for eCommerce? The new editor has been out for quite a while now, nearly three years in fact, and has been the default since WordPress 5.0. Reception at the time was and still is mixed; some people say the new editor is much better, while others simply hate it.
These polarized opinions have made many people hesitant to make the switch, especially store owners who have their entire eCommerce shop riding on their decision. With three years of development and feature updates, and three years for plugin authors to experiment with the newest WordPress editor, has it finally become worth your time to try it?
Let’s see what Gutenberg brings to the table for ecommerce websites.
Is Gutenberg an Upgrade to Ecommerce?
As far as eCommerce is concerned, does Gutenberg help or harm you? To answer that, it’s helpful to remember what Gutenberg is and isn’t.
All Gutenberg does is replace the Classic editor with a new block-based drag and drop editor. It can do no harm to your core storefront. It will not have any effect, negative or positive, on your base eCommerce plugins, your SEO, or much of anything but your back end design experience.
Even if you don’t like it, it certainly won’t hurt you. Some people like it, others prefer the Classic editor, and more still use an unrelated site builder plugin; you can choose whichever you’re most comfortable with and get a similar result.
That said, using Gutenberg in your online store can actually be a small but impactful upgrade. While the editor takes some getting used to, it allows you to design appealing product pages and easily drop in small decorations like buttons and dividers. Before, even something as simple as that required third-party plugins.
The reusable blocks and group blocks can also be very helpful to quickly put a store together. Plus, plugin authors have been hard at work extending Gutenberg, playing with new blocks and ways to use the editor. There are many eCommerce block plugins that make dropping in key functionality a simple task. In addition, Gutenberg has other hidden features to offer.
The benefits are subtle, but they can make designing an online store much more convenient. If you dislike Gutenberg, you’re not missing out on anything dramatic. But if you still have an open mind, it may just make switching over worth it.
How Gutenberg Impacts Themes
Before you try out Gutenberg, there’s one important consideration: Your theme. Not all themes are compatible with the new editor, so you may be wondering if it’s safe to switch over.
A vast majority of themes, even those not specifically made to work with Gutenberg, will migrate fine without issues. And many modern themes have been updated to add Gutenberg compatibility or even extra integrations.
You can also find tons of specifically Gutenberg-friendly themes. These may add custom blocks, presets, and styles, much like installing a plugin.
But while it’s extremely rare, it’s not entirely unheard of that Gutenberg and a certain theme may not play well together and break existing styling. Before enabling it, it’s always best to make a backup of your site in case something goes wrong. Usually everything will work smoothly but it never hurts to play it safe.
The Best Gutenberg Blocks for Ecommerce
Gutenberg has quite a few blocks included that can help you design an online store. While you’ll still need software like WooCommerce to actually sell anything, Gutenberg can pretty up your store quite a bit — especially compared to the Classic editor’s barebones page creator.
Look out for these blocks when designing a storefront and product pages.
- Button — Simple calls to action made easy.
- Column — Perfect for service lists.
- Cover — Create a beautiful, immersive background image.
- Gallery — Design a rotating gallery of images, perfect for showing off your best products.
- Group — Save a collection of blocks for reuse again later. Very nifty time-saver.
- Query Loop — While this is intended as a “latest posts” block, you can modify it to pull from your products instead!
- Quote — Put customer reviews front and center.
- Search — Add a search bar to any page.
- Shortcode — Insert shortcodes from your ecommerce plugins.
- Social Icons — Let customers share your products on social media.
- Video — Drop in videos of your products in action.
And of course, you have your basic design blocks like paragraph, image, and separator. These also help you build a page the way you want.
Gutenberg Ecommerce Plugins
Is the default Gutenberg editor not enough? You can add even more ecommerce blocks with plugins. Some are designed solely to add tons of new blocks, while others simply integrate with Gutenberg to make using them more convenient. Yet, all of them can help you build an online store from scratch with the editor.
1. WooCommerce
The most popular eCommerce plugin also offers support for Gutenberg. They’ve created 20+ WooCommerce blocks that let you drop in product lists, customer reviews, product search, cart contents, checkout page, and more to any page.
Currently this is available as a freely downloadable plugin for testing, but it will eventually be merged with WooCommerce core.
Currently WooCommerce does not support Gutenberg for product editing, and you’ll instead have to use the Classic editor. Support for the old editor will end after 2021, so they’re likely to make the shift to Gutenberg soon.
2. ProductX – Gutenberg WooCommerce Blocks
There are plenty of examples of WooCommerce block plugins on the repository. However, ProductX is one that particularly stands out. It has basically everything you need to build an online store in Gutenberg all in one plugin.
The extension contains highly customizable product grids and product listings, allowing you to display them in basically any way you can imagine — from a simple square to a beautiful gallery. It also contains numerous other features like pagination, wishlisting, product quick view, and product comparison.
In addition, it comes with many layouts and templates so you can put your store together quickly.
3. Ultimate Addons for Gutenberg
While this one isn’t strictly an ecommerce plugin, it adds over 20 blocks, many of which are suitable for ecommerce or for site building in general. It’s definitely one you want to pick up if you’re looking to flesh out the block list a little.
Useful blocks for eCommerce include:
- Call to Action/Marketing Button — Easily create attractive call to action buttons.
- Forms — Add a contact form to your site without needing an extra dedicated plugin.
- Google Map — Point out your physical store on a map.
- Price List — Create a price list for your products and services.
- Review Schema — Not only does this allow you to post reviews on your site, it also allows these reviews to appear in the search results and get you higher rankings.
- Tabs — Put content in tabs. Great for product pages with lots of content you want to separate out.
- Testimonial — Customer testimonials in a beautiful format people will actually want to stop and read.
4. Paid Memberships Pro
Offering premium content is a popular way of monetizing a website. Plugins like Paid Memberships Pro make creating these membership paywalls very easy. It helps a lot that it integrates with Gutenberg, so designing paywalled content in the editor is a breeze.
It works by introducing a wrapper block that you can add any number of blocks into. You’re essentially just styling a new page within the block. Your members will see the content, while unregistered users can be directed to your pricing page.
5. Elementor Blocks
Elementor itself is a page builder compatible with Gutenberg. What if it wasn’t just compatible, but totally integrated? With the official Elementor Blocks plugin, you can drop in Elementor’s features and templates right into Gutenberg.
All you need to do is design a block template in the page builder, then you can reuse it in your Gutenberg posts and pages whenever you want. Having a page builder plugin does somewhat negate the functionality of Gutenberg, but it doesn’t entirely eliminate the need for it (when writing blog posts, for example), so this feature is very convenient.
6. MemberPress
Much like Paid Memberships Pro, MemberPress allows you to limit content to subscribers only. It has a few more Gutenberg blocks to work with, including a login and registration block. Of course, it also has a powerful Protected Content block with tons of access restriction rules.
7. Genesis Blocks
Need a plugin that adds 15 beautifully customizable blocks? Genesis is the one to go with. Along with the blocks, including the pricing, newsletter, and call to action blocks, it also adds pre-made page sections and page layouts you can insert right into the editor.
Also try the Genesis Custom Blocks plugin if you’re a developer and want to build your own blocks. This could definitely be useful for setting up custom store functionality.
8. Ecwid Ecommerce Shopping Cart
If you’re looking for a WooCommerce alternative, Ecwid Ecommerce is the one to go with. Unlike its competitor, it’s designed specifically to be compatible with Gutenberg out of the box. To that end, it adds ten new blocks, including buttons, cart/checkout, and product card blocks.
There’s even a store homepage block, which displays your entire storefront in a customizable widget. Drop it in anywhere and let customers browse in the small contained widget.
9. Ultimate Product Catalog
If the other product catalog blocks aren’t doing it for you, Ultimate Product Catalog might just be the one. The powerful filtering and sorting system allows you to sort product displays basically however you can imagine. It also comes with three dynamic layouts that customers can switch around at will.
In addition, the plugin comes with product search, and you can customize the widget to display recent, random, or hand-picked products. There’s plenty of other small features like social media sharing icons too.
The premium version of the plugin syncs with your WooCommerce products, so you don’t need to upload a spreadsheet to display your items.
10. WPForms
It’s important to have a contact form on your ecommerce site. That way, customers can email you if they have questions or problems.
Like many form plugins, WPForms contains Gutenberg integrations. It adds just a single block: the WPForms block. You design your form in the form editor, then drop it right into your post or page in Gutenberg. Simple, but useful.
11. WP Call Button
What’s even better than a form? How about a click-to-call button that sends people instantly to your customer service hotline? WP Call Button does exactly what it says: it adds a customizable call button to your site, and along with that a Gutenberg block to stick it wherever you need it.
Many plugins add small integrations like this, so check your favorite ones to see if they also support Gutenberg. On any plugin in the official repository, just scroll down to above the FAQ. Any blocks they add will be listed there.
Gutenberg: Good for Ecommerce?
With the right plugins, Gutenberg can make creating an eCommerce site that much easier. There are many plugin authors working hard to create Gutenberg integrations and add new helpful blocks for eCommerce stores. Their useful plugins make switching to Gutenberg much more lucrative.
That said, it’s not a total ecommerce revolution. Gutenberg can make designing an online shop a little more convenient, but not much more than that. And if you really prefer the Classic editor, there’s no reason to force yourself to use a tool you dislike.
The best thing to do is to try out Gutenberg and see if you can get the hang of it. If you enjoy the new editor, these eCommerce addons are just an extra perk to add to the list. And with the Classic editor soon to be deprecated, it may be best to get used to the new tool now rather than later.
Are you convinced to make the switch to Gutenberg or will you still be using the Classic editor? Let us know whether you think it’s worth it to use Gutenberg with ecommerce.
