ShopEngine与Gutenberg深度集成提升WooCommerce网站功能与效率

ShopEngine现已全面兼容Gutenberg区块编辑器，为用户带来更灵活的内容创作体验。过去，ShopEngine小工具仅限于Elementor界面使用，但如今这一限制已被打破。现在您不仅能在Elementor中调用ShopEngine小工具，更可以在Gutenberg编辑器中直接使用ShopEngine for WooCommerce功能。不过需要注意的是，在Gutenberg中这些小工具将以区块形式呈现。实际上，Elementor小工具与Gutenberg区块的核心功能完全一致，它们之间的差异主要体现在操作方式上。使用Elementor时，您需要将小工具拖拽到指定区域才能预览效果；而在Gutenberg中，只需单击区块即可完成编辑。

### 古腾堡概览

作为WordPress用户，您必须熟悉Gutenberg这一术语。它既是WordPress内容编辑器，也被称为WordPress区块编辑器。如今，凭借其出色的易用性，Gutenberg已成为WordPress用户中最受欢迎的编辑器。众多第三方开发者也推出了各种Gutenberg插件。相较于传统的经典编辑器，虽然部分用户仍偏爱经典编辑器的使用体验，但自Gutenberg推出以来，基于区块的内容编辑方式已成为主流。Gutenberg最突出的特点是其模块化设计，无论是段落、图像还是按钮，所有元素都构成独立的区块。这种基于区块的编辑器让用户能够更精细地控制内容呈现。而该编辑器的真正优势在于支持第三方开发者嵌入自定义区块，这正是我们将重点探讨的内容——现在您可以在Gutenberg for WooCommerce中体验ShopEngine的丰富功能。在详细介绍Gutenberg中的ShopEngine自定义区块之前，让我们先探讨为何要将ShopEngine与Gutenberg集成到WooCommerce中。

### 为什么将ShopEngine与Gutenberg集成

ShopEngine最初是专为Elementor设计开发的，这意味着您原本只能通过Elementor构建WooCommerce页面。但正如之前提到的，ShopEngine与Gutenberg的集成使其功能得到极大拓展。那么，是什么促使我们将ShopEngine扩展至Gutenberg呢？让我们通过数据来说明——根据gutenstats.blog的统计，截至目前Gutenberg已获得7600万次活跃安装，并且已有2.645亿篇由Gutenberg创作的文章。这些数据足以证明我们将ShopEngine扩展至Gutenberg的必要性。数百万用户正在使用Gutenberg创作内容，我们绝不能让他们错过ShopEngine提供的精彩功能。

### ShopEngine与Gutenberg集成的更多原因

需要强调的是，Gutenberg远不止是一个内容编辑器。Gutenberg项目的长远目标是将其打造为全站点编辑工具，让您能够使用Gutenberg编辑器设计完整的WooCommerce网站。如果这一目标实现，对Gutenberg的需求将大幅增长。因此，将ShopEngine与Gutenberg集成到WooCommerce中具有战略意义。使用Gutenberg，您无需再依赖简码嵌入内容，而是可以直接部署区块来添加页面元素。Gutenberg没有兼容性问题，第三方开发者可以轻松将其支持整合到自己的插件中。此外，Gutenberg生成的代码轻量高效，加载速度极快。

### 古腾堡中一些著名的ShopEngine区块

在介绍具体的ShopEngine区块之前，需要说明的是ShopEngine本身就包含65多个小工具、13多个模块以及无数满足Elementor用户需求的WooCommerce商店页面模板。集成Gutenberg for WooCommerce后，您现在可以在Gutenberg中访问45多个ShopEngine区块。根据您选择的WooCommerce商店模板页面类型，这些区块会相应显示。此外，您还可以使用快速查看、变化样本、产品比较和愿望清单等模块。下面我们来看看Gutenberg中用于WooCommerce商店的一些核心ShopEngine区块。

#### 产品标题

产品标题栏显示在单个产品页面上。当您选择单一页面类型构建模板后，只需在侧边栏中单击产品标题块，产品标题便会立即出现在页面上。从右侧边栏，您可以轻松修改标题标签、对齐方式、颜色和排版等参数。

#### 产品列表

产品列表会展示您WooCommerce商店中销售的所有产品类型。该区块适用于各类页面，包括单页、商店页、结帐页和购物车页面。选择页面类型后，您可以通过弹出窗口或侧边栏添加产品列表。在添加时，需要指定要显示的产品类别。从右侧边栏，您可以自定义产品列表的多个元素，包括每页显示的产品数量、标签、是否显示销售徽章、折扣百分比等。

#### 产品描述

如果您创建单页模板，产品描述块会出现在侧边栏中。要使产品描述显示在页面上，只需单击该区块。您可以自由自定义描述内容，并通过修改排版、颜色、对齐方式等参数进行样式化。

#### 结帐付款

与Elementor中的Checkout Payment小工具功能相同，结帐付款区块也适用于Gutenberg。当您构建结帐页面模板时，可以查看并添加结帐付款区块。之后，您可以根据需求调整内容样式、支付方式、按钮等。右侧边栏提供了丰富的自定义选项，包括复选框位置、按钮颜色、排版、边框等。

#### 存档产品

存档产品页面会集中展示所有已发布的产品。要为WooCommerce在Gutenberg中创建存档页面模板，只需在左侧边栏中单击存档产品块。所有产品将依次显示在页面上。存档产品页面具有丰富的自定义选项，涵盖布局、内容、分页、评级等方面。页面包含大量元素，如产品标题、产品图片、产品价格、产品描述、产品页脚等。

#### 购物车列表

在购物车表中，您选择的产品的所有详细信息都会显示出来，包括产品名称、价格、数量、小计和总金额。使用ShopEngine的购物车列表区块，您可以在WooCommerce购物车页面中向买家展示与产品相关的所有信息。右侧边栏提供了丰富的自定义参数，您可以调整产品页眉和页脚颜色、边框颜色、文本颜色，以及定制内容部分，包括标题、价格、数量、总计等。

#### 最近浏览的产品

使用ShopEngine的最近查看的产品区块，您可以展示用户最近在您的WooCommerce商店中浏览或查看的产品。该区块适用于商店页面、产品页面、购物车页面等多种场景。与其他区块类似，右侧边栏提供了与最近查看的产品相关的自定义参数。通过这些参数，您可以指定要显示的产品数量、显示/隐藏销售徽章、设置列和行间距、调整产品图像高度等。

### 小结

那么，您对我们将ShopEngine和Gutenberg与WooCommerce集成的举措有何看法？欢迎分享您在Gutenberg for WooCommerce商店中部署ShopEngine区块的宝贵经验。

文章网址：https://www.wpbull.com/jiqiao/15619.html