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 不發送電子郵件時該怎麼辦

您對添加到購物車有任何問題嗎？ 你做了什麼來修復它們？ 在下面的評論部分讓我們知道！