如何编辑和自定义您的 WooCommerce 产品页面
已发表: 2023-02-14产品页面对销售过程至关重要。 这是购物者决定继续购买商品或在不保证退货的情况下离开的地方。 作为在线商店所有者，您的目标是让网站访问者访问您的产品页面，然后让他们执行添加到购物车和结帐的最后步骤。
为此，您的产品页面必须尽可能最好地宣传所售商品。 WooCommerce 默认产品模板干净且专业，为您的页面奠定了坚实的基础，您可以使用以下方法在此基础上构建。
如何优化您的 WooCommerce 产品页面模板
您可以通过多种方式自定义 WooCommerce 产品页面或模板。 WooCommerce 中包含一些方法。 对于其他人，您需要延期。 您还可以使用站点编辑器或手动进行自定义。 让我们仔细看看每个选项。
如何使用内置功能自定义您的 WooCommerce 产品页面
许多产品页面优化无需任何附加组件或编码即可完成。 高质量的照片、信息丰富的描述和关键产品信息使访问者更容易放心地购买产品。
启用评论和评级以建立信心。 设置相关产品、交叉销售和追加销售以增加平均订单量并使客户更容易发现新商品。 在您的产品描述或标签中包含客户推荐以获得社会证明。
优化页面内容后，您可以通过使用 WooCommerce 扩展、使用站点编辑器编辑产品页面模板以及使用代码和挂钩手动自定义它们来进一步增强产品页面。
如何使用 WooCommerce 扩展自定义您的产品页面
扩展是专门为 WooCommerce 商店提供附加功能而构建的 WordPress 插件。 以下是一些 WooCommerce 扩展，您可以使用它们来提供额外的产品信息、升级购物体验以及扩展您的页面以使其超出其默认功能。 您可以在官方 WooCommerce 扩展库中找到更多用于进一步自定义的扩展。
1. WooCommerce 的高级产品变体
可变产品是具有尺寸和颜色等选项的项目——购物者在结账前做出的选择。 在前端，WooCommerce 为每个属性（如尺寸或颜色）显示一个下拉列表，并在下方列出可用的变体（如小、中或大）。
对于更直观的方法，WooCommerce 的高级产品变体让您可以使用色板（颜色、图像和文本）、画廊和表格展示产品变体。 您甚至可以在色板中加入视频。
根据您配置的设置，变体样本显示在产品页面或主商店页面上。 您可以利用现有的产品图像和特色图像来创建样本。
您还可以自定义产品图库布局，将其从特色图片下方的默认位置移至左侧。
详细了解 WooCommerce 的高级产品变体。
2.WooCommerce 选项卡管理器
WooCommerce 产品页面选项卡显示在“添加到购物车”按钮下方，让您可以展示更多信息，同时将标题和价格等关键元素放在首屏。
这些附加信息可以包括产品材料和成分、重量和尺寸、尺码表、价格表、交货时间、运费、操作视频——任何东西 这将帮助客户有信心进行购买。
使用 WooCommerce 选项卡管理器，您可以重命名、重新排序和删除默认选项卡——详细说明、附加信息和评论——并通过创建您自己的全局、类别范围和特定于产品的选项卡来自定义此部分。
使用该插件设置可以在产品级别覆盖的默认 Tab 键顺序。 使用拖放式界面，您无需修改主题文件或进入代码。
如果您已经通过其他插件拥有自定义选项卡，WooCommerce 选项卡管理器会检测到它们，让您可以选择显示或隐藏它们。 这个插件的一个主要好处是您的选项卡中的内容包含在您的站点搜索结果中。
了解有关 WooCommerce 选项卡管理器的更多信息。
3. 产品常见问题
常见问题或常见问题解答是一种用户友好的方式来组织和向访问者展示产品信息。 使用产品常见问题解答扩展，您可以为每个产品添加一个专用的常见问题解答选项卡，其中包含无限的问题和答案。
该插件适用于所有产品类型，并在您创建或编辑产品页面时添加常见问题解答部分。
在前端，常见问题解答以带有动画的手风琴样式显示。
详细了解产品常见问题解答。
4. 复合制品
借助复合产品，您的客户可以构建套件或可配置产品。
对于每个复合产品，您将允许客户在现有库存中预先确定的选择之间进行选择。 您可以为特定选择分配额外费用，并允许某些类别是可选的。
例如，一条项链可能包含链条（银、金）、宝石（红宝石、石榴石、祖母绿）和可选饰物（多种形状选择）的选项。
对于套件的每个构建块（链条、石头和饰物），您可以选择客户可以选择的 SKU 或让他们从整个产品类别中选择任何选项。
条件逻辑让您可以根据之前的选择显示或隐藏选项（例如，红色衬衫没有特定尺码），组件级跟踪支持高级库存管理。 如果您有大量选项，您可以创建具有排序、过滤和分页功能的视图，以便于购物。
了解有关复合产品的更多信息。
5. 产品附加组件
Product Add-Ons 扩展让您的购物者可以通过免费和付费的额外服务来定制和升级他们的购买。
附加组件可能包括保修、更高质量的材料、优先运输选项或自定义字母组合和雕刻等个性化设置。 如果人们经常购买您的产品作为礼物，您可以添加包装选项或礼品信息字段。
非营利组织可以允许购物者在他们的购买中加入捐款，并通过添加姓名和信息来向某人捐款。
如果您有 WooCommerce Bookings，Product Add-Ons 可让您创建额外服务选项（理发后冲洗头发）或 VIP 升级以获得特殊座位和访问权限。 它还适用于 WooCommerce 订阅，以便您可以为您的订阅产品提供附加组件。
您的附加组件可以包括显示为文本框、下拉菜单、复选框、基于图像的选择的自定义字段，以及小费和捐赠等项目的自定义价格输入。 这些字段可以应用于您的整个目录或分配给特定产品。
一旦您设置了附加组件，它们就会按照您选择的顺序出现在“添加到购物车”按钮上方的产品页面上。
详细了解产品插件。
使用站点编辑器自定义您的产品页面
使用块主题，您可以通过在站点编辑器中编辑单一产品页面模板来自定义产品页面的外观。 在 WordPress 管理员中，转到外观 → 编辑器。
从页面顶部中心的下拉菜单中选择“浏览所有模板” 。 从出现的列表中选择单一产品模板。
默认页面布局包含页眉、页脚和显示产品信息、价格和图像元素的 WooCommerce 单一产品块。
在对产品页面模板进行编辑之前，您应该备份您的网站。 某些更改——例如，不小心删除了单一产品块并保存——将使您的访问者无法购物或购买。
如何编辑单一产品页面页眉和页脚模板
设置下的模板选项卡（右上角的齿轮图标）包含管理页眉和页脚的链接。 单击任一选项以管理页面模板的该部分。 您也可以直接单击模板的某个区域以开始编辑。 请记住，此处所做的任何更改都将应用到使用该模板的所有产品。
在标题中，您可以编辑网站标题和主导航菜单中的链接，甚至可以添加新块来专门定制您的产品页面。 使用此空间添加图像、文本等，以增强产品页面的销售能力。 您可以添加促销或政策说明或横幅，让购物者了解当前的促销活动或如何获得超过一定金额的订单免费送货。
您可以对产品页面页脚执行类似的操作。 例如，添加客户评价或有关满意度保证政策的信息。
如何自定义Single Product body
单一产品块在顶部显示一个粗体警告，“不要删除此块！ 删除此块将对您的商店造成意想不到的影响。” 认真对待这条消息！
但是，您可以在单一产品块周围添加新块以完全自定义您的产品页面设计。
使用+ 图标在单一产品块上方或下方添加元素，然后包含您想要自定义页面的任何块。
使用段落块来包括当前优惠（“花费 100 美元或更多免费送货”）、满意度保证或任何有助于访客做出购买决定的内容。 添加一个视频块，让您了解您的流程的幕后情况。 或者包括您想要推广的特定推荐产品。 天空是这里的极限！
对于每个块，您可以编辑背景颜色、排版和间距等设置，使其真正属于您自己。
手动自定义您的产品页面（使用代码和挂钩）
对于高级选项——无需插件的成本或维护——您可以使用代码和挂钩手动编辑和自定义您的产品页面。
在对文件进行任何更改之前，请务必花时间备份 WooCommerce。 如果您使用 Jetpack VaultPress Backup，这会自动实时为您完成。 因此，如果您的任何更改导致您的网站出现故障，您只需点击几下即可恢复备份，即使您无权访问 WordPress 仪表板。
您还需要使用子主题来进行这些更改。 否则，当您更新主题或 WooCommerce 时，您可能会丢失所有自定义项。 另一种选择是使用像 Code Snippets 这样的插件，它可以让您以片段的形式将自定义代码添加到您的站点，您可以根据需要打开和关闭这些片段。
使用挂钩自定义 WooCommerce 产品页面
挂钩允许站点所有者添加代码和自定义页面，而无需担心与编辑核心文件相关的危险。 有两种类型的钩子：动作和过滤器。 操作允许您在特定点插入代码，而过滤器允许您操作和返回变量。
例如，您可以使用操作添加新的结帐字段，然后使用过滤器更改现有结帐字段的标签或占位符。 您可以在此处找到可用的 WooCommerce 挂钩列表。
以下是您可以使用挂钩对产品页面进行更改的更多示例：
- 更改添加到购物车按钮文本。 例如，您可以改为说“立即捐款”。
- 自定义 WooCommerce 面包屑。 更改面包屑分离器，完全删除面包屑等。
- 删除、重命名和重新排序产品选项卡。 例如，添加成分选项卡，或在其中一个选项卡中包含视频。
使用 CSS 自定义 WooCommerce 产品页面
CSS 是一种用于控制设计元素的编码语言（与控制操作的 JavaScript 相反）。 您可以使用它来修改产品页面的设计。 一旦您了解了 CSS 的基础知识，您就可以自定义从颜色和字体到单个元素的大小的所有内容。
您可以通过在 WordPress 仪表板中转到外观 → 自定义 → 附加 CSS轻松添加 CSS 代码。 例如，如果您想更改产品标题的字体颜色，您可以使用以下代码，将颜色的十六进制代码替换为您自己的代码：
.woocommerce div.product .product_title { color: #222222; }如果您想更改“立即购买”按钮的颜色，您可以使用此代码，再次将十六进制代码替换为您选择的颜色：
.woocommerce div.product .button { background: #000000; }您可以在 WooCommerce 的这篇文章中看到更多示例。
如何提高产品页面加载速度
快速加载网站对访问者和搜索引擎都很重要。 人们不想等待，搜索引擎也不想将人们送到表现不佳的网站。
从字面上看，每一秒都很重要——加载时间延迟一秒会使转化率降低 20%！
Jetpack Boost 是 WordPress 的顶级网站速度和性能优化解决方案。 它有一个快速简单的设置过程——不需要开发人员——并拥有在头对头测试中击败前五名性能插件的结果。
安装免费插件后，您可以运行审核并获得有关当前站点性能分数的报告。 这些将作为基准，您可以用来衡量您的核心网络生命力的改进，谷歌使用这些指标来衡量您网站的用户体验和技术性能。
一个简单的仪表板使得通过一键激活配置优化选项变得简单。 这使您可以灵活地单独测试性能模块并配置 Jetpack Boost 以完美适应任何场景。
有关加速产品页面的更多方法，请查看加速 WooCommerce 商店的九种方法。
有关自定义产品页面的常见问题
还有问题吗？ 看看下面一些常见问题的答案。
自定义 WooCommerce 产品页面的最佳方式是什么？
没有单一的最佳方法。 最适合您的方法取决于您对各种方法的熟悉程度。
网站编辑器将所有权力交到您手中，让您可以拖放元素来创建您自己的个性化产品页面，而无需编辑任何代码。 对于初学者和高级用户来说，这都是一个很好的解决方案！
如果您正在寻找特定的附加功能，WooCommerce 扩展是一个不错的选择。 它们经过 WooCommerce 审查和批准，并为商家提供无需自定义代码的高级自定义选项。
手动定制和编码提供了最大的灵活性，但也需要最多的技术知识。 与使用块或扩展程序相比，此方法最有可能导致问题甚至破坏站点。
我应该在编辑产品页面模板之前备份我的网站吗？
是的。 与页面和帖子不同，站点模板没有修订历史记录。 在对产品页面模板进行任何更新之前备份您的站点，以便在出现任何问题时可以快速恢复。
Jetpack VaultPress Backup 是一个实时的 WordPress 备份插件，这意味着您的站点不仅会按每日计划或在您进行手动复制时进行备份。 相反，每次您对站点进行更改、客户下订单或访问者发表评论时，它都会自动保存。 什么时候有重要的事情发生？ 得救了！
电子商务商店不能丢失数据，尤其是当数据代表真实世界的客户订单时。 不要满足于仅偶尔保存您的网站或需要长时间的客户服务交互才能在出现问题时恢复内容的解决方案。
使用 Jetpack VaultPress Backup，您可以一键恢复您的网站并快速恢复在线。 使用 Jetpack 移动应用程序，您可以随时随地恢复，即使网站完全宕机也不例外。
对店主最好的部分？ 您的所有客户数据和订单都受到保护并保持最新状态。
自定义 WooCommerce 产品页面的一些最佳实践是什么？
无论您使用何种方法编辑和自定义 WooCommerce 产品页面，请遵循这些最佳实践来保护您自己、您的网站和您的客户。
每次都先备份您的站点。 添加或更新站点代码时，一个错误都可能导致问题。 您需要准备好尽快恢复站点，而不会丢失任何订单。 Jetpack VaultPress Backup 是适用于 WordPress 的最佳实时自动备份解决方案。
它已为您完成，因此您甚至不必担心在尝试更改之前保存您的站点。
在父主题文件之外更改代码。 当您编辑主题或插件文件时，这些更改将在下次更新主题或插件时被覆盖和撤消。
有多种方法可以在不直接编辑主题或插件文件的情况下将代码添加到您的站点。 您可以使用代码片段插件添加、编辑或删除页面上的元素，并通过主题定制器中的附加 CSS 字段设置您的网站样式。 您还可以创建子主题。 重要的是在不受主题或插件更新影响的地方进行更改。
注意速度。 无论您如何自定义您的产品页面，您都希望确保您的网站速度不会受到影响。 借助 Jetpack Boost，您可以立即改进关键领域，从而改善用户体验和 Google 对您网站质量的看法。 更快的网站意味着客户更有可能留下来，Google 也更有可能在搜索结果中推荐您。 快速提升可以走很长一段路。