如何自定义WooCommerce产品页面

您是否使用WooCommerce来设计您的在线商店？那么你应该知道超过300万个网站也在这样做。

那么这是否意味着它们看起来都一样？

好吧，如果您的网站有默认的WooCommerce模板，那么可以。您的在线商店将看起来像成千上万的其他商店。

您的独特产品值得拥有独特的定制WooCommerce产品页面。不仅是产品页面，您还需要自定义WooCommerce商店和其他页面以获得更好的用户体验。幸运的是，这不需要任何复杂的代码或过程。您可以通过编辑您的WooCommerce单一产品页面来执行简单的调整以改进您的页面设计以补充您的产品。

在本文中，即使您没有编码知识，我也将解释如何自定义WooCommerce产品页面。

您需要什么来自定义WooCommerce产品页面？

您一定想知道为在线业务定制WooCommerce单一产品页面需要什么。好吧，我将展示的产品定制WooCommerce的过程不需要您购买数十个付费插件或扩展。

除了安装和激活WooCommerce之外，您还需要在 WordPress 网站上激活以下两个插件才能漂亮地编辑您的WooCommerce产品页面：：

1. Elementor页面构建器
2. ShopEngine

这两个插件都可以与WooCommerce插件顺利配合使用，并帮助您开始为所有新产品和旧产品设计和自定义单个产品页面。使用ShopEngine可以更轻松地更改WooCommerce产品页面或单个产品页面布局。因为您将在ShopEngine中获得WooCommerce商店页面模板，您可以在几分钟内创建和编辑WooCommerce商店页面。

逐步自定义WooCommerce产品页面

默认产品页面的定制和调整没有止境。不同类型的产品需要不同类型的定制。但是，在这个分步指南中，我将解释您可以对WooCommerce产品页面进行的关键自定义，以便您从所有产品页面获得更多销售额。

安装Elementor和ShopEngine

安装Elementor和ShopEngine

由于我们将使用Elementor和ShopEngine自定义默认WooCommerce产品页面，因此第一步是从WordPress安装插件。在这里了解如何安装Elementor和ShopEngine以更改WooCommerce产品页面或列表布局。

创建Woocommerce单一产品页面模板

1. 转到ShopEngine ➜ 模板➜Add New
2. 为模板Name
3. 选择类型：Single
4. 将模板设置为默认（YES）
5. 单击使用Elementor编辑

创建Woocommerce单一产品页面模板

在这个产品定制WooCommerce教程中，我将展示如何从头开始构建WooCommerce产品页面。这就是我选择空白模板的原因。但是，ShopEngine提供了9 种以上专业外观的预建单品模板，您可以导入和使用这些模板。

选择结构以更改您的WooCommerce单一产品页面布局

从Elementor中选择您喜欢的结构，开始制作您商店的单个Elementor WooCommerce产品页面。

选择结构后，您可以根据自己的喜好以任意顺序拖放任何小工具。创建自定义WooCommerce产品页面ShopEngine提供了20多个小工具 ，包括产品图片、产品标题、产品价格、产品库存、产品标签等。

注意：在开始构建产品页面之前，请确保您要使用的小工具已启用。您可以从ShopEngine ⇒ Widgets ⇒ Single中执行此操作，打开您需要的小工具并单击save changes。

在这里，我将向您展示如何使用一些单品小工具。您可以按照相同的步骤使用相同的小工具或一组不同的小工具。

自定义产品价格

在Elementor上搜索“Product Price”小工具。从“ShopEngine Single Product”区块拖放产品价格小工具以制作WooCommerce自定义产品页面。

自定义WooCommerce产品价格

此价格区块小工具将帮助您：

• 将产品价格对齐设置为左、中和右
• 更改主要、次要、文本、强调色
• 使用颜色选择器选项以您喜欢的颜色设计产品标签
• 更改排版系列、排版大小和重量、装饰、行高、字母间距和其他与排版相关的设置。

自定义WooCommerce产品标题

自定义WooCommerce产品标题

在Elementor上搜索“Product Title”小工具。从“ShopEngine Single Product”区块拖放产品标题小工具以制作和自定义您的WooCommerce产品页面。这些对WooCommerce单一产品页面的简单编辑可以通过提供更好的用户体验来实现巨大的转换。

从产品标题栏的样式设置中，您可以进行以下自定义：

• 将您的产品标题HTML标记从H1设置为H6。
• 将产品标题对齐设置为向右、向左或居中。
• 更改产品标题颜色
• 设置排版的所有方面

添加面包屑

使用ShopEngine添加面包屑

面包屑会让购物者知道他们在您网站上的位置。将面包屑添加到您的产品页面是一个明智的决定。添加面包屑的方法如下：

在Elementor上搜索“Breadcrumbs”小工具。将面包屑小工具从“ShopEngine Single Product”区块拖放到Elementor内容区域。

在样式设置选项卡中，您可以：

• 设置面包屑的文本颜色、链接颜色、链接悬停颜色
• 选择允许您更改WooCommerce产品或类别页面布局的面包屑的排版、对齐方式、图标、图标大小和值之间的空间。

自定义产品附加信息

自定义产品附加信息

简短的描述可能不适合您的产品。当简短的描述不够时，额外的产品信息将增加更多销售的可能性。

在Elementor上搜索“Product Additional Information”小工具以编辑WooCommerce产品页面。将小工具从“ShopEngine Single Product”块拖放到内容区域以更改WooCommerce产品页面布局。

以下是您可以利用小工具控制的内容的列表：

• 更改标题的对齐方式、颜色、版式和边距
• 更改标签的颜色、版式、背景和宽度
• 更改值的颜色、背景和版式
• 重置表格对齐和填充
• 设置您喜欢的排版系列

利用产品追加销售

自定义产品加售

产品追加销售小工具将帮助您向买家推荐更多产品。追加销售产品将激发您的买家从您的商店购买更多产品，从而有助于增加利润。

在Elementor上搜索“Product Upsells”小工具。从“ShopEngine Single Product”区块中拖放小工具。这个经过编辑的WooCommerce产品页面布局将大大提高您的转化率。

在内容和样式选项卡中，您可以：

• 设置要显示的产品图片的数量
• 启用/禁用滑块、循环和自动播放
• 显示/隐藏标题、促销快讯、正常价格、箭头、圆点和购物车按钮
• 设置滑块列、速度和箭头大小
• 定义点大小或活动点大小
• 按选项设置顺序
• 设置列间距
• 更改背景颜色、文本对齐方式等。

通过更改您的WooCommerce产品或类别页面布局，这些所有自定义项将使您的产品页面对您的客户更具吸引力。

自定义产品评级

自定义产品评级

在您的产品页面上显示产品评分将帮助您的访问者根据用户评分找到最佳产品。

利用ShopEngine中的Show Product Rating小工具并进行以下任何更改：

• 选择评级星颜色和空星颜色
• 设置星形大小和间隙
• 查看链接颜色、链接悬停颜色和排版
• 定义左侧间距和对齐方式

自定义产品元

自定义WooCommerce产品元

只需将产品元小工具拖放到Elementor内容区域即可开始自定义您的产品元设置。

使用产品元小工具，您可以显示或隐藏产品SKU、类别和标签。最重要的是，您还可以在几分钟内更改布局、对齐方式、填充、排版、链接悬停颜色和内容颜色。

更新产品描述样式

更新产品描述样式

拖放ShopEngine的产品描述小工具，对描述的颜色、排版和对齐方式进行任何您喜欢的更改。

自定义添加到购物车按钮

自定义添加到购物车按钮

确保您的产品页面具有出色的添加到购物车按钮。这肯定会在很大程度上提高转化率。

使用Elementor上ShopEngine的添加到购物车小工具，您可以更改数量图标、按钮位置等。

此外，您可以使用样式设置执行A/B测试，以找出最适合您更改后的WooCommerce产品页面布局的方法。

添加产品分享选项

添加产品分享选项

在您的WooCommerce产品页面上添加产品共享按钮是您现在可以实施的好主意。当购物者与他们的亲朋好友分享产品数据时，您将获得更多来自新用户的销售，而无需任何付费广告。

利用ShopEngine的产品分享小工具将可自定义的产品共享选项添加到您的WooCommerce产品页面。但是，您必须使用像WP Social这样的社交分享插件才能享受此选项。

自定义产品评论小工具

自定义产品评论小工具

将产品评论小工具放在产品页面的正确位置，以便产品用户可以留下他们的评分和评论。它还可以完美地推广您的品牌。

使用Elementor区块中的ShopEngine“Product Review”小工具，您可以对产品评论部分进行以下更改：

• 更改产品评论标题的颜色和排版
• 设置单个评论边框类型、宽度、颜色和填充
• 设置作者头像宽度、作者姓名颜色、排版、审核日期颜色、排版
• 与排版一起查看内容颜色
• 更改默认星形颜色和空星形颜色
• 自定义评论表单
• 选择您喜欢的字体大小和字体系列等。

自定义产品库存状态

自定义产品库存状态

使用ShopEngine的“Product Stock”小工具，您可以自定义库存或现有产品文本和图标以及WooCommerce产品页面的颜色、排版和对齐方式。

最重要的是，您可以完全自由地设置“缺货”和“可用于延期交货状态”的图标、对齐方式、颜色和排版。

添加和自定义产品选项卡

添加和自定义产品选项卡

添加产品选项卡可让您的客户提供有关您在WooCommerce商店销售的产品的更多信息。使用ShopEngine，您可以添加自定义选项卡并对其进行自定义以满足您的需求。

只需从Elementor上的ShopEngine单一产品区块拖放“Product Tabs”小工具，您编辑的WooCommerce产品页面就可以使用了。您可以使用小工具控制产品选项卡的以下方面：

• 导航样式：排版、菜单颜色、活动菜单颜色、导航指示器颜色和边框、菜单间距、框阴影、边框类型、线宽、颜色和填充。
• 选项卡内容：显示或隐藏选项卡内容标题，更改选项卡内容标题颜色和排版，设置选项卡内容换行填充。
• 信息列表：自定义属性颜色、值颜色和表格数据排版。
• 平均评分：尝试评分标题、评分总数和评分计数排版和颜色。
• 评论风格：自定义评分颜色、空评分颜色、日期、权限和描述颜色、日期排版和描述排版。
• 审核表单：更改表单标签颜色、标签排版、输入边框颜色、输入焦点边框颜色、输入排版、消息颜色和所需颜色。
• 提交按钮：设置填充、边框半径、按钮排版、框阴影、颜色和背景。

显示相关产品

显示相关产品

显示相关产品供您的客户购买是您可以在您的电子商务网站上实施的一个了不起的想法。WooCommerce产品页面的ShopEngine“Related Product”小工具将帮助您显示具有以下设置的相关产品：

• 设置要显示的产品数量
• 启用/禁用滑块
• 显示/隐藏标题、促销快讯、正常价格和购物车按钮。
• 设置滑块列数
• 更改背景颜色
• 设置滑块速度等。

预览响应模式的设置或更改

响应模式下的预览设置

由于现在大多数客户都使用移动设备从在线商店购买，因此请确保您商店的产品页面可以无缝地为移动设备和平板电脑查看器工作。

利用Elementor标记为响应模式的按钮来查看全宽产品页面的更改在移动和桌面设备上的外观。

如果您发现移动设备和平板电脑视图存在一些不一致或问题，请修复这些问题以供移动设备查看。

完成为WooCommerce产品页面添加和自定义所需的小工具并预览设备的产品页面布局后，单击Elementor的“更新”按钮。

而已！按照我在此产品定制WooCommerce教程中分享的步骤进行操作。

答对了！您编辑的WooCommerce产品页面现在已针对移动设备进行了优化并准备上线。

优化产品页面以提高转化率的5种方法

自定义WooCommerce产品页面后，就该优化页面了。优化良好的产品页面可以立即促进销售。

为了获得良好的转化率，重要的是通过更改WooCommerce产品页面布局来优化产品页面。以下是您可以遵循的 5 种方法，以最大限度地提高在线商店的转化率和收入。

维护信息层次结构

WooCommerce产品页面中的信息层次结构

确保您设计了维护信息层次结构的WooCommerce单一产品页面。

例如，将面包屑放在所有信息的顶部是一种常见的做法。面包屑通常后跟产品标题和其他与产品相关的信息，如评论或描述。在大多数在线商店中，您会在页面左侧看到带有图标以查看放大视图的图像。

此外，请确保您在新编辑的WooCommerce产品页面上提供的信息让购物者对您要出售的产品有一个完整的了解。

使用高质量图像

使用高质量的产品图片

除非您巧妙地将它们展示给您的客户，否则只有拥有好的产品才能为您的口袋带来更多的钱。产品图片是在产品页面和商店页面内向目标受众展示产品的绝佳方式。

但是，如果您的图片平庸、晦涩或角度错误，您就不能对它们抱有太大期望。当您发布产品图片时，请确保它们清晰、以产品为中心并且从正确的角度拍摄。

添加上下文产品图像可以在适当的环境中展示您的产品。例如，捕捉厨房中厨房电器的图片，向您的客户展示这些电器与他们厨房的完美匹配程度。

聘请专业摄影师为产品图库拍摄详细的产品图像。如果是实物产品，最好从各个角度捕捉同一产品。它将帮助客户更清楚地看到产品零件。最重要的是，它使客户对购买充满信心。

最后但并非最不重要的一点是，我建议使用高分辨率的产品图库图片。尽管图像可能会使您的WooCommerce产品页面变慢一点，但您可以使用任何免费的图像优化插件（如Smush ）将影响降到最低。

WordPress的图像优化插件

写一个杀手级产品描述

令人信服且适当的产品细节或描述在在线销售中起着重要作用。确保产品描述提及关键产品信息。顺便说一句，这还不够。这些信息也应该易于阅读和切中要害。您可以使用项目符号格式来一一显示信息。

记住，你不需要一直很正式。如果它适合产品类别，您可以使用有趣、平易近人且令人愉快的另类声音来编辑产品页面WooCommerce。

这是来自Picky Bars的早餐热狗套餐的吸引人的描述：

杀手级产品描述示例

最后的建议是，在您编写产品描述时，请注意产品的各种使用选项。它将帮助潜在客户了解产品是否能满足他们的需求，或者他们是否需要其他东西。

以正确的方式定价

无论您销售什么类型的产品，价格始终是您客户的一个重要因素。定价以及将其放置在自定义WooCommerce产品页面上的方式会影响他们的购买决定。

为了使您的定价易于查看，您可以使用大字体。使定价文本加粗或使用对比色也可能适合您。

突出显示折扣并显示正常价格，然后显示新价格。这种定制和更改的WooCommerce产品页面布局将提供易于查看的用户体验。

以下是Picky Bars如何做到这一点的示例：

如何在您的WooCommerce产品页面上定价

如果您的客户无法清楚地看到价格，您应该重新考虑您为编辑WooCommerce产品页面所做的设计定制。

使用页面SEO优化WooCommerce产品页面

为了让您的WooCommerce产品页面获得更多自然流量，使用页面SEO技术非常重要。使用正确的标题标签、元描述、产品图片的替代标签、关键字、描述和其他页面SEO因素来获得更多客户，从而提高转化率。

关键的页面SEO因素

更多指南：

需要更多WooCommerce页面定制指南？阅读以下博客以自定义和更改您的WooCommerce商店和其他页面：

• 如何自定义WooCommerce类别页面
• 如何自定义WooCommerce购物车页面
• 如何自定义WooCommerce商店页面
• 如何自定义WooCommerce我的帐户页面
• 如何自定义WooCommerce结帐页面
• 如何解决WooCommerce空购物车错误

通过这些博客，您将了解如何设置和更改WooCommerce自定义商店、购物车、我的帐户、结帐页面。

小结

无论您如何自定义在线商店的WooCommerce产品页面。无论是Elementor WooCommerce产品页面还是默认页面，请确保您所做的更改是用户友好且直观的。在自定义和编辑产品页面WooCommerce时，请确保遵循一致性、相关性和上下文。但是，您编辑和更改的WooCommerce产品页面布局需要针对设备进行高度优化。

一开始，自定义您的WooCommerce单一产品页面似乎是一项艰巨的任务。但是，如果您有Elementor页面构建器和ShopEngine，您应该没有压力。