如何自定义您的 WooCommerce 产品模板

有没有注意到很多产品页面看起来或多或少是一样的? WooCommerce 商店的外观很大程度上取决于 WooCommerce 的默认模板和您的主题。 但是,使用正确的插件,您可以通过完全定制的设计使您的产品脱颖而出 – 无需编码!

WooCommerce 很难自定义单个产品页面,这真是令人遗憾。 如果您想要一个看起来不像其他人的功能性产品模板,许多人认为您唯一的选择是聘请开发人员并将大量时间用于自定义 PHP 编程,或者使用会使您的代码膨胀并减慢您的网站的页面构建器。

更简单、更快、更便宜的选择是使用一个插件,让您无需编码即可自定义 WooCommerce 单一产品页面。 在本文中,我们将重点介绍一些协同工作的插件,使您可以构建完全自定义的 WooCommerce 产品模板。 他们还为您的网站添加了大量额外的功能。

插件是 工具集、WooCommerce 批量变化和 WooCommerce 产品表。 我们将使用工具集为单个产品页面创建整体模板。 WooCommerce Bulk Variations 使客户可以更快、更轻松地从您那里购买产品变体。 WooCommerce 产品表可让您在单个产品页面的任何位置列出其他产品。

工具集

WooCommerce 产品页面模板设计与块

工具集 是一套灵活而强大的插件套件,即使您不知道如何编码,也可以让您构建高级网站。 它的功能扩展了构建自定义 WooCommerce 商店的功能和选项。

使用 Toolset 构建的产品模板不仅可以包括所有标准 WooCommerce 字段(如产品价格、评级和描述),还可以包括您商店独有的自定义字段和分类法。 您可以显示相关产品、追加销售、交叉销售和其他相关帖子,并为其提供完全自定义的样式以匹配您的品牌标识。

WooCommerce 批量变化

WooCommerce 批量变体插件

WooCommerce Bulk Variations 加快了想要购买多种产品变体的客户的购物速度。 他们不必一次选择一个变体并将它们添加到购物车中,而是输入每个变体所需的数量并一次添加所有内容。 它非常适合客户喜欢混合搭配的任何类型的产品,包括:

  • 服装
  • 笔或糖果等低价值物品
  • 批发产品

使用带有工具集的 WooCommerce Bulk Variations 在单个产品页面上的任何位置显示变体网格,而不是通常的变体下拉列表。

您还可以隐藏数量字段并创建一个价格矩阵,列出每个变体的成本和库存水平。 这样,客户可以使用下拉菜单来选择变化,同时在网格中查看价格和库存信息。

WooCommerce 产品表

WooCommerce 产品表使在您的工具集产品页面模板中列出其他产品变得非常容易。

您可能需要在单个产品页面上显示产品表的原因有很多。 例如,您可以:

  • 创建相关产品表这比 WooCommerce 本身附带的相关产品更复杂,因为它的功能是一页订单。 他们不必访问不同的页面来为每个相关产品选择数量和变体,而是直接从单个产品页面上的表格中选择所有内容。
  • 在表格中将变体显示为产品WooCommerce 产品表有一个选项可以在表中单独的行上列出每个变体。 每个变体基本上看起来好像它是一个单独的产品。 如果您不喜欢默认的变体下拉菜单,则可以将它们隐藏在工具集模板中,并使用 WooCommerce 产品表为当前产品创建变体模板。
  • 列出产品选项而不是使用变体如果您发现产品变体很难使用(谁没有?!),那么您可以将每个变体添加为单独的产品。 然后,您可以使用工具集来设计您的产品页面模板,并附上该产品所有“变体”的表格。

WooCommerce 厨房网站

第一个厨房使用 WooCommerce 产品表在单个产品页面上列出相同范围的产品,而不是使用变体

如何使用 Toolset 和 Barn2 的插件创建和自定义 WooCommerce 产品模板

Toolset 和 Barn2 插件协同工作,只需 3 个简单的步骤即可从头开始轻松构建自定义单产品模板:

  1. 创建和分配您的产品模板
  2. 设计您的产品模板
  3. 增强您的产品模板

1. 创建和分配您的产品模板

工具集 → 仪表板 并找到“产品”行。 单击“创建内容模板”以覆盖 WooCommerce 默认模板。

创建内容模板
为产品创建自定义内容模板

您还可以设置条件以根据您选择的特定条件使用不同的模板。 例如,如果商品缺货,您可以显示不同的模板,或者您可以为不同的产品类别设置不同的模板。

为此,请访问 工具集 → 内容模板 并单击“添加新”。 在侧边栏中的“使用”下,选择您希望内容模板应用到的帖子类型,然后单击“设置条件”。 然后,您可以选择用于此内容模板的特定标准。

您还可以在侧边栏中设置模板的优先级,以便工具集知道在多个模板适用时使用哪个模板。

为您的 WooCommerce 产品页面模板设置条件
设置条件以对缺货的产品使用不同的模板

如果您返回工具集仪表板,您可以看到适用于您的产品的内容模板列表。

WooCommerce 产品模板
该站点使用主要产品模板和缺货商品的条件模板

2. 设计你的模板

创建模板后,您可以使用以下块构建内容 Toolset 丰富的块库. 它们允许您显示产品图片、添加到购物车按钮、产品标签、产品评论等等!

工具集块
Toolset 中的一些可用块

以下是工具集模板的工作方式。 您设计一次模板并将其应用于产品。 因为您正在设计一个模板,所以您不会使用静态内容,而是使用动态显示内容的工具集块。 这意味着这些块显示来自标准 WordPress 和 WooCommerce 字段以及您自己的自定义字段和分类法的内容。

例如,您可以使用 Toolset 的 Heading 块并将其设置为显示产品名称,使用 WordPress 的 Paragraph 块来显示产品的描述,或使用 Toolset Image 块来显示产品的主图像。

工具集还让您可以完全控制每个元素的样式,从排版到边距和填充,再到容器和网格等布局块。 这可以让您的页面看起来完全符合您的要求!

WooCommerce 产品页面模板设计与块
使用工具集块构建和设计完全自定义的产品模板

3.增强您的产品模板

使用 Toolset 创建 WooCommerce 产品模板后,您可以使用 Barn2 的插件列出产品及其变体。

WooCommerce Bulk Variations 和 WooCommerce 产品表都带有短代码,您可以将其添加到工具集模板中基于文本的块中。 以下是一些帮助您入门的文档链接:

  • WooCommerce 批量变体简码
  • WooCommerce 产品表简码
  • 将产品表添加到单个产品页面

您可以将简码添加到模板本身,也可以将不同的简码添加到每个单独产品的文本字段之一。 开发人员可能希望在他们的工具集模板中添加短代码,以及一些额外的代码来控制在每个页面上显示哪些产品。 技术含量较低的用户应将短代码添加到每个产品的短描述或长描述中,使用短代码选项来选择要包含的产品。

奖励:使用其他工具集功能为商店的其他部分添加额外功能

因为 Toolset 是一整套插件,所以它在您网站的功能方面为您提供了很大的灵活性和强大的功能。

例如,您可以:

  • 创建前端表单,允许您的供应商将他们的产品添加到您的站点
  • 创建帖子关系,允许您将您的产品连接到其他帖子类型(例如“服装”)
  • 在地图上显示您的商店位置
  • 添加强大的搜索和过滤功能
  • 创建其他自定义字段以进一步定义您的产品

使用工具集,您不仅可以创建一个独特且功能强大的产品模板,还可以从头开始设计您的整个网站,而无需一行代码!

使用 Toolset 和 Barn2 构建您自己的自定义产品模板

建立一个完全定制的 WooCommerce 商店并不一定很复杂。 使用 Toolset 和 Barn2 插件,您无需编码即可快速轻松地构建一个。

工具集还提供了一个全面的、 关于如何构建 WooCommerce 网站的免费课程,包括分步说明和视频教程。 借助正确的插件和出色的教程,您可以创建独特的商店形象并立即开始销售您的产品。

查看  案例研究 + 说明:使用特定于客户的产品构建 WooCommerce 摄影网站

类似文章