WooCommerce 添加到购物车按钮不起作用？ 如何解决它！

已发表: 2021-05-13

您的WooCommerce 添加到购物车按钮是否无法正常工作？ 你有问题吗？ 我们已经为您服务了。 在本指南中，您将了解如何解决影响“添加到购物车”按钮的最常见问题，让您免于头疼。

即使您正确设置了 WooCommerce，您在经营在线业务时也可能会遇到一些问题。 我们已经了解了如何解决结账问题以及当 WooCommerce 不发送电子邮件时该怎么做，因此在本指南中，我们将重点关注添加到购物车按钮。

为什么添加到购物车按钮无法正常工作？

WooCommerce是一个庞大的插件。 它具有大量功能和特性来帮助您的在线业务。 此外，还有数以千计的插件可用于增强其功能。 最重要的是，您还可以添加代码并自定义商店页面、结帐以及编辑商店的各个方面。

尽管这对于大多数想要从竞争对手中脱颖而出的企业来说是必须的，但您使用的工具越多，定制商店的次数越多，您可能面临的问题就越多。 这些问题通常以与所有这些功能和插件的兼容性问题的形式出现。 这可能是您的重定向不起作用、Javascript 问题或您的支付网关问题以及许多其他问题。

您的 WooCommerce 添加到购物车按钮可能无法正常工作的原因有很多。 在本指南中，我们将向您展示最常见问题的解决方案，以便您可以立即启动并运行您的商店。

WooCommerce 添加到购物车按钮不起作用？ 如何修复它

如前所述，可能有很多原因导致添加到购物车按钮无法正常工作。 在本指南中，我们将向您展示如何解决以下问题：

  1. 插件/主题的兼容性问题
  2. 插件和/或主题未更新
  3. WooCommerce 中的产品信息不完整
  4. WooCommerce 状态
  5. 缓存设置问题
  6. 永久链接
  7. 结帐和购物车 URL 的问题
  8. 结帐端点的问题
  9. 添加到购物车按钮的代码相关问题
  10. 与您的主题相关的问题
  11. ModSecurity 问题

让我们来看看这些问题中的每一个以及如何解决它们。

注意：在开始之前，我们建议您为您的网站创建一个完整的备份，以防出现问题。 尽管我们不会做任何大的改变，但在一些潜在的解决方案中，您必须编辑核心文件，因此备份始终是一个好主意。

1) 插件和/或主题未更新

这是我们强烈建议您在继续调试之前检查的最基本步骤之一。 始终确保将 WordPress 和 WooCommerce更新到最新版本，以尽量减少可能出现的问题。 新版本包括可能对您的 WooCommerce 安装至关重要的错误修复，并使用添加到购物车按钮修复您的问题。

这也扩展到 WooCommerce 插件，因为开发人员可能会发布更新以修复兼容性问题、插件冲突和新版本以匹配新的 WooCommerce 版本，因此您的商店可以顺利运行。

WordPress 更新

2) 与插件或主题冲突

导致 WooCommerce 添加到购物车按钮无法正常工作的一个非常常见的问题是插件或主题冲突。 如前所述，您使用的插件越多，出现兼容性问题的可能性就越大。 尤其是在考虑 WordPress 更新、插件版本更改、WooCommerce 更新等时。

要检查您是否与插件或主题发生冲突，只需按照以下步骤操作：

  1. 确保所有插件都更新到最新版本
  2. 清除您的网站缓存
  3. 一个一个地禁用所有插件以隔离导致问题的插件。 去做这个：
    1. 批量停用所有插件
    2. 使用健康检查
  4. 将您的主题更改为店面

如果停用插件可以解决问题，您应该一一重新激活它们，直到找到导致问题的插件。 如果这不起作用，请切换到 Storefront，因为它是默认主题，并且与 WooCommerce 及其所有功能完全兼容。

最后，如果插件/主题导致问题，我们建议您联系他们的支持团队。

3) WooCommerce 中的产品信息不完整

如果您的 WooCommerce 产品没有“添加到购物车”按钮，您应该检查的另一件重要且经常被忽视的事情是该产品已填写所有信息。这至少包括产品的名称和价格。

为什么这很重要？ 因为如果您的产品没有设置价格，它就不会在前端显示添加到购物车的按钮。

除了名称和价格，我们强烈建议您填写其他重要的详细信息，例如可用性、产品 ID 和产品描述。

4) 检查 WooCommerce 状态

可能导致“添加到购物车”按钮停止工作的另一个原因是您的 WooCommerce 安装存在某种问题。 您可以在WooCommerce > 状态下检查这些问题。

在那里，检查每个部分（WordPress、服务器、数据库等）并确保没有任何以红色突出显示的错误。

添加到购物车按钮不起作用 - woocommerce 状态

此外，您可以使用 WooCommerce 工具来解决您的设置问题。 我们建议您尝试这些选项，看看您的问题是否得到解决。

转到WooCommerce > 状态 > 工具，然后：

  • 清除 WooCommerce 瞬态
  • 清除过期的瞬变
  • 重新计算条款
  • 清除客户会话
  • 创建默认 WooCommerce 页面（如果您的结帐页面被删除，您可以在 WordPress 侧边栏的页面下查看此页面）

5) 缓存设置问题（服务器和插件）

其他可能导致您的添加到购物车出现问题的因素是您的网站缓存您的“我的帐户”、“购物车”或“结帐”页面的问题。 由于这些页面仅托管动态内容，因此您应始终确保您的缓存插件已排除这些页面的 URL。 这就是为什么您应该始终使用允许您为某些 URL 设置排除项的缓存插件。

此外，如果您有服务器端缓存设置，请确保排除这些 URL。 如果您不确定如何操作，请联系您的服务器托管服务提供商并寻求帮助。

6）刷新永久链接

我们还看到，永久链接可能会导致商店页面出现问题，它们还可能导致添加到购物车按钮停止在您的 WooCommerce 商店上工作，因此刷新它们总是一个好主意。 为此，在您的WordPress 仪表板中，转到设置 > 永久链接并保存更改。

其他用户更喜欢更改设置以确保更新永久链接。 如果这是您的情况，只需单击“普通设置”下的“普通”或任何单选按钮，然后按“保存更改”。 之后更改回您之前的设置并再次保存更改。

添加到购物车按钮不起作用 - 永久链接

这将更新您的所有永久链接，并可能帮助您解决添加到购物车按钮的问题。

7) 结帐和购物车 URL

您还应该仔细检查您的结帐和购物车页面是否设置正确。 如果您的“添加到购物车”按钮将客户重定向到错误的页面，则它可能无法正常工作。

要检查这一点，请转到WooCommerce > 设置 > 高级并在页面设置选项下进行检查。 确保您在购物车、结帐和我的帐户页面下设置了所有正确的页面。

woocommerce 添加到购物车按钮不起作用 - 正确的页面

8) 确保结帐端点没有任何错误

如果端点设置不正确，它们可能会导致 WooCommerce 添加到购物车按钮无法正常工作。 为确保您的结帐端点按要求工作，请转到WooCommerce > 设置 > 高级 > 结帐端点。

检查端点 URL 中是否没有空格，以确保您没有任何结帐端点错误。

woocommerce 添加到购物车按钮不起作用 - 结帐结束点

9) 添加到购物车按钮的代码相关问题

有时，您的 WordPress 可能会遇到其代码问题，尤其是在您对其进行自定义的情况下。 WooCommerce 用户的一个常见问题是添加到购物车按钮由于可变产品的定价问题而不起作用。 在这些情况下，由于变体定价或默认变体定价存在问题， WooCommerce 将禁用添加到购物车按钮。

您可以通过将以下代码行添加到您的functions.php文件来解决此问题。 要打开此文件，只需转到外观 > 主题编辑器。

然后，点击右侧边栏的functions.php ，在编辑器的文件末尾粘贴以下代码行，然后点击更新文件。 之后，您应该检查这是否可以解决您的问题。

 add_filter('woocommerce_show_variation_price', function() { return TRUE;});

woocommerce代码修复

10) 添加到购物车按钮相关主题的问题

如果您使用的是 WooCommerce 主题，它可能会为您的产品页面提供专用的主题功能。 这可能包括隐藏您的添加到购物车按钮。

要检查这是否是您主题的选项，请转到外观 > 自定义 > WooCommerce并检查产品页面的可用选项。

此外，如果您的 WordPress 主题和您的产品页面存在冲突，或者由于模板问题而无法正确加载“添加到购物车”按钮，您可以使用简单的脚本来修复它。

为此，请按外观 > 主题编辑器打开主题文件编辑器，然后单击右侧边栏主题文件下的单个帖子 (single.php) 。 然后，将此代码发布到 single.php 文件的末尾：

 if ( is_singular( 'product' ) ) {
wc_get_template_part('内容', '单一产品');
} 别的 {
wc_get_template_part('内容', '单一产品');
}

注意：如果您没有找到single.php文件，请将代码粘贴到index.php下。

woocommerce 添加到购物车按钮不起作用 - 修复主题代码单一

11) ModSecurity 问题

ModSecurity是一个在 WordPress 网站上非常常见的开源 Web 应用程序防火墙。 有时，它可能会导致您的添加到购物车按钮出现问题和 403 错误。 要检查 ModSecurity 是否已过期或存在问题，请访问您的网站并打开浏览器的开发人员工具 (Ctrl + Shift+ J)。

如果您收到错误“ .jQuery.cookie.min.js is not found ”，那么您可能遇到了 ModSecurity 问题。 要解决此问题，我们建议您联系您的托管服务提供商。

12) 联系您的托管服务提供商

如果您已尝试此列表中的所有内容但均未奏效，我们建议您联系您的服务提供商。 让他们知道您已经尝试过什么，因为这将帮助他们放弃解决方案并更快地将他们指向正确的方向。

奖励：如何删除“添加到购物车”按钮

或者，如果“添加到购物车”按钮不起作用并导致太多问题，您可以将其从商店中删除。 相反，您可以添加一个按钮，将购物者从产品页面直接重定向到结帐，以简化购买过程。

如果这是您正在考虑的事情，我们强烈建议您查看WooCommerce Direct Checkout插件。 它使您只需单击几下即可从结帐中删除不必要的步骤和字段，以帮助您提高转化率。 您可以在本指南中了解此插件以及如何设置直接链接。

结论

总之，添加到购物车按钮可能无法在您的 WooCommerce 商店中正常工作的原因有很多。 在本指南中，我们看到了最常见问题的解决方案。

在开始确定导致问题的原因之前，我们建议您完成这些小步骤以确保您以正确的方式进行故障排除：

  • 将 WordPress、WooCommerce 和所有插件更新到最新版本
  • 清理/重置您的网站缓存
  • 将您的主题更改为店面
  • 停用除 WooCommerce 之外的所有插件

如果停用插件可以解决问题，请一一重新激活它们，直到找到导致问题的工具。 在大多数情况下，这就是导致 WooCommerce 添加到购物车按钮无法正常工作的原因。

如果插件或您的 WordPress 主题导致您的商店出现问题，我们建议您联系他们的支持团队并寻求帮助以解决问题。

最后，如果您对商店中的其他元素有疑问，以下指南可能会让您感兴趣：

  • 当 WooCommerce 结帐不起作用时该怎么办
  • Instagram 目录不起作用？ 如何修复它
  • 如何更改 WooCommerce 添加到购物车消息
  • 当 WooCommerce 不发送电子邮件时该怎么办

您对添加到购物车有任何问题吗？ 你做了什么来修复它们？ 在下面的评论部分让我们知道！