Holiday Deals are Here!

UP TO

35%

Discounts

Ending in:

Get Yours Now!
wpmet-website-logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
wordpress plugin

ShopEngine Integration with Gutenberg for WooCommerce Store

WasimWasim Updated on: April 5, 2022 ShopEngine WooCommerce 5 Min Read
ShopEngine integration with Gutenberg

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.

Contents hide
1 An Overview of Gutenberg:
2 Why Integrate ShopEngine with Gutenberg:
3 Some of the Notable ShopEngine Blocks in Gutenberg:
3.1 Product Title:
3.2 Product List:
3.3 Product Description:
3.4 Checkout Payment:
3.5 Archive Products:
3.6 Cart Table:
3.7 Recently Viewed Products:
4 Winding up:

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.

ShopEngine Gutenberg integration

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.
Go for ShopEngine Download

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.

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.

Grab ShopEngine Now

Want to know how to build an ecommerce website with ShopEngine? Head over to the blog clicking the link below-

How to build ecommerce site with ShopEngine?

  • Share :

How to Increase Page Views and Reduce Bounce Rate in WordPress

Previous post

Andriy Andreyev: Astronaut Dreamer to WordPress Leader

Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Subscribed Today!

wpmet-website-logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.
Elements Kit
ShopEngine
GetGenie AI
Metform
WP Social
Wp Ultimate Review
Wp Fundraising
About us
Contact us
Support
Login/Register
Collaborate
Affiliates
Affiliate Area
Privacy Policy
Terms and Conditions
Refund Policy
Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT