如何使用 OceanWP 和工具集构建自定义 WooCommerce 商店(无需编码)
已发表: 2021-05-05您无需自定义编码即可构建具有高级功能的引人注目的在线商店。 使用 Toolset 和 OceanWP,您可以使用自己独特的功能和样式从头开始构建完全自定义的产品和商店页面——所有这些都不需要编码。
如果您正在建立在线商店,您可能已经注意到 WooCommerce 的默认模板和您网站的主题主要决定了您的商店的外观。 您可能有几个选项可以打开或关闭,否则,如果没有自定义编程,就不可能添加高级功能。
或者,您可以使用 Toolset 和 OceanWP 创建一个完全自定义的 WooCommerce 商店,无需编码。
使用工具集,您可以构建仅在主要零售网站上才能看到的功能。 或者,您甚至可以构思自己的功能,然后使用自定义帖子类型和字段、帖子关系、自定义布局等创建它们。
由于其广泛的样式选项,OceanWP 使您的网站看起来很棒。 此外,它还具有直观的管理员编辑体验,可以准确地向您展示您的网站在前端的外观。
以下是使用 Toolset 和 OceanWP 自定义您的在线商店的四个步骤:
- 决定您要展示和推广的内容
- 使用自定义帖子类型、字段和分类法定义您的产品
- 创建自定义产品页面
- 创建动态商店页面和搜索功能
决定你想要展示和推广的内容
Toolset 的灵活功能不仅仅是重新排列和设置产品页面的样式。 您可以创建专门适用于您的业务的完全自定义功能,或使用主要零售网站的高级功能。








这些是您无法仅从 WooCommerce 获得的功能,它们仅触及工具集可能实现的功能的表面。 最重要的是,这一切都可以在没有任何编码的情况下完成!
使用自定义帖子类型、字段和分类法定义您的产品
一旦您有了自己的想法,您就可以创建无限数量的自定义帖子类型、字段、分类法和帖子关系,让您的想法成为现实。
WooCommerce 为您提供了一些基本字段来定义您的产品,例如产品属性、描述、价格以及重量和尺寸等运输信息。
使用工具集,您可以添加其他信息,例如特定产品功能、品牌或说明产品属于哪个部门。

并非所有主题都适用于自定义帖子类型,但 OceanWP 已“准备好自定义类型”。 使用 OceanWP,您可以对每个内容模板应用不同的主题设置。 这使您可以更好地控制此自定义内容在您的网站上的显示方式。
创建自定义产品页面
定义产品后,您可以创建完全自定义的模板来显示您的产品和自定义字段中的信息。 通过使用产品模板,您只需构建一次页面,您所做的任何更改都会立即反映在使用该模板的所有产品上。
Toolset 允许您使用 Toolset 的 WooCommerce Blocks 从头开始构建您的产品模板。


只需将模板或存档分配给您的产品,然后添加您想要的块,例如产品评级、产品标签、产品属性、添加到购物车按钮等。

这些块可以动态地从您的自定义字段中提取信息。 这意味着当您添加标题块以显示例如产品名称时,它将根据您的客户正在查看的产品自动显示正确的产品名称。

您还可以有条件地分配模板以根据某些产品标准使用不同的模板。 例如,您可以使用条件模板来使用不同的布局显示缺货的商品。


OceanWP 为您提供了多种用于样式化这些模板的选项。 因为它已准备好后输入,您可以为不同的模板选择不同的主题选项。 例如,您可以选择为某些产品显示侧边栏,并为特色产品选择全角布局。

OceanWP 还包括全局样式选项,以帮助您的商店在整个网站上保持一致的视觉标识。 另外,您的站点管理员和前端之间没有切换来查看您的更改的外观,因为您在后端看到的就是它在前端的显示方式。

创建动态商店页面、产品列表并添加搜索功能
您已经定义了产品并设计了产品模板。 现在,帮助您的客户找到他们正在寻找的东西。
构建自定义商店页面和其他存档页面
在 WordPress 中,商店页面和类别列表页面等页面称为档案。 本质上,档案列出了属于某个类别或内容类型的所有帖子(或产品)。
工具集允许您根据您选择的标准创建不同的档案。 例如,如果您的网站销售高跟鞋和包包,您可能需要不同的商店页面,其中包含与每种产品类型相关的过滤器。


创建动态内容列表
您可以使用工具集视图块将产品的动态列表添加到您的商店页面或您网站上的任何其他页面。 这允许您定义要列出的产品并设计列表的外观。

添加自定义搜索和过滤选项
借助自定义搜索和过滤选项,Toolset 使您的潜在客户可以轻松快速地找到产品。 您可以按您创建的任何自定义字段或发布关系进行过滤。

OceanWP 的其他自定义商店页面功能
OceanWP 为您的商店和存档页面提供了更多功能,包括快速查看选项、无限滚动以及在不使用时将过滤器隐藏在屏幕外的功能。 请注意,这些功能仅适用于 OceanWP 的存档,不适用于您使用工具集创建的任何自定义存档。


OceanWP 还为您提供了如何显示购物车的选项:
- 原生购物车弹出
- 浮动添加到购物车栏
- 购物车展示
- 无干扰结账
..和更多!
立即试用 OceanWP 和 Toolset,并在评论中告诉我们您的体验!
通过 Toolset 的免费 WooCommerce 课程逐步学习构建自定义 WooCommerce 商店。
您还可以通过此 WooCommerce 商店演示免费试用 Toolset 和 OceanWP 。