如何在 Divi 商店页面中添加添加到购物车按钮

已发表: 2020-06-21

您是否使用 Divi 并想自定义您的商店页面？ 在本教程中，您将学习如何在 Divi 商店页面中包含“添加到购物车”按钮。

如果您打算开一家网店，WooCommerce 是最简单、最快捷的方式。 即使您不是开发人员，一些优秀的 WooCommerce 主题也可以帮助您入门并增强商店的功能。 最好的选择之一是 Divi。

为什么要在商店页面中包含“添加到购物车”按钮？

Divi 主题是 WooCommerce 商店最受欢迎的选择之一。 这是一个非常灵活的主题，具有许多强大的功能。 但是，一个缺点是商店页面上的产品没有“添加到购物车”按钮。 这在购买渠道中增加了一个步骤，并可能影响转化。 好消息是有办法解决这个问题。

在本指南中，我们将向您展示如何轻松地将添加到购物车按钮添加到 Divi 商店页面。

如何在 Divi 中添加添加到购物车按钮？

在这里，我们将向您展示在 Divi 中包含“添加到购物车”按钮的最简单和最有效的方法。 尽管我们将对主题的核心文件进行一些更改，但即使对于初学者来说，这些方法也很容易遵循。

在商店页面中添加“添加到购物车”按钮的主要两种方法是：

  1. 修改functions.php文件
  2. 使用代码片段插件

这两种方法都适合初学者，并允许您立即添加“添加到购物车”按钮。

在我们开始之前

在开始之前，我们建议您：

  • 生成完整的备份以防出现问题。
  • 创建子主题：我们不建议直接修改主题的文件。 相反，您可以创建一个子主题并对其进行更改。 有不同的方法可以做到这一点。 在本教程中，我们将使用一个插件。

1) 包括来自 functions.php 的添加到购物车按钮

创建子主题

在我们在 Divi 中添加 Add to Cart 按钮之前，您需要创建一个子主题。 为此，我们将使用一个名为 Child Themify 的免费 WordPress 插件。 因此，首先，您需要在您的网站上安装 Child Themify。

然后，激活它。

之后，您将在外观部分下看到插件的设置。

从下拉列表中，您需要选择一个父主题。 在我们的例子中，我们将为 Divi 创建一个子主题。 然后，命名您的新子主题。

还有一些高级选项，但您不需要为此使用它们。

选择父主题并命名子主题后，按创建子主题按钮。

之后，转到外观 > 主题部分，您将看到新的子主题。 激活它。

现在，检查您商店的商店页面。 在我们的案例中，我们使用一些示例产品创建了一个演示商店。

正如您在上面的屏幕截图中看到的，没有添加到购物车按钮。 因此，当用户想要将产品添加到购物车时，他们不能直接从商店页面进行。 相反，他们必须转到特定的产品页面并将商品从那里添加到购物车。

好消息是，有一种简单的方法可以在商店页面上添加“添加到购物车”按钮。 为此，您需要向子主题添加几行代码。

更改functions.php文件

要在 Divi 的商店页面上包含 Add to Cart 按钮，请转到主题编辑器，然后选择functions.php文件。 复制下面的代码并将其粘贴到您的functions.php文件中。

 // 此代码将“添加到购物车”按钮添加到显示商店循环的页面
add_action（'woocommerce_after_shop_loop_item'，'woocommerce_template_loop_add_to_cart'，20）；

Divi 中的添加到购物车按钮 - PHP 脚本

粘贴代码后，单击更新文件。 如果您检查商店页面前端，您将看到更改。

使用 php 在 Divi 中添加到购物车按钮

您已将添加到购物车按钮添加到商店页面！

2) 代码片段插件

或者，您可以使用插件在 Divi 中包含“添加到购物车”按钮，而不是更新functions.php文件。 根据我们在 WordPress 和自定义方面的经验，代码片段是完成这项任务的最佳工具之一。

首先，您需要在您的站点上安装并激活 Code Snippets 插件。

代码片段插件包括在 Divi 中添加到购物车按钮

然后，您需要向您的网站添加一个新的代码段。

只需为您的代码段命名以进行识别，从下面复制代码并将其粘贴到代码字段中。

 // 此代码将包含“添加到购物车”按钮到显示商店循环的页面
add_action（'woocommerce_after_shop_loop_item'，'woocommerce_template_loop_add_to_cart'，20）；

然后，保存并激活代码段。

再次，您将在商店页面上看到“添加到购物车”按钮。

Divi 商店页面中的添加到购物车按钮

如您所见，这两种方法都非常简单有效。 如果您是初学者，我们建议您使用代码片段。 它是一个免费工具，可让您轻松修改核心文件，并且不会破坏您的网站。

如何自定义添加到购物车按钮

现在您已经成功地在 Divi 商店页面中包含了“添加到购物车”按钮，您需要自定义该按钮。

为此，您必须为您的按钮指定一个自定义 CSS 类。 一个简单的 PHP 代码就可以完成这项工作。 然后，您可以添加一些 CSS 并自定义按钮。

因此，要做到这一点，请将下面的 PHP 代码粘贴到代码片段部分作为新代码。

 add_action（'woocommerce_after_shop_loop_item'，'quadlayers_woocommerce_template_loop_add_to_cart'，10）；
add_action（'woocommerce_after_shop_loop_item_title'，'quadlayers_woocommerce_template_loop_add_to_cart'，10）；

函数 quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

然后，您可以使用 CSS 来修改按钮。 在这段代码中，我们提到了按钮的默认 CSS 类，例如： button product_type_simple add_to_cart_button ajax_add_to_cart 。 此外，您可以通过替换my_class_here添加自定义 CSS 类。

当你在你的主题中包含额外的 CSS 时，你可以使用类似的东西： .my_class { option:value !important; } .my_class { option:value !important; } 。 确保您将my_class替换为您的 CSS 类。

例如，您可以使用这样的 CSS 代码：

 .woocommerce-LoopProduct-link + {
    /* 这里是你的自定义 CSS */
}

Divi 主题带有自定义 CSS 编辑器，您可以将所有 CSS 代码粘贴到那里。 另一方面，您可以通过 WordPress 定制器使用附加的 CSS 部分。 我们建议使用定制器，因为它可以让您实时查看您在做什么。

结论

因此，这就是您可以轻松地在 Divi 商店页面中包含“添加到购物车”按钮的方法。 这样，您可以改进购买流程，为客户提供更好的体验，并提高转化率。 此外，它将帮助您减少商店中的购物车遗弃。

另一个增加商店转化率的有趣选择是在商店中包含直接结帐链接。 这样，您可以缩短购买过程并减少用户流失的机会。 有关这方面的更多信息，请查看我们关于如何创建 WooCommerce 直接结帐链接的指南。

此外，如果您想自定义商店，我们建议您查看以下教程：

  • 如何自定义 WooCommerce 商店页面？
  • 在 WooCommerce 中以编程方式添加到购物车功能
  • 如何在 WooCommerce 中实现 AJAX 添加到购物车按钮？
  • 如何自定义 WooCommerce 结帐页面？

最后，为了充分利用 Divi Theme，您可以查看我们的指南：

  • 如何在 Divi 中隐藏和删除页脚？
  • Divi 联系表不起作用？ 这是解决方法！

如果您觉得这篇文章有帮助，请考虑在社交媒体上与您的朋友分享这篇文章。 它将帮助其他人自定义 Divi 商店页面。

有关如何提高转化率的更多信息，请查看最好的 WooCommerce 快速购买插件。