如何创建自定义 WooCommerce 产品页面
想了解如何轻松自定义您的 WooCommerce 产品页面? 如果您经营一家在线商店,您可能希望确保您的单一产品页面看起来很棒、组织正确并与您的品牌相匹配。 如果您仅依靠 WooCommerce 和您的主题进行更改,这可能很难做到,因为您或多或少地坚持使用默认布局。
相反,您可以使用其他插件来执行以下操作:
- 添加其他内容元素
- 更改字体和颜色
- 进行页面结构更改
- 甚至从头开始完全自定义您的产品页面
…全部无需编码!
完全自定义产品模板的一些想法:
根据您的需求,找到完美的插件来自定义您的产品页面!
1. 编辑产品页面的化妆品样式
如果您只是在寻找一些小的外观调整,例如更改字体、颜色或更改单个元素,这里有一些很棒的插件。
WooCommerce 颜色
WooCommerce 颜色允许您自定义各种 WooCommerce 元素的颜色,例如添加到购物车按钮、产品价格等。 您可以使用本机 WordPress 定制器进行这些更改。

使用 WooCommerce 颜色插件更改添加到购物车按钮的颜色
这是一个简单、直接的插件,不需要任何 CSS 知识。 但是,它只允许您调整颜色,并且根据您的主题,您可能无法覆盖某些颜色。
价钱: 自由
黄色铅笔
YellowPencil 允许您更改字体、颜色、字体大小、元素之间的间距,甚至可以在您网站的前端添加动画视觉效果。 免费版中有许多样式选项,但 Yellow Pencil Pro 为渐变、动画、自定义字体、调色板、背景图像等添加了高级选项。

使用 YellowPencil 插件更改产品页面的标题字体、价格颜色和按钮颜色
YellowPencil 适用于您网站上的任何页面,而不仅仅是您的产品页面。 它会在您使用网站时自动为您的网站生成 CSS 代码,并将其保存到您的数据库而不是主题文件中。 这可确保您在更新主题时不会丢失所做的更改。
YellowPencil 允许您对模板中的元素重新排序,但不能添加新元素。 因此,您只能使用默认单一产品模板中已存在的元素。
价钱: 免费,有付费升级选项
CSS英雄
它的作用:CSS Hero 是一个可视化编辑器,它允许您通过在进行视觉更改时自动调整 CSS 来对您的站点进行样式更改。

使用 CSS Hero 插件更改添加到购物车按钮的颜色
通过更改颜色、字体、响应式断点等来自定义模板的元素。 您还可以隐藏元素或保存某些元素的样式,以便在站点的其他位置重复使用它们。
但是,您无法重新排序或添加新元素,因此您只能使用产品模板中已经存在的布局和元素。
价钱: 付费,起价为每年 29 美元
2. 为产品列表添加新元素
如果您希望向页面添加其他元素,例如额外内容或产品视频的位置,这些插件提供了将这些元素添加到单个产品页面的方法。
WooCommerce 单一产品页面定制器
WooCommerce 单一产品页面定制器允许您在产品模板中添加自定义文本或 HTML 字段,并选择页面上的显示位置。
例如,您可以添加服装尺码指南、运输信息或商店退货政策链接等信息。 然后会为您的所有产品显示此信息。
这是一个非常简单易用的插件,但它的用途有限。 例如,您不能选择仅显示某些产品的信息。 您也不能向模板添加其他类型的元素,也不能重新排列任何现有元素。
价钱: 自由
WooCommerce 的自定义产品标签
WooCommerce 的自定义产品选项卡允许您在产品页面上添加额外的文本、图像、HTML 或简码选项卡。 然后,您可以选择要显示哪些产品的信息。
您可以使用此插件显示有关制造商的其他信息、分享您的退货政策或添加其他照片,而不会弄乱产品页面。
同样,这个插件有一个非常集中的目的。 除了添加附加内容选项卡外,无法使用此插件自定义产品模板的任何其他部分。
如果您想在选项卡中显示特定于产品的内容,例如每个产品的尺寸表,您将无法通过动态提取产品信息来实现。 相反,您需要为具有特定内容的每个产品创建单独的选项卡,并将它们添加到正确的产品中。
价钱: 免费,付费专业版
WooCommerce 的产品视频
WooCommerce 的产品视频允许您将视频添加到您的产品页面或产品库。 您可以选择嵌入 YouTube、Vimeo、Dailymotion、Metacafe 或 Facebook 视频,也可以上传自己的视频。 它还提供了几个显示选项:在弹出窗口中、在页面内和全屏。
该插件可让您对视频的显示方式进行大量控制。 您可以自定义视频的尺寸、启用自动播放、循环播放视频以及上传特定的缩略图。
与此类别中的其他插件一样,此插件的功能仅限于视频。 您无法使用此插件自定义产品模板的任何其他部分。
价钱: 已付费,目前 49 美元
3.构建完全定制的产品
如果您正在寻找对您来说完全独特的产品页面,您可以构建完全自定义的页面 – 以及整个网站 – 允许您指定样式、页面布局等。
工具集
工具集使您能够使用所需的布局、样式和页面元素从头开始构建您的产品模板,所有这些都无需编码。
价钱: 付费,计划起价 69 美元
使用动态内容和完全自定义样式构建您的模板
使用工具集,您可以使用 WooCommerce 和工具集块轻松构建产品模板,并使用动态内容填充这些块。 这意味着您只需要设计一次模板,它就会根据产品自动提取正确的产品名称、描述、价格、评论等。
构建产品模板后,您可以使用丰富的样式选项使其看起来完全符合您的要求,而不受任何默认选项的约束。
为您的模板选择特定的显示标准
您还可以针对不同的标准设计不同的模板:例如,您可以为缺货商品、不同的产品类别或属性设计不同的模板,甚至在多个模板适用于一个产品的情况下分配优先级。
使用更多功能进一步自定义您的 WooCommerce 商店
Elementor Pro、Divi 和 WPBakery 等流行的页面构建器还提供用于构建和自定义 WooCommerce 产品页面的选项。 Toolset 的插件套件提供的额外功能可专门用于 WooCommerce 商店或其他类型的网站。
例如,您可以:
- 创建前端表单,允许您的供应商将他们的产品添加到您的站点
- 创建帖子关系,允许您将您的产品连接到其他帖子类型(例如“服装”)
- 在地图上显示您的商店位置
- 添加强大的搜索和过滤功能
- 创建其他自定义字段以进一步定义您的产品
为您选择合适的 WooCommerce 工具
如果您不喜欢通过 WooCommerce 或您的主题为您提供的选项,那么不乏免费和付费插件可以让您的商店完全符合您的需求。
建立一个定制的 WooCommerce 商店并不一定很困难或需要昂贵的定制编程。 使用本文中的插件,您可以构建高级、美观、实用的 WooCommerce 商店——无需编码!