ShopEngine Integration with Gutenberg for WooCommerce Store

Finally, the wait is over! ShopEngine is now compatible with your Gutenberg block editor. Earlier, you could access ShopEngine widgets only through Elementor window, right?

But now ShopEngine is available beyond that. Apart from accessing ShopEngine widgets through Elementor, you can make use of ShopEngine in Gutenberg for WooCommerce store. However, in Gutenberg, these widgets will show up as blocks.

As a matter of fact, the functions of Elementor widgets and Gutenberg blocks are identical. Then, where is the difference? The difference lies in the application. For Elementor widgets, you had to drag and drop widgets on the designated areas to view the output. But for Gutenberg blocks, you have to just click the blocks and your job is done.

An Overview of Gutenberg:

As a WordPress user, you must be familiar with the term Gutenberg. It’s a WordPress content editor, otherwise known as WordPress block editor. Nowadays, Gutenberg is the most popular WordPress editor among the WordPress users due to its ease of use. Many WordPress Gutenberg plugins are also available from 3rd party developers.

Previously, people were more accustomed to using “Classic Editor”, another WordPress editor. Since the advent of Gutenberg, people have been embracing the block editor more as compared to the Classic Editor. The specialty of Gutenberg is its block-based content.

No matter whether it’s a paragraph, image, or button, each of these elements is a block. Unlike Classic Editor, this block-based content editor lets you manipulate your content with more control. The best part of this block editor is it lets 3rd party developers embed custom-blocks.

And this is exactly what we will focus on this informative blog as from now on, a heap of ShopEngine’s features will be at your disposal in Gutenberg for WooCommerce. Before we dilate upon ShopEngine’s custom blocks in Gutenberg, let me shed light on why we integrated ShopEngine with Gutenberg for WooCommerce.

Why Integrate ShopEngine with Gutenberg:

ShopEngine was initially designed exclusively for Elementor. That means you could build your WooCommerce pages only for Elementor. But now, as I mentioned earlier that ShopEngine has gone one step forward after being integrated with Gutenberg.

So, what made us integrate ShopEngine with Gutenberg for WooCommerce? To answer this question, let me present to you pieces of data-

As per the gutenstats.blog, Gutenberg has received 76 million active installations till now. On top of that, 264.5 million posts written with Gutenberg till date.

These pieces of data, I reckon are sufficient to convince anyone that why we have expanded ShopEngine’s range to Gutenberg. Millions of people are deploying Gutenberg to develop their content and we don’t want them to miss out on the riveting features that ShopEngine offers.

Some more reasons of ShopEngine Integration with Gutenberg:

Let me emphasize a point that Gutenberg isn’t solely a content editor. Gutenberg project aims to turn the block editor into a full-site editing tool in the near future.

The idea is to let you design 100% of your WooCommerce site with the Gutenberg editor. If this happens, the demand for Gutenberg is likely to skyrocket. So, it’s worth integrating ShopEngine with Gutenberg for WooCommerce, right?

• With Gutenberg, you don’t have to use shortcodes to embed content. Instead, you can deploy the blocks to add the necessary page elements.
• Gutenberg is free from compatibility issues, so developers can easily incorporate Gutenberg support in their plugins.
• Gutenberg outputs a lightweight code and is also a fast-loading tool.

Some of the Notable ShopEngine Blocks in Gutenberg:

Before I shed light on ShopEngine blocks, let me clarify that ShopEngine comes with 65+ widgets, 13+ modules, and myriad of templates for WooCommerce shop pages catered to Elementor users. After the integration of ShopEngine with Gutenberg for WooCommerce, you can now get access to 45+ ShopEngine blocks in Gutenberg.

Depending on the page type you select to build a template for your WooCommerce store, Gutenberg blocks will show up accordingly. In addition, you will get access to modules like Quick View, Variation Swatches, Product Comparison, and Wishlist.

Let’s take a look at some of the ShopEngine blocks in Gutenberg for WooCommerce store-

Product Title:

The Product title block shows up on a single page for a specific product. After you select single page type to build your template, you just have to click the Product Title block from the sidebar.

Immediately after that, your product title will appear on the page. From the right sidebar, you can modify title tag, alignment, color, and typography.

Product List:

Product list displays all types of products that you sell in your WooCommerce store. Product list block appears in all types of pages including single, shop, checkout, and cart pages. Once you select the page type, click the product list from the popup or sidebar.

Make sure that you select the product category for the products to show up. From the right sidebar, you can select and customize different elements of the product list. You can select the number of products per page, tags, show/hide sales badge, discount percentage, etc.

Product Description:

If you create a single page template, product description block will show up on the sidebar. To make the product description appear on your page, click the product description block. You can customize the description and also stylize it modifying typography, color, alignment, etc.

Checkout Payment:

Like the Checkout Payment widget in Elementor, Checkout Payment block works in Gutenberg. You can view the “Checkout Payment” block if you go onto build template for your checkout page. After that, you can add the checkout payment block as you need for your WooCommerce store.

You will have the options to alter content style, payment methods, button, etc. You can tweak checkbox position, button color, typography, border, etc.

Archive Products:

Archived products page contains all the posted products in one place. To create a template for archive page in Gutenberg for WooCommerce, just go ahead to the left sidebar and click the Archive Products block. All the products of the inventory will show up one after another.

The Archive products page boasts a bounty of segments including layout, content, pagination, rating, etc. The page contains a great deal of elements like product title, product image, product price, product description, product footer, and so on.

Cart Table:

In cart table, all the details of your selected products crop up including products name, price, quantity, subtotal, and total amount. With ShopEngine’s Cart Table block, you can showcase your buyers all the information relevant to your products through a cart table in the WooCommerce cart page.

In order to customize the content and stylize different elements of the cart table, you will get parameters on the right sidebar. You can tweak product header & footer colors, border color, text color, as well as tailor content sections including title, price, quantity, total, etc.

Recently Viewed Products:

With ShopEngine’s Recently Viewed Products block, you can showcase the products your users have recently browsed or viewed in your WooCommerce store. You can display recently viewed products on shop page, product page, cart page, etc.

Like the other blocks, you can notice the parameters related to recently viewed products on the right sidebar. Leveraging the parameters, you can specify the number of products to display, show/hide sales badges, set the column & row gap, adjust the heights of product images, etc.

Winding up:

So, what’s your take on our move to integrate ShopEngine with Gutenberg for WooCommerce? Do let us know about your experience of deploying ShopEngine blocks in Gutenberg for WooCommerce store.

You are most welcome to give any positive or negative feedback on the Gutenberg integration for WooCommerce. We would also appreciate taking suggestions from you to streamline our integration process. However, our works on ShopEngine integration with Gutenberg is still in progress. Shortly, we will be done with the project.