如何自定义 WooCommerce 产品页面

已发表: 2021-02-11

您是否正在寻找定制商店和改善客户体验的方法？ 我们为您准备了合适的文章！ 在本指南中，我们将向您展示如何自定义您的 WooCommerce 产品页面，以帮助您提高转化率并增加销售额。

为什么要自定义 WooCommerce 产品页面？

产品页面的设计是客户在线商店购物体验不可或缺的一部分。 您的产品是 WooCommerce 商店中最独特和最显着的部分。 因此，您应该自定义您的产品页面，并确保它突出您的产品和服务。 这包括方便的产品页面部分，例如附加详细信息部分、尺寸表、产品变体的不同图像预览、附加订购选项等。 这只是增加了更多的内容。 您还可以对这些部分重新排序、删除默认部分、重新设计它们等等。

无论您做什么，您的主要目标都应该是改善您的客户在 WooCommerce 商店的体验。 这自然会帮助您增加销售额。 如果您的网站易于浏览并且用户可以轻松找到他们正在寻找的内容，那么他​​们更有可能购买、返回和推荐您的商店。 例如，您可以添加直接结帐按钮以帮助他们快速购买，包括比较图表以帮助他们选择合适的产品，或添加独特的变体轮播以显示单个产品变体的所有选项。

您还可以添加漂亮的潜在客户生成元素，通过自定义产品页面来提高产品的销售量。 这包括添加相关产品以进行额外销售、加售/减售商品等等。

现在让我们看看在 WooCommerce 中编辑产品页面时必须使用的不同选项。

如何自定义 WooCommerce 产品页面

自定义 WooCommerce 产品页面有 3 种主要方法：

  1. 带插件
  2. 以编程方式
  3. 使用页面构建器

所有这些方法都有优点和缺点。 在本指南中，我们将向您展示所有这些，以便您选择最适合您的。

1. 如何使用插件自定义 WooCommerce 产品页面

WooCommerce 中有几个插件可以编辑产品页面。 让我们来看看一些最好的。

1) WooCommerce 的直接结帐

自定义 woocommerce 产品页面 - 直接结帐

Direct Checkout是一个完美的插件，可以简化购买过程，让您的客户的购物体验变得轻松。 它提供了许多选项来通过添加快速购买按钮和漂亮的添加到购物车重定向来自定义您的产品页面。

这样，您可以让您的购物者快速购买您的商品并提高您的对话率。 该工具还允许您通过向产品类别和存档页面添加快速查看选项来自定义您的产品和结帐页面，从而使您的客户在查看和购买商品的过程中更加方便。

此外， Direct Checkout包括漂亮的 AJAX 添加到购物车按钮自定义，以加快购买过程，并在用户将商品添加到购物车时无需重新加载页面。 最重要的是，您可以跳过购物车页面，一键将客户从产品页面重定向到结帐。

主要特点
  • 它是简化购买流程和提高转化率的好工具
  • 提供大量选项来自定义产品和结帐页面
  • 方便的一键快速购买按钮添加到您的产品页面
  • 启用 AJAX 的添加到购物车按钮和添加到购物车重定向
  • 自定义结帐字段以及向产品档案和类别​​添加快速查看选项的选项
价格

这是一个免费增值插件。 它有一个免费版本和三个高级计划，促销价格为 19 美元（一次性付款）。 但是，您可以使用以下代码并获得 10% 的折扣：

 direct_ck10

2）WooThumbs

自定义 woocommerce 产品页面 - woothumbs

WooThumbs是另一个出色的工具，可让您以最令人兴奋的方式展示您的 WooCommerce 产品。 该插件为您提供了另一种设置产品画廊和图像的方法，并为您的产品页面提供了一个全新的定制领域。

此外，您可以添加方便的选项，使浏览产品图像更容易并提高商店的销售量。 这包括添加滑动缩略图、您可以自定义以匹配您的主题的独特画廊设计、图像的集成缩放选项以及大量其他图像库选项。 最后，您还可以为产品变体添加独特的图片库，以及在产品库中嵌入视频以实现更多销售转化。

主要特点
  • 用于自定义产品图片库的大量扩展选项
  • 滑动缩略图的选项以及产品图像的缩放选项
  • 灵活的产品变体图像库，为每个产品变体添加独特的图像库
价格

WooThumbs 是一款高级插件，起价为每年 79 美元，可免费试用 14 天。

3) 产品附加组件

自定义 woocommerce 产品页面 - 产品附加组件

如果您正在寻找通过产品页面策划客户购物体验的方法，产品附加组件是一个必不可少的插件。 该工具旨在帮助您提高销售转化率，同时为客户提供更多选择。 它允许您添加独特的产品页面选项，例如基于图像的产品选择、额外的产品复选框以及用于更多产品个性化的自定义文本。

此外，您可以包含独特的自定义定价选项，以使您的产品页面更加通用。 最后，您还可以添加对 WooCommerce 商店的更多服务选项收取固定费用或百分比费用的选项。 有关如何向商店添加费用的更多信息，请查看本指南。

主要特点
  • 其他产品页面添加，例如基于图像的选择、自定义文本、示例图像等。
  • 其他产品扩展选项，例如自定义复选框和文本输入。
  • 添加固定费用、百分比费用，甚至为其他选项（例如捐赠、小费等）添加自定义定价的选项
价格

Product Add-Ons 是一个高级插件，每年将花费您 49 美元。

4) WISDM 客户特定定价

自定义 woocommerce 产品页面 - WISDM

如果您正在寻找使您的商店及其定价选项更智能、更适应的方法，那么这个插件当然是您应该检查的一个。 WisdmLABS 为您提供了一个独特的定价插件，可让您为不同的客户、用户和群体设置个性化的价格。 这意味着您可以为具有不同角色的用户、特定客户或订阅者设置个性化定价。

但这还不是全部。 WISDM 客户特定定价具有其他智能定价选项，例如为产品类别或数量提供折扣代码和优惠，甚至为多次购买的特定层级添加批量折扣。

最重要的是，您还可以为特定金额设置购物车折扣规则。 通过这种方式，您可以整合您网站的会员资格，并通过为他们提供个性化优惠来吸引用户在您的商店上花费更多。

主要特点
  • 为单个客户、订阅者和用户角色设置特定价格的选项。
  • 向大宗买家和采购商提供折扣和促销优惠
  • 为产品类别设置定价规则以及设置全店折扣和交易
价格

这是一款高级工具，起价为每年 80 美元。

5) Elex WooCommerce 请求报价

如果您正在经营一家 WooCommerce 商店，您可以在其中批量销售产品或希望根据客户的需求提供不同的价格，那么此插件可以为您节省大量时间。 WooCommerce 请求报价添加了一个漂亮的“请求报价”按钮，您的客户可以使用该按钮为您提交报价请求。

然后，您可以通过对价格的良好估计来响应您的任何报价请求，并轻松满足您的客户。 这使得请求和接受报价的过程更容易和更灵活。

最后，您还可以毫无问题地接受缺货产品的订单，并为可能购买不同批量产品的用户添加价格调整。

主要特点
  • 请求报价按钮以用于订购
  • 付款验证和管理员通知
  • 响应、接受或拒绝客户报价的简单选项
  • 启用来自特定角色的报价请求的选项
价格

WooCommerce Request a Quote 是一个高级插件，起价为 59 美元（一次性付款）。

如果您正在寻找更多插件来编辑产品页面，请查看这篇文章。

使用 Direct Checkout 自定义产品页面

现在让我们看看如何使用 Direct Checkout 在 WooCommerce 中编辑产品页面。 这个免费增值工具在 WordPress 存储库中有超过 60,000 次下载，将帮助您提高转化率。 免费版具有基本功能，因此要将您的产品页面提升到一个新的水平，我们建议您选择一种起价仅为 19 美元（一次性付款）的高级计划。

让我们看看您可以使用 Direct Checkout 执行哪些操作来自定义您的产品页面。

1.增加快速购买按钮

该工具提供的最有趣的选项之一是可以添加快速购买按钮。 这样，结帐过程要快得多。

无需将产品添加到购物车，而是转到购物车页面，然后转到结帐页面，您的客户只需点击几下即可购买。 最好的部分是它很容易设置。

安装并激活插件后，转到WooCommerce > Direct Checkout > General ，打开重定向，并设置以下选项：

  • 添加到购物车重定向：是
  • 添加到购物车重定向到：结帐

保存更改，就是这样！ 现在，当用户按下快速购买按钮时，他们将跳过购物车页面并直接进入结帐页面。

有关快速购买的更多信息，请查看我们的指南，了解如何将快速购买按钮添加到您的商店。

2. AJAX 加入购物车

AJAX 添加到购物车是 WooCommerce Direct Checkout 的另一个出色功能。 AJAX 添加到购物车功能允许客户将产品包含在他们的购物车中，而无需重新加载整个网站。 这可以改善用户体验并帮助您增加销售额。 最重要的是，由于页面不需要重新加载这么多次，它减少了带宽和服务器负载。

要激活 AJAX 添加到购物车功能，请转到WooCommerce > Direct Checkout > Products并启用Add AJAX add-to-cart选项。

如果您不想在您的网站上安装任何第三方插件并且您有编码技能，您还可以以编程方式自定义 WooCommerce 产品页面。 让我们看看怎么做。

2.如何以编程方式自定义 WooCommerce 产品页面

另一种选择是以编程方式在 WooCommerce 中编辑产品页面。 我们不建议初学者使用此方法，但如果您知道自己在做什么并且想在不使用任何其他工具的情况下将自定义功能添加到产品页面，那么这是一个很好的选择。

为此，我们将使用围绕WooCommerce Hooks构建的漂亮代码。 如果您不熟悉它们，请查看有关如何使用 WooCommerce 钩子的完整指南。 该指南还为您提供有关如何自定义WooCommerce 模板文件的信息，如果您想编辑商店，这是一个很好的选择。

如果你知道如何编码，你可以做很多事情。 对于此演示，我们将重点介绍如何从 WooCommerce 产品页面中删除或重新排序元素。 如果您想要更多您可以做的事情的示例，您可以查看我们的专用指南，了解如何以编程方式编辑 WooCommerce 产品页面。

注意：由于我们将在您开始之前编辑一些核心文件，因此请确保您创建了站点的完整备份。 此外，我们建议您使用子主题。 为此，您可以创建它或使用这些插件中的任何一个。

从 WooCommerce 产品页面中删除元素

要添加这些代码，请转到主题 > 主题编辑器，在WordPress 仪表板中打开WordPress 主题编辑器。 然后，单击最右列文件列表中的Functions.php文件。 在这里，您可以添加自己的 WooCommerce 脚本来开始自定义您的商店。

WooCommerce 为您提供了几个钩子来自定义商店中的任何元素。 这些挂钩适用于特定元素，因此您需要使用具有正确功能和正确优先级值的正确挂钩来删除或重新排序这些元素。 您可以在此页面或 WooCommerce 插件的content-single-product.php 文件中查看所有挂钩及其相关参数。

现在，让我们看看如何添加脚本以从 WooCommerce 产品页面中删除产品元、描述和评级星。

为此，只需将以下代码粘贴到您的functions.php文件中：

 // 移除星级
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
// 删除产品元数据 
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
// 删除描述
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);

然后，单击更新文件，您的 WooCommerce 产品页面应该删除了这些元素。

重新排序 WooCommerce 产品页面元素

您还可以使用钩子重新订购 WooCommerce 产品页面元素。 默认情况下，WooCommerce 元素有自己的优先顺序。 如果您不熟悉它们，可以查看此页面。

现在要重新排序元素，您只需删除元素并使用add_action挂钩将它们添加回来。 然后，您可以在挂钩上添加自己的优先顺序，以便元素以您的首选顺序显示。

例如，如果我们希望描述部分出现在标题之后，我们可以给它一个自定义的优先级顺序 6。由于标题的顺序是 5，这将在它的正下方添加您的描述。

为此，请将此脚本添加到您的functions.php文件中，然后单击更新文件。

 // 改变描述的顺序
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6);

这些只是您可以通过编程自定义 WooCommerce 产品页面的几个示例。 但是，您还可以做很多其他事情。 如果您正在寻找灵感，请查看我们的专用指南，了解如何使用代码编辑产品页面。

3. 使用页面构建器编辑 WooCommerce 产品页面

页面构建器是自定义 WooCommerce 页面的通用答案。 这不仅包括您的产品页面，还包括您网站上的任何其他页面。 WordPress 页面构建器具有设置和使用 WooCommerce 页面模板的附加功能。 这样，您不仅可以使用各种自定义元素来自定义您的产品页面，还可以使用预先设计的模板和页面让您的生活更轻松。

您可以使用多种与 WooCommerce 兼容的页面构建器。 尽管它们的工作方式相似，但它们还是有一些区别，因此我们建议您查看我们的专用指南，以帮助您自定义产品页面。

  • 如何在 Divi 中自定义 WooCommerce 产品页面
  • 如何在 Elementor 中自定义 WooCommerce 产品页面

奖励：使用 CSS 自定义您的 WooCommerce 元素

您还可以通过将CSS 片段添加到 WordPress 主题来探索自定义 WooCommerce 元素的选项。 这让您可以探索一些想法，例如自定义标题的字体大小、立即购买按钮颜色等等。

要将 CSS 片段添加到您的 WordPress 主题，请转到外观 > 自定义，然后单击附加 CSS。

在这里，您可以添加 CSS 片段并自定义您想要的任何元素。 您可以编辑很多内容，但为了给您一些想法，我们将在下面留下一些片段。 此外，您可以使用此 HTML 颜色选择器找到正确的十六进制代码，以添加到您的颜色 CSS 代码中。

 更改产品标题字体大小
.woocommerce div.product .product_title {
字体大小：42px；
}

更改产品标题颜色
.woocommerce div.product .product_title {
颜色：#AAb733；
}

 更改立即购买按钮颜色
.woocommerce div.product .button {
背景：#000000；
}

添加片段后，请记住单击发布以完成更改。

结论

总而言之，编辑产品页面是改善客户购物体验和促进销售的关键。 在本指南中，我们看到了在 WooCommerce 中自定义产品页面的不同方法：

  • 使用专用插件
  • 以编程方式，使用 WooCommerce 钩子和模板
  • 使用 Divi 和 Elementor 等页面构建器

这些方法中的每一种都有其优点和缺点，因此请选择最适合您的技能和需求的方法。 如果您没有编码技能，那么使用插件是您的最佳选择。 那里有多种工具，但如果您想要一些易于使用、高效且预算友好的工具，那么 Direct Checkout 就是您的最佳选择。

另一方面，如果您喜欢编写代码并想要创建自定义解决方案，您可以使用一些脚本以编程方式自定义您的商店。 选项无穷无尽，您几乎可以做任何事情，因此可以从我们的脚本中获得一些灵感并创建您自己的解决方案。

如果您正在寻找更多自定义商店的指南，请查看以下帖子：

  • 如何自定义 WooCommerce 商店页面
  • 如何编辑我的帐户页面
  • 在 WooCommerce 中自定义“添加到购物车”按钮的完整指南
  • 如何在结帐中添加费用
  • 如何在 WooCommerce 中隐藏相关产品

您使用哪种方法来编辑您的产品页面？ 您在遵循本指南时遇到任何问题吗？ 请在下面的评论中告诉我们，我们将尽力为您提供帮助。