如何按產品 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 店面博客