如何輕鬆在WooCommerce中添加滑動側邊購物車
最後更新於2024年4月9日 | 編輯部 | 審閱者：Syed Balkhi
是否想在您的WooCommerce商店中添加一個滑動側邊購物車？這樣可以讓購物者在您的網店的任何頁面查看購物車內容，添加商品、移除產品、以及添加優惠券，而無需訪問單獨的購物車頁面。
本文將向您展示如何輕鬆在WooCommerce中添加滑動購物車。
為什麼要在WooCommerce中添加滑動側邊購物車？
滑動側邊購物車是一個面板，當顧客將商品添加到購物車時會出現。顧客還可以隨時通過點擊購物車圖標打開購物車，這樣他們可以在不訪問單獨的WooCommerce購物車頁面的情況下檢查購物車。
根據購物車的設置，購物者還可以直接從滑動面板中添加和移除商品以及應用優惠券。您甚至可以添加行動號召按鈕，例如鏈接到WooCommerce結帳頁面。
滑動購物車可以通過減少購物流程中的摩擦，使顧客更容易追蹤結帳時需要支付的金額，從而改善客戶體驗，並減少購物車放棄率。
方法1：使用免費插件在WooCommerce中添加滑動側邊購物車
創建滑動側邊購物車最快且最簡單的方法是使用FunnelKit的Cart For WooCommerce免費插件。該插件允許您在網店中添加購物車圖標。購物者可以點擊按鈕打開滑動側邊購物車。
您可以更改購物車的顏色、邊框、按鈕、訊息等。選項多樣，您可以創建完全適合任何WordPress主題的購物車。
您可以在整個網站上顯示購物車按鈕，僅限於WooCommerce頁面，或使用短代碼將按鈕添加到特定頁面和帖子。
如何設置Cart For WooCommerce插件
首先，您需要安裝並啟用FunnelKit的Cart For WooCommerce插件。如果需要幫助，請參閱我們關於如何安裝WordPress插件的指南。
啟用後，前往FunnelKit » Cart。您會看到屏幕右側顯示的滑動側邊購物車預覽。
現在您可以自定義購物車以更好地符合您的需求。開始時，您可以決定在整個網站上還是僅在WooCommerce頁面上顯示購物車圖標。如果選擇「整個網站」，那麼購物者可以從任何頁面打開滑動購物車，這對於在線市場和商店來說是個不錯的選擇。
然而，您的網站可能有很多非電子商務內容。例如，您可能運行一個流行的WordPress博客，但使用WooCommerce向粉絲出售商品。在每篇博客帖子上顯示購物車按鈕可能會讓人煩惱。在這種情況下，您可以選擇「WooCommerce頁面」。
另一個選項是「無」，這會完全隱藏購物車圖標。如果選擇「無」選項，則可以使用短代碼將圖標添加到任何頁面、帖子或小部件區域。稍後我們會展示如何操作，但如果您計劃手動添加購物車圖標，可以選擇「無」。
作出這個決定後，根據希望將購物車按鈕顯示的位置選擇「左下角」或「右下角」。查看通過選擇「頁面預覽」按鈕來了解按鈕在網店上的顯示效果，這可能會有所幫助。
在WooCommerce滑動側邊購物車中接受優惠券
優惠券是增加銷售和建立客戶忠誠度的好方法。如果您使用Advanced Coupons插件創建了任何智能WooCommerce優惠券，那麼購物者可以直接在滑動購物車頁面輸入它們。當顧客點擊「應用」後，滑動購物車會顯示他們節省的金額。通過立即向顧客顯示折扣，您可以減少購物車放棄率並鼓勵他們添加更多商品到購物車。
您可以使用內置的WooCommerce優惠券功能或使用優惠券代碼插件創建這些代碼。要添加優惠券字段，點擊「啟用優惠券框」切換，將其從灰色（禁用）變為藍色（啟用）。
之後，您可以在「顯示」旁邊選擇「最小化」和「展開」佈局。最小化佔用更少的空間，因此不會過於分散注意力，但購物者需要展開優惠券部分才能輸入任何代碼。選好佈局後，您可以更改FunnelKit用於優惠券框標題、折扣佔位符文本和按鈕文本。
自定義購物車摘要
購物車摘要顯示給顧客其購物的總花費。這有助於減少購物車放棄率，因為結帳時不會有令人不快的驚喜。出於這個原因，我們建議保留「顯示小計」切換為啟用。不過，如果想簡化側邊購物車，可以點擊禁用「顯示小計」切換。
您還可以顯示顧客獲得的任何折扣，包括他們應用的任何優惠券折扣。這樣可以利用FOMO（錯過的恐懼症）來增加轉換，特別是如果折扣是有時間限制的。例如，您可以在WooCommerce中安排優惠券使顧客只能在有限時間內使用。如果希望從滑動側邊購物車中移除此信息，可以禁用「顯示折扣」切換。您還可以用自訂訊息替換「折扣文本」和「運輸文本」。
自定義WooCommerce購物車的行動召喚
滑動側邊購物車有一個默認的結帳按鈕，但您可以自訂此行動召喚按鈕以獲得更多轉換。首先，您可以使用「啟用按鈕圖標」切換添加結帳圖標。
如果您正在創建多語言WordPress網站，這可能特別有用。您還可以使用「啟用購物車價格」切換在結帳按鈕中添加購物車價格。這將幫助購物者跟蹤購物車的總花費，特別是如果您已從購物車摘要部分移除小計。默認情況下，FunnelKit在滑動側邊購物車底部添加一個「繼續購物」鏈接。您可以通過在「繼續購物文本」字段中輸入自己的訊息來替換此文本。之後，選擇此鏈接是僅關閉側邊購物車面板還是重定向顧客到WooCommerce商店頁面。大多數購物者會期望退出滑動購物車，因此我們建議選擇「關閉側邊購物車」按鈕。如果選擇「重定向到商店」，可能想更改「繼續購物文本」文本，使其明確顯示點擊鏈接後會發生的情況。
自定義空購物車頁面
可以按照上述過程隱藏購物車按鈕，直到顧客至少添加一個商品到購物車。如果不隱藏按鈕，顧客有時可能會看到一個空購物車頁面。可以使用「空購物車」部分的設置更改標題、描述和按鈕文本。通常，您會希望鼓勵顧客開始購物。例如，可以談論您提供的一些服務，如免費運輸或退款保障，甚至可以給顧客一個優惠券代碼，如買一送一的折扣。您還可以選擇點擊「立即購物」按鈕是將顧客重定向到WooCommerce商店頁面還是僅關閉側邊面板。我們建議選擇「重定向到商店」，這將使顧客更容易開始添加商品到他們的購物車。
在您的網站上任何地方添加購物車圖標
如果想更精確地控制購物車圖標的顯示位置，可以使用簡碼將其添加到任何頁面、帖子或小部件區域，還可以將其添加到網站的導航菜單。如果在導航菜單中添加圖標，滑動側邊購物車始終觸手可及，且不會干擾主要頁面內容。要做到這一點，打開「添加到菜單」下拉框，選擇要使用的菜單。如果選擇「WooCommerce頁面」，也可以將購物車圖標添加到網站其他重要區域。例如，將圖標添加到自訂首頁或聯絡表單。
要開始，選擇「購物車菜單」，然後點擊「啟用購物車菜單」切換。現在可以改變圖標的外觀，選擇一個圖標模板，並選擇是否顯示產品數量和購物車總計作為圖標的一部分。這些信息可以幫助訪客跟蹤他們的購物車。您還可以更改圖標大小和文本大小。進行更改時，小預覽將自動更新，您可以嘗試不同的設置以查看哪個最好。
當對滑動側邊購物車圖標的外觀滿意後，點擊「保存」按鈕。現在可以使用簡碼將圖標添加到任何頁面、帖子或小部件區域。更多信息請參見我們的指南，了解如何在WordPress中添加簡碼。另一個選項是將圖標添加到網站的導航菜單。這樣，滑動側邊購物車始終觸手可及且不會干擾主要頁面內容。要做到這一點，打開「添加到菜單」下拉框，選擇要使用的菜單。之後，點擊「保存」按鈕。現在，如果訪問您的WordPress網站，您會在導航菜單中看到購物車圖標。
添加您的顏色和品牌標誌
您可能希望更改滑動側邊購物車的顏色以更好地匹配您的WooCommerce主題或品牌。要更改文本顏色、按鈕顏色、鏈接顏色等，請點擊「樣式」。要更改任何默認顏色，只需點擊即可。這將打開一個彈出窗口，您可以在其中嘗試不同的顏色。例如，在下圖中，我們正在自訂邊框。另一個選擇是將色碼輸入到「十六進制」字段中。如果已經有特定的色調，這是完美的選擇。如果不知道要使用哪個色碼，可能會幫助使用例如HTML Color Codes這樣的網站。在這裡，您可以探索不同的顏色，然後獲取一個代碼，並將其粘貼到FunnelKit插件中。如果仍然不確定要使用哪種顏色，可以查看我們的指南，了解如何為您的WordPress網站選擇完美的配色方案。
如何創建響應式滑動側邊購物車
根據我們的互聯網使用報告，全球互聯網人口中超過90％的人使用移動設備上網。考慮到這一點，您會希望確保滑動側邊購物車在智能手機和平板電腦上的顯示效果與在桌面計算機上一樣好。在這裡，可能希望更改購物車的寬度，使其不會完全填滿移動設備的小屏幕。為此，點擊「樣式」，然後查看「購物車預覽移動寬度」。可以嘗試在此字段中輸入不同的值。如果更改默認設置，最好從桌面檢查WordPress網站的移動版本，以確保對結果滿意。在此屏幕上，還可以更改桌面上的滑動側邊購物車寬度。為此，只需更改「購物車預覽桌面寬度」字段中的數字。
如何發布您的滑動側邊購物車
當滿意滑動側邊購物車的設置後，可以使其生效。只需點擊「啟用購物車」滑桿，使其變為藍色。現在，如果訪問您的網店，您會看到滑動購物車已上線。如果想在任何時候移除滑動側邊購物車，只需返回WordPress儀表盤中的FunnelKit » Cart，然後點擊禁用「啟用購物車」滑桿。
方法2：添加高級滑動側邊購物車（帶有追加銷售、交叉銷售和獎勵）
如果想增加商店的平均訂單價值，可以升級到FunnelKit Cart Pro。該高級滑動側邊購物車插件在FunnelKit滑動側邊購物車中添加了強大的增銷、交叉銷售和獎勵功能。通過該插件，每當顧客將商品添加到購物車時，您可以推薦相關產品。您還可以創建獨特的獎勵，例如優惠券代碼和免費禮品，然後在滑動購物車內推廣它們。FunnelKit可以甚至追蹤顧客需要再花多少錢才能解鎖下一個獎勵。