新增至購物車按鈕是任何網店（包括基於 WooCommerce 建立的網店）的關鍵要素。沒有新增至購物車按鈕，顧客就無法結賬。此外，戰略性地放置該按鈕也很重要，這樣可以簡化客戶的購買流程並提高銷售額。
如果您經營的是 WooCommerce 商店，“新增到購物車”按鈕就是您推動轉化率的最有力工具之一。它是客戶瀏覽和購買之間的橋樑。一個佈局合理、功能齊全的新增到購物車按鈕會讓購物體驗更加流暢，並增加銷售的可能性。
但是，如果這個關鍵按鈕丟失或不按預期執行，會發生什麼情況呢？許多店主都會遇到一些常見問題，如“新增到購物車按鈕未顯示”錯誤，或者他們希望自定義按鈕，以獲得更具品牌特色的體驗。
在本指南中，我們將介紹三種為 WooCommerce 增加新增至購物車按鈕的方法：使用外掛、簡碼和自定義程式碼。我們還將分享放置新增至購物車按鈕的最佳實踐，以及遇到錯誤時的故障排除技巧。
無論您是希望獲得完全控制權的開發人員，還是尋求簡單解決方案的店主，抑或是正在排查錯誤的人員，這些都是高效完成工作的實用步驟。
WooCommerce新增至購物車按鈕入門
WooCommerce 中的新增到購物車按鈕是人們與您的店鋪互動的重要方式。預設情況下，它允許客戶選擇產品並將其新增到購物車。
以下是該按鈕的簡要介紹：
- 產品頁面：與標題、價格和描述等產品詳細資訊一起顯示。
- 商店頁面：直接顯示在每個產品下方，讓顧客無需訪問單個產品頁面即可新增商品。
- 分類頁面：與商店頁面類似，它簡化了特定商店類別中多個產品的購買流程。
雖然 WooCommerce 提供的預設“新增到購物車”按鈕適用於大多數商店，但在某些情況下，您可能需要進行更改。例如，您可能想自定義按鈕，使其與您的品牌設計、語言相匹配，或新增一些額外的功能。或者，您可能需要修復一些東西。如果由於主題相容性問題、外掛衝突或過時的 WooCommerce 設定導致按鈕丟失、損壞或無法正常執行，那麼可能需要進行一些故障排除。
在下面的章節中，我們將探討新增、自定義和修復新增到購物車按鈕的不同方法，讓您的 WooCommerce 商店發揮最佳效能。
增加WooCommerce新增至購物車按鈕的三種方法
我們將向您展示三種新增 WooCommerce 新增到購物車按鈕的方法。請根據您的需求和技術專長選擇最適合您的方法。
使用外掛實現新增至購物車按鈕
啟用外掛是新增和自定義 WooCommerce 新增到購物車按鈕的最簡單方法。它是初學者的最佳選擇，因為您無需掌握任何編碼知識。
我們將向您展示如何使用 WooCommerce Custom Add To Cart Button 外掛實現新增至購物車按鈕：
WooCommerce Custom Add to Cart Button 外掛
通過 Woo Custom Add to Cart Button 外掛，您可以個性化設定 WooCommerce 購物車新增按鈕的工作方式。您可以完全控制按鈕的文字、顏色、樣式和位置，使它們與您的商店品牌完美匹配。該外掛還支援自定義 URL 等高階功能，因此您可以在點選按鈕後將客戶重定向到特定頁面，如結賬或自定義登陸頁面。
主要功能
- 自定義新增到購物車按鈕的文字、樣式和位置。
- 設定自定義重定向 URL，增強結賬流程。
- 無需接觸程式碼即可輕鬆應用更改，方便初學者使用。
- 重量輕，與大多數 WooCommerce 主題相容。
具體步驟
- 在 WordPress 儀表盤中，導航至外掛 → 安裝新外掛。
- 搜尋 WooCommerce Custom Add To Cart Button 並點選立即安裝。
- 最後點選啟用。
- 啟用後，進入外觀 → 自定義 → WooCommerce → Add To Cart Buttons。在此，您可以配置多項設定，例如自定義按鈕文字、新增或隱藏購物車圖示，以及調整按鈕和文字顏色。
- 單擊“釋出 ” 應用更改。自定義將應用於全站的所有產品和商店頁面。
訪問您的電子商務商店並測試新按鈕，以確保其按預期執行。
除了上述外掛外，您還可以試試另外兩個值得信賴的外掛，可幫助您管理和自定義 WooCommerce 新增到購物車按鈕：
YITH WooCommerce Product Add-Ons
YITH WooCommerce Product Add-Ons 外掛
通過 YITH WooCommerce Product Add-Ons 外掛，您可以直接在產品頁面上提供附加選項和自定義功能，從而增強產品功能。無論是禮品包裝、個性化欄位還是額外服務，該外掛都能讓您更輕鬆地提供定製購物體驗。顧客可以在購買過程中選擇附加元件，從而提高他們的滿意度，增加商店的平均訂單價值。
主要功能
- 為產品新增無限制的額外選項，包括覈取方塊、下拉選單、文字欄位等。
- 對選定的附加元件收取額外費用，以增加收入。
- 提供條件邏輯，根據客戶選擇顯示選項。
- 與可變產品和 WooCommerce 主題完全相容。
WPC AJAX Add to Cart
WPC AJAX Add to Cart 外掛
WPC AJAX Add to Cart 外掛允許客戶在不重新整理頁面的情況下將產品新增到購物車，從而增強了您的 WooCommerce 商店的功能。這種 AJAX 功能改善了購物體驗，使其更快、更友好。該外掛支援多種產品型別，包括簡單、可變和分組產品。它還能與大多數 WooCommerce 主題和外掛整合。
主要功能
- AJAX 驅動的新增到購物車功能可帶來更流暢的使用者體驗。
- 靈活支援不同的產品型別，包括可變產品和分組產品。
- 與流行的 WooCommerce 主題和擴充套件相容。
- 輕量級設計，確保您的商店保持快速響應。
不過，有些使用者可能會發現這個新增至購物車按鈕外掛的自定義選項有侷限性。在這種情況下，我們建議嘗試其他兩種方法。
使用短程式碼實現實現新增至購物車按鈕
簡碼是一種程式碼片段，可讓您在文章、頁面或小部件中插入動態內容。WooCommerce 有一個內建的簡碼，可以為你店鋪中的任何產品新增一個新增至購物車按鈕。
以下是如何使用 WooCommerce 短程式碼新增新增到購物車按鈕：
- 進入“產品” → “所有產品”，找到產品 ID。將滑鼠懸停在產品上，您會看到其名稱下方列出了產品 ID。
- 使用以下短程式碼新增新增至購物車按鈕。用實際產品 ID 替換PRODUCT_ID：
[add_to_cart id="PRODUCT_ID"]
- 將簡碼插入您希望顯示新增至購物車按鈕的任何文章、頁面或小工具中。在 WordPress 塊編輯器中，轉到頁面或文章，新增一個 Shortcode 區塊，然後貼上短程式碼。
如果使用經典編輯器，則直接將簡碼貼上到視覺化編輯器中。
要將按鈕新增為小部件，請導航至外觀 → 小工具，選擇段落小工具，然後貼上簡碼。
自定義 WooCommerce 短程式碼引數
要自定義按鈕的行為和外觀，您可以在簡碼中新增以下引數：
- quantity – 設定客戶點選按鈕後可以新增到購物車的商品數量。例如，新增 2 件 ID 為 25 的商品：
[add_to_cart id="25" quantity="2"]
- show_price – 選擇是否在按鈕旁邊顯示產品價格。將 show_price 設為 true 可顯示價格，設為 false 則隱藏價格。
[add_to_cart id="25" show_price="false"]
- style – 自定義按鈕的外觀。您可以定義邊框（border）、背景顏色（background-color）或字型大小（font-size）等樣式。
[add_to_cart id="25" style=""]
- sku – 使用產品的庫存單位 (SKU)，而不是特定的產品 ID。
[add_to_cart sku="SKU123"]
- class – 為按鈕新增自定義 CSS 類，以實現高階樣式和功能。例如，新增 custom-add-to-cart-button 類後，您就可以在主題的 CSS 檔案中進一步設定按鈕樣式。
[add_to_cart id="25" class="custom-add-to-cart-button"]
- button_text – 自定義購物車按鈕文字。
[add_to_cart id="25" button_text="Buy Now!"]
- redirect –將產品新增到購物車後，將使用者重定向到不同頁面，如購物車或結賬頁面。用目標頁面 URL 替換 your_store_url：
[add_to_cart id="25" redirect="true" url="your_store_url"]
對簡碼進行自定義後，釋出或更新頁面或文章。
使用自定義程式碼實現新增至購物車按鈕
如果你擅長編輯程式碼，可以調整主題的 functions.php 檔案，自定義 WooCommerce 商店中新增到購物車按鈕的外觀和工作方式。
對於這種方法，我們建議使用子主題，以防止丟失您的主題定製。
重要！請注意，此方法需要謹慎，因為錯誤的更改可能會破壞您的網站。請務必在繼續操作前建立 WordPress 備份。
根據主題型別開啟 functions.php 檔案：
（1）通過主題檔案編輯器選單 。如果使用的是經典主題，請前往外觀 → 主題檔案編輯器 。從右側邊欄選擇活動主題的 functions.php 檔案。
（2）通過檔案管理器或 FTP。對於沒有“主題檔案編輯器 ”選項的區塊主題，可使用主機提供商的檔案管理器或 FileZilla 等 FTP 客戶端編輯該檔案。該檔案位於public-html/wp-content/themes/your-theme/functions.php 下。
然後，在檔案末尾新增以下程式碼片段，以便在商店頁面的每個產品後顯示新增到購物車按鈕。您可以自定義 HTML 和 CSS 以更改按鈕的樣式和位置。
function custom_add_to_cart_button() {
echo '<a href="' . esc_url( get_permalink() ) . '?add-to-cart=' . get_the_ID() . '" class="button add_to_cart_button">Add to Cart</a>';
}
add_action('woocommerce_after_shop_loop_item', 'custom_add_to_cart_button', 10);
最後，儲存對 functions.php 檔案的更改。如果使用主題檔案編輯器，請單擊“更新檔案”按鈕。如果通過檔案管理器或 FTP 客戶端編輯，請儲存編輯內容並重新上傳檔案。
如何自定義WooCommerce購物車新增按鈕
自定義新增到購物車按鈕可改善使用者體驗，並使其與店鋪品牌更加匹配。無論您想更改文字、樣式還是功能，只要對主題檔案或CSS 進行一些調整，WooCommerce 就能幫您實現。切記使用子主題進行這些更改，並在繼續之前備份網站。
更改按鈕文字
預設情況下，WooCommerce 使用“新增至購物車”作為按鈕文字。如果您想將其替換為“立即購買”或“新增到購物袋”，只需使用簡單的程式碼片段即可。
將以下程式碼新增到子主題的 functions.php 檔案中：
function customize_add_to_cart_text( $text ) {
return __( 'Buy Now', 'woocommerce' );
}
add_filter( 'woocommerce_product_add_to_cart_text', 'customize_add_to_cart_text' );
將 Buy Now 替換為您喜歡的文字。
儲存檔案並重新整理商店，即可看到更新後的按鈕文字。
更改按鈕樣式
為了更好地匹配您的品牌，請使用自定義 CSS 來修改按鈕的外觀，包括顏色、字型和大小。
下面是一個自定義新增到購物車按鈕的 CSS 示例：
.button.single_add_to_cart_button {
background-color: #ff6600;
color: #ffffff;
font-size: 18px;
padding: 12px 24px;
border-radius: 8px;
text-transform: uppercase;
}
.button.single_add_to_cart_button:hover {
background-color: #e65c00;
color: #ffffff;
}
要應用此 CSS，請進入 WordPress 面板中的外觀>自定義>附加 CSS。貼上上面的程式碼，然後點選“釋出”儲存更改。
新增自定義 CSS 以更改新增到購物車按鈕的樣式
點選按鈕後重定向使用者
點選新增到購物車按鈕後，客戶通常會停留在同一頁面。如果想將使用者重定向到特定頁面（如購物車或結賬頁面），請在 functions.php 檔案中新增以下來自 GitHub 的程式碼段：
function redirect_after_add_to_cart() {
global $woocommerce;
$checkout_url = wc_get_checkout_url();
return $checkout_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_after_add_to_cart' );
此示例將使用者重定向到結賬頁面。
如有需要，請將 $checkout_url 替換為其他頁面 URL（例如購物車頁面）。
更有效的WooCommerce新增至購物車按鈕
既然您已經知道如何為 WooCommerce 增加新增至購物車按鈕，那麼讓我們來談談如何最大限度地發揮它的潛力，以提高您的銷售額。以下是有效新增至購物車按鈕的六大技巧：
讓新增到購物車按鈕脫穎而出
新增至購物車按鈕應易於識別，以鼓勵客戶購買產品。
使用大膽、對比強烈的顏色，既要與你的品牌相一致，又要從頁面的其他部分中脫穎而出。例如，如果您的網站主要使用中性色，那麼紅色或綠色等鮮豔的對比色可以讓按鈕更加引人注目。
以優衣庫的“新增至購物車 ”按鈕為例。在以白色為主色調的頁面上，紅色顯得格外醒目，同時也符合品牌的色調。
在新增至購物車按鈕的大小方面，您也應該找到一個合適的位置。確保按鈕足夠大，便於點選，但也不要太大，以免佔用太多空間。
戰略性地放置按鈕
WooCommerce 新增至購物車按鈕應清晰可見，易於訪問。理想情況下，它應該是客戶訪問產品頁面時看到的第一個元素。
我們建議將新增至購物車按鈕放在產品標題、價格和圖片等關鍵元素附近。如果您需要詳細的產品描述，可以考慮設定一個粘性的新增至購物車按鈕，即使使用者滾動頁面，該按鈕也能保持可見。
編寫明確的行動號召
新增到購物車按鈕上的文字應該簡單、清晰，並以行動為導向。
不要使用處理（Proceed ）或繼續（Continue）等含糊不清的詞語，而應使用直接的語言來表達所需的操作，如新增至購物車或立即購買。
您還可以在文字上發揮創意，針對目標受眾進行個性化設計。例如，線上時裝店可以寫“新增至購物袋”，庫存有限的商品可以寫“立即購買”。
此外，還可以考慮在文字旁邊新增至購物車圖示。這樣，顧客就能更直觀地看到新增至購物車按鈕。
保持一致的設計
確保新增到購物車按鈕的設計與網站的其他部分保持一致。如果按鈕看起來不協調或不合適，就會讓客戶感到困惑，從而降低他們點選按鈕的可能性。
請使用品牌調色盤中的顏色和字型，並確保按鈕無論放在 WooCommerce 商店的哪個位置，看起來都是一樣的。
新增互動元素
視覺反饋可以讓顧客知道他們的操作是否成功，從而提升使用者體驗。它使購物更加直觀，並有助於防止任何混淆。
您可以採用微妙的動畫效果，如輕微的顏色變化、確認彈出視窗或購物車圖示，在顧客將商品新增到購物車時實時更新。
儘管如此，還是要保持簡單。不要讓過多的動畫讓使用者不知所措。
確保按鈕移動端適配
近 80% 的購物者通過移動裝置訪問網店。因此，您的“新增至購物車”按鈕必須在任何尺寸的螢幕上都能正常執行。
經驗法則是讓按鈕足夠大，便於點選。此外，按鈕周圍要留出足夠的空間，以防止意外點選附近的元素。
嘗試使用不同螢幕尺寸的裝置訪問您的網店，看看按鈕是否能完美執行。這樣您就可以立即修復任何錯誤。
如何修復新增至購物車按鈕丟失問題
WooCommerce 新增至購物車按鈕丟失的問題時有發生。以下是一些排除錯誤的方法：
檢查您的WooCommerce設定
如果您的 WooCommerce 設定不完整，新增到購物車按鈕就不會顯示。
在這種情況下，您應該檢查網店的貨幣、發貨選項和付款方式是否配置正確。
請參考我們的 WooCommerce 教學，確保您已遵循所有基本步驟。
檢查您的WooCommerce產品資料
如果產品缺貨或缺少任何必要的詳細資訊，如圖片、價格、產品型別、庫存單位（SKU）和送貨規則，WooCommerce 可能會隱藏新增到購物車按鈕。
如果是這種情況，填寫 WooCommerce 產品缺失的資訊可能會解決問題。或者，考慮刪除已售出的產品，防止它們出現在您的頁面和搜尋中。
清除WordPress快取
您的網站快取可能顯示的是沒有新增到購物車按鈕的過時產品頁面。
使用快取外掛清除 WordPress 快取可以解決這個問題。以下是使用 LiteSpeed Cache 的方法：
- 從 WordPress 管理儀表盤安裝並啟用外掛。
- 導航至 LiteSpeed Cache→Toolbox。
- 預設情況下會開啟“Purge”選項卡。選擇“Purge All”，清除網站的全部快取。
對網站進行惡意軟體掃描
惡意軟體會破壞或修改 WordPress 核心檔案、網站的 JavaScript 或 PHP 程式碼、外掛或主題。這可能會導致新增到購物車按鈕無法執行。
使用 Wordfence 或 Sucuri 等 WordPress 安全外掛掃描並刪除網站檔案中的惡意軟體。
您還可以考慮從惡意軟體感染前的備份中恢復網站。
檢查是否有衝突的外掛或主題
重要！我們建議您在暫存環境中嘗試此故障排除方法，因為它可能會影響您的實時網站功能。
安裝多個 WooCommerce 外掛可讓您建立一個功能強大的電子商務網站。不過，外掛之間的不相容性可能會導致 WooCommerce 購物車按鈕失效。
要排除這個問題，請嘗試停用除 WooCommerce 以外的所有外掛，並檢查新增到購物車按鈕是否出現在實時網站上。
如果出現，請逐個重新啟用外掛，找出衝突源。然後，嘗試更新相關外掛（如果它已經過時）。如果沒有，請將其刪除或嘗試找到替代品。
如果不是外掛導致的問題，請嘗試切換到預設的 WooCommerce 主題（如Storefront），看看是否會出現新增到購物車按鈕。如果出現了，那麼很可能是你的活動主題導致了錯誤。
如果你不想更換 WordPress 主題，請檢查當前主題是否是最新的。如果是，請嘗試諮詢主題的支援團隊來解決問題。
常見問題及解決方法
即使使用了 WooCommerce 的內建功能，“新增到購物車”按鈕有時也會看起來很奇怪、表現不正確或完全無法顯示。這會影響商店的效能，讓客戶感到失望。下面，我們將討論最常見的問題，並提供逐步解決的方法。
新增到購物車按鈕不顯示
如果新增到購物車按鈕丟失，通常是由於以下原因造成的：
- 主題相容性問題
- 外掛衝突
- 過時的 WooCommerce 版本
- 產品設定不正確
要解決這個問題，請先檢查您的 WooCommerce 設定。進入 WooCommerce>Settings>Products，確保選中 Enable AJAX add to cart buttons（啟用 AJAX 新增到購物車按鈕）選項。
確認已勾選啟用 AJAX 新增到購物車按鈕覈取方塊
然後，驗證產品型別。某些產品型別（如外部產品或聯盟產品）可能不顯示新增到購物車按鈕。要解決這個問題，請進入儀表板中的產品>所有產品。
然後，編輯產品，確保在 Product Data 部分將其設定為 Simple Product 或 Variable Product。
檢查產品型別是否正確
如果還不能解決問題，請測試外掛是否衝突。停用除 WooCommerce 以外的所有外掛，然後訪問您的商店，檢視新增到購物車按鈕是否再次出現。如果出現，請逐個重新啟用外掛，每次都要重新整理網站以確定衝突的外掛。
要繼續排除故障，請暫時切換到預設主題，如 Storefront 或 Twenty Twenty-Four。如果按鈕在預設主題下正常工作，則問題出在您的活動主題上。您可能需要聯絡主題開發人員尋求支援。
您還可以檢查 WooCommerce 和 WordPress 是否為最新版本。進入控制面板>更新，確保 WooCommerce、WordPress 和所有外掛都是最新的。過時的版本會導致錯誤和效能問題。
如果仍有問題，請啟用除錯。為此，請進入 WooCommerce > Status > Logs，查詢錯誤資訊。Query Monitor 外掛等工具可幫助識別 PHP 錯誤或衝突。
Query Monitor 外掛
新增到購物車按鈕不起作用
有時，按鈕可能會出現，但無法將產品新增到購物車。出現這種情況的原因可能是 JavaScript 錯誤或快取問題。
首先，檢查 JavaScript 是否有錯誤。在瀏覽器中開啟您的商店，然後按 F12 鍵開啟開發工具，或按 Mac 上的 Cmd + Option + I 鍵。轉到控制檯選項卡，檢查是否有紅色錯誤資訊。
如果出現錯誤，可能是主題或外掛中的指令碼衝突造成的。
如果使用快取外掛，請清除快取並再次測試。清除瀏覽器快取或在隱身視窗中測試網站。
重複的新增到購物車按鈕
有時，您可能會在產品頁面上看到多個新增到購物車按鈕，這會讓客戶感到困惑。
這通常是由主題模板或自定義造成的。要解決這個問題，請檢查主題的 single-product.php 檔案中是否有重複的 do_action(‘woocommerce_after_add_to_cart_button’) 鉤子。然後刪除重複的鉤子並儲存更改。
如何在新增至購物車按鈕上新增連結？
您可以使用 WooCommerce Custom Add to Cart Button 等外掛，輕鬆為按鈕新增自定義連結。如果您擅長編輯程式碼，可在 [add_too_cart] 簡碼中新增重定向引數，或編輯主題的 functions.php 檔案。
WooCommerce新增至購物車按鈕的簡碼是什麼？
WooCommerce 中新增到購物車按鈕的簡碼是 [add_too_cart] 。基本語法是 [add_to_cart id=“PRODUCT_ID”]， 其中您應將 PRODUCT_ID 替換為產品的實際 ID 編號。
如何編輯WooCommerce購物車按鈕？
WooCommerce Custom Add to Cart Button 外掛可讓您對按鈕進行簡單修改。要進行更高階的調整，可在 WooCommerce [add_too_cart] 簡碼中新增樣式和類 引數，或在主題的 functions.php 檔案中新增自定義 CSS。但請記住，在修改程式碼之前，請建立一個子主題或備份您的網站。
小結
WooCommerce 新增到購物車按鈕在建立流暢的購物體驗和提高轉化率方面發揮著重要作用。
在本教學中，您已經學會了如何使用三種不同的方法新增 WooCommerce 新增到購物車按鈕。您可以使用簡碼來簡化操作，編輯主題檔案來實現完全控制，或者使用外掛來實現無程式碼解決方案。我們還介紹瞭如何解決常見問題和新增一些自定義功能，以便從一開始就建立穩固的使用者體驗。
每種方法都能為您提供不同程度的控制和靈活性，因此請選擇最適合您需要的方法。有策略地放置新增到購物車按鈕確實能讓顧客的購物體驗更順暢、更愉快。當這種情況發生時，您可能會看到更多的銷售額。
定期檢查網店的新增到購物車按鈕是否正常執行也很重要，這樣您就可以立即解決任何問題。希望本指南能幫助您優化網店的新增到購物車按鈕，並告訴您如何在出現錯誤時排除故障。
評論留言