如何按产品 ID 创建 WooCommerce 添加到购物车按钮

已发表: 2021-02-24

woocommerce 按产品 ID 添加到购物车按钮 可以通过产品 ID 创建 WooCommerce 添加到购物车按钮，并在表单、小部件、帖子或页面甚至模板上使用该按钮。 理想情况下，可以自定义 WooCommerce 添加到购物车按钮以适应各种自定义选项。

WooCommerce 按产品 ID 添加到购物车按钮

在上一篇文章中，我解释了如何将 WooCommerce 添加到购物车按钮更改为链接，以及如何更改 WooCommerce 添加到购物车按钮以了解更多信息。
这些是以前的其他教程，可以帮助您了解有关如何自定义 WooCommerce 添加到购物车按钮的更多信息：

  • 如何使用链接 WooCommerce 替换“添加到购物车”按钮
  • 如何隐藏阅读更多并添加到购物车按钮 WooCommerce
  • 如何在 WooCommerce 商店页面中更改添加到购物车按钮文本
  • 如何通过示例更改添加到购物车文本 WooCommerce 指南
  • 如何在 WooCommerce 中以编程方式将产品添加到购物车
  • 如何更改 WooCommerce 的“已添加到购物车”通知
  • 如何为注销的用户隐藏价格并添加到购物车 WooCommerce

从上面的教程列表中可以看出，您可以通过多种方式自定义 WooCommerce 添加到购物车按钮，以帮助您实现不同的内容布局或设计。

例如，当您要创建 WooCommerce 定价表时，您可能需要创建添加到购物车按钮，您可以将这些按钮添加到定价表上的号召性用语按钮。

WooCommerce 按产品 ID 添加到购物车按钮

创建简单的产品 WooCommerce 按产品 ID 添加到购物车按钮

要按产品 ID 创建 WooCommerce 添加到购物车按钮，您需要知道要创建添加到购物车按钮的特定产品的产品 ID。 产品 ID 可以在所有产品概述页面上轻松找到，如本教程 -如何获取 WooCommerce 产品 ID中所述。

添加到购物车链接

现在，您可以在要显示按钮的位置创建不会添加到按钮代码的添加购物车 URL。 在这种情况下，您可以创建简单的产品添加到购物车链接，如下面的代码所示：

https://example.com/?add-to-cart=840

您网站的 URL 应替换 URL 的 example.com 部分，并且特定产品 ID 应替换上面示例中使用的产品 ID 840。

您可以将其添加到 HTML 按钮代码中，如下面的代码所示：

创建具有数量 WooCommerce 的简单产品按产品 ID 添加到购物车按钮

您还可以将数量添加到添加到购物车 URL，并且可以使用用于向 URL 添加逻辑的各种 URL 参数来执行此操作。

在这种情况下，您可以扩展我们在上述步骤中创建的代码，并创建一个简单的产品 WooCommerce 按产品 ID 添加到购物车按钮，数量为 2，如下所示：

https://example.com/?add-to-cart=840&quantity=2

如您所见，我们添加了一个 & 符号和单词数量，并将其等同于 2 当单击同一产品的按钮时我们要添加到购物车的商品数量。

要将此 URL 添加到 HTML 代码并按产品 ID 创建 WooCommerce 添加到购物车按钮，您应该使用以下代码：

通过重定向到购物车的产品 ID 创建 WooCommerce 添加到购物车按钮

为了让您的 WooCommerce 商店客户更容易浏览您的网站，创建重定向非常重要。 在过去，我强调了创建 WooCommerce 重定向的多种方法。

值得注意的是，我在这些博客文章中分享了——WooCommerce 在结帐后创建重定向和WooCommerce 在注销后重定向，甚至在结帐后创建了WooCommerce 重定向插件以帮助您在结帐后实现重定向。

添加到购物车后 WooCommerce 重定向到购物车

您还可以使用 WooCommerce 按产品 ID 添加到购物车按钮创建重定向到购物车。 您可以通过将我在上述步骤中共享的代码更改为如下方式来完成此操作：

https://example.com/cart/?add-to-cart=840

如您所见，我们已将购物车添加到URL ，以确保用户在将产品添加到购物车后被重定向到购物车。 带有HTML按钮代码的完整代码如下：

添加到购物车后，WooCommerce 重定向到结帐

您还可以使用 WooCommerce 按产品 ID 添加到购物车按钮创建结帐重定向。 您可以通过在上面的 URL 上添加结帐来更改我在该步骤中共享的代码来完成此操作，如下所示：

https://example.com/checkout/?add-to-cart=840

如您所见，我们已将结帐添加到URL ，以确保用户在将产品添加到购物车后被重定向到结帐。 带有HTML按钮代码的完整代码如下：



结论

在本教程中，我们重点介绍了通过产品 ID 创建 WooCommerce 添加到购物车按钮的各种方法。我们还了解了如何将重定向添加到添加到购物车按钮以及如何将产品数量添加到添加到购物车按钮。

我希望您现在可以按产品 ID 创建 WooCommerce 添加到购物车按钮，并将其用于您的定价表、表单和模板中。 您还可以使用我添加到上面代码中的按钮类进一步自定义添加到购物车按钮。 如果您仍在自定义您的网站，您可以从我在Ultimate WooCommerce Hide Guide 上分享的想法中受益。

对于已安装Storefront 主题并希望进一步自定义的 WooCommerce 用户，我分享了 80 多个 WooCommerce店面主题自定义技巧的精彩集合，将指导您如何使用默认 WooCommerce 主题创建网站的自定义外观 – Storefront .

类似文章

  1. 如何创建 WooCommerce 条件结帐字段
  2. 如何创建 WooCommerce 登录注销简码
  3. 如何更改按钮颜色店面主题
  4. 如何获得 WooCommerce 产品标题
  5. 如何为注销的用户隐藏价格并添加到购物车 WooCommerce
  6. 如何隐藏更新购物车按钮 WooCommerce 购物车页面
  7. 如何使用链接 WooCommerce 替换“添加到购物车”按钮
  8. 如果在 WooCommerce 中为零，如何隐藏价格
  9. 如何创建 WooCommerce 店面子主题 [完整指南]
  10. 如何隐藏 WooCommerce 营销中心管理选项
  11. 如何在 WooCommerce 中的结帐页面或订单页面上获取产品 ID
  12. 在 WooCommerce 中结帐后如何获取订单详细信息
  13. 登录 WooCommerce 后如何重定向到购物车
  14. 如何添加 WooCommerce 我的帐户页面重定向
  15. WooCommerce 登录重定向挂钩示例说明
  16. 如何在 WooCommerce 中临时禁用结帐
  17. 如何设置 WooCommerce 店面博客