如何创建自定义 WooCommerce 产品页面

想了解如何轻松自定义您的 WooCommerce 产品页面? 如果您经营一家在线商店,您可能希望确保您的单一产品页面看起来很棒、组织正确并与您的品牌相匹配。 如果您仅依靠 WooCommerce 和您的主题进行更改,这可能很难做到,因为您或多或少地坚持使用默认布局。

默认 WooCommerce 产品

相反,您可以使用其他插件来执行以下操作:

  • 添加其他内容元素
  • 更改字体和颜色
  • 进行页面结构更改
  • 甚至从头开始完全自定义您的产品页面

…全部无需编码!

完全自定义产品模板的一些想法:

定制的 WooCommerce 产品示例

根据您的需求,找到完美的插件来自定义您的产品页面!

1. 编辑产品页面的化妆品样式

如果您只是在寻找一些小的外观调整,例如更改字体、颜色或更改单个元素,这里有一些很棒的插件。

WooCommerce 颜色

WooCommerce 颜色

WooCommerce 颜色允许您自定义各种 WooCommerce 元素的颜色,例如添加到购物车按钮、产品价格等。 您可以使用本机 WordPress 定制器进行这些更改。

WooCommerce 颜色插件

使用 WooCommerce 颜色插件更改添加到购物车按钮的颜色

这是一个简单、直接的插件,不需要任何 CSS 知识。 但是,它只允许您调整颜色,并且根据您的主题,您可能无法覆盖某些颜色。

价钱: 自由

黄色铅笔

YellowPencil 允许您更改字体、颜色、字体大小、元素之间的间距,甚至可以在您网站的前端添加动画视觉效果。 免费版中有许多样式选项,但 Yellow Pencil Pro 为渐变、动画、自定义字体、调色板、背景图像等添加了高级选项。

YellowPencil 插件

使用 YellowPencil 插件更改产品页面的标​​题字体、价格颜色和按钮颜色

YellowPencil 适用于您网站上的任何页面,而不仅仅是您的产品页面。 它会在您使用网站时自动为您的网站生成 CSS 代码,并将其保存到您的数据库而不是主题文件中。 这可确保您在更新主题时不会丢失所做的更改。

YellowPencil 允许您对模板中的元素重新排序,但不能添加新元素。 因此,您只能使用默认单一产品模板中已存在的元素。

价钱: 免费,有付费升级选项

CSS英雄

CSS Hero Live CSS 编辑器插件

信息和下载查看演示

它的作用:CSS Hero 是一个可视化编辑器,它允许您通过在进行视觉更改时自动调整 CSS 来对您的站点进行样式更改。

CSS英雄插件

使用 CSS Hero 插件更改添加到购物车按钮的颜色

通过更改颜色、字体、响应式断点等来自定义模板的元素。 您还可以隐藏元素或保存某些元素的样式,以便在站点的其他位置重复使用它们。

但是,您无法重新排序或添加新元素,因此您只能使用产品模板中已经存在的布局和元素。

价钱: 付费,起价为每年 29 美元

2. 为产品列表添加新元素

如果您希望向页面添加其他元素,例如额外内容或产品视频的位置,这些插件提供了将这些元素添加到单个产品页面的方法。

WooCommerce 单一产品页面定制器

WooCommerce 单一产品页面定制器

WooCommerce 单一产品页面定制器允许您在产品模板中添加自定义文本或 HTML 字段,并选择页面上的显示位置。

例如,您可以添加服装尺码指南、运输信息或商店退货政策链接等信息。 然后会为您的所有产品显示此信息。

单一产品页面定制器

这是一个非常简单易用的插件,但它的用途有限。 例如,您不能选择仅显示某些产品的信息。 您也不能向模板添加其他类型的元素,也不能重新排列任何现有元素。

价钱: 自由

WooCommerce 的自定义产品标签

适用于 WooCommerce 免费插件的 YIKES 自定义产品标签

WooCommerce 的自定义产品选项卡允许您在产品页面上添加额外的文本、图像、HTML 或简码选项卡。 然后,您可以选择要显示哪些产品的信息。

您可以使用此插件显示有关制造商的其他信息、分享您的退货政策或添加其他照片,而不会弄乱产品页面。

WooCommerce 的自定义产品标签

同样,这个插件有一个非常集中的目的。 除了添加附加内容选项卡外,无法使用此插件自定义产品模板的任何其他部分。

如果您想在选项卡中显示特定于产品的内容,例如每个产品的尺寸表,您将无法通过动态提取产品信息来实现。 相反,您需要为具有特定内容的每个产品创建单独的选项卡,并将它们添加到正确的产品中。

价钱: 免费,付费专业版

WooCommerce 的产品视频

WooCommerce 的产品视频

WooCommerce 的产品视频允许您将视频添加到您的产品页面或产品库。 您可以选择嵌入 YouTube、Vimeo、Dailymotion、Metacafe 或 Facebook 视频,也可以上传自己的视频。 它还提供了几个显示选项:在弹出窗口中、在页面内和全屏。

WooCommerce 的产品视频

该插件可让您对视频的显示方式进行大量控制。 您可以自定义视频的尺寸、启用自动播放、循环播放视频以及上传特定的缩略图。

与此类别中的其他插件一样,此插件的功能仅限于视频。 您无法使用此插件自定义产品模板的任何其他部分。

价钱: 已付费,目前 49 美元

3.构建完全定制的产品

如果您正在寻找对您来说完全独特的产品页面,您可以构建完全自定义的页面 – 以及整个网站 – 允许您指定样式、页面布局等。

工具集

工具集 WooCommerce 自定义字段

信息和下载查看演示

工具集使您能够使用所需的布局、样式和页面元素从头开始构建您的产品模板,所有这些都无需编码。

价钱: 付费,计划起价 69 美元

使用动态内容和完全自定义样式构建您的模板

使用工具集,您可以使用 WooCommerce 和工具集块轻松构建产品模板,并使用动态内容填充这些块。 这意味着您只需要设计一次模板,它就会根据产品自动提取正确的产品名称、描述、价格、评论等。

构建产品模板后,您可以使用丰富的样式选项使其看起来完全符合您的要求,而不受任何默认选项的约束。

工具集自定义产品模板

为您的模板选择特定的显示标准

您还可以针对不同的标准设计不同的模板:例如,您可以为缺货商品、不同的产品类别或属性设计不同的模板,甚至在多个模板适用于一个产品的情况下分配优先级。

缺货产品的工具集模板

使用更多功能进一步自定义您的 WooCommerce 商店

Elementor Pro、Divi 和 WPBakery 等流行的页面构建器还提供用于构建和自定义 WooCommerce 产品页面的选项。 Toolset 的插件套件提供的额外功能可专门用于 WooCommerce 商店或其他类型的网站。

工具集自定义您的 WooCommerce 商店

例如,您可以:

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

工具集自定义您的 WooCommerce 商店

为您选择合适的 WooCommerce 工具

如果您不喜欢通过 WooCommerce 或您的主题为您提供的选项,那么不乏免费和付费插件可以让您的商店完全符合您的需求。

建立一个定制的 WooCommerce 商店并不一定很困难或需要昂贵的定制编程。 使用本文中的插件,您可以构建高级、美观、实用的 WooCommerce 商店——无需编码!

  产品 WooCommerce SEO 终极指南

类似文章