您想在WooCommerce中添加滑動側車嗎？這允許購物者從您在線商店的任何頁面查看他們的購物車。然后，客戶可以將商品添加到他們的購物籃、刪除產品和添加優惠券，而無需訪問單獨的購物車頁面。在本文中，我們將向您展示如何在WooCommerce中輕松添加滑動購物車。

為什么要在WooCommerce中添加滑側推車？

滑動側推車是當客戶將商品添加到購物籃時出現的面板。

客戶還可以通過單擊購物車圖標隨時打開購物車。這使他們能夠檢查他們的購物籃，而無需訪問單獨的WooCommerce購物車頁面。

根據購物車的設置方式，購物者還可以直接從滑動面板添加和刪除商品以及應用優惠券。您甚至可以添加號召性用語按鈕，例如指向WooCommerce結帳頁面的鏈接。

滑動購物車可以通過消除購物過程中的摩擦來改善客戶體驗，并幫助購物者跟蹤他們在結賬時將支付多少費用。這可以降低購物車放棄率，同時也可能增加平均訂單價值。

方法 1.如何使用免費插件在WooCommerce中添加滑動側推車

創建滑動側推車的最快和最簡單的方法是使用 購物車 對于 WooCommerce 通過 FunnelKit.這個免費插件允許您將購物車圖標添加到您的在線商店。

購物者可以單擊按鈕打開滑動側購物車。

您可以更改購物車的顏色、邊框、按鈕、消息等。

有很多選項可以使其完全適合您的WordPress主題。

您可以在整個網站上顯示購物車按鈕，將其限制為僅限WooCommerce頁面，或使用短代碼將按鈕添加到特定頁面和帖子。

如何為WooCommerce插件設置購物車

首先，您需要安裝并激活FunnelKit Cart for WooCommerce插件。

激活后，轉到漏斗套件?購物車。您將在屏幕右側看到滑動滑車的預覽。

您現在可以自定義購物車以更好地滿足您的需求。

首先，您可以決定是在整個網站上顯示購物車圖標，還是僅在WooCommerce頁面上顯示購物車圖標。

如果您選擇“整個網站”，那么購物者可以從任何頁面打開滑動購物車，因此這是在線市場和商店的不錯選擇。

但是，一些WooCommerce網站有很多非電子商務內容。例如，您可能運行一個流行的WordPress博客，但使用WooCommerce向您的粉絲銷售商品。

在每篇博客文章上顯示購物車按鈕可能會變得煩人。在這種情況下，您可以選中“WooCommerce頁面”單選按鈕。

另一個選項是“無”，它完全隱藏了購物車圖標。

如果您選擇“無”選項，則可以使用短代碼將圖標添加到任何頁面、帖子或小部件就緒區域。您還可以將圖標添加到導航菜單中。

我們將在帖子后面向您展示如何執行此操作，但現在，如果您打算手動添加購物車圖標，請選擇“無”。

做出此決定后，選擇“左下角”或“右下角”，具體取決于您要顯示購物車按鈕的位置。在這里，通過選擇“在頁面上預覽”來檢查按鈕在您的在線商店中的外觀可能會有所幫助。

默認情況下，該插件在滑動側推車的頂部顯示“查看您的購物車”。

您可以通過在“購物車標題”字段中鍵入來將其替換為您自己的消息。

如果您不想顯示標題，則只需將該字段留空即可。

默認情況下，FunnelKit 在購物者將任何商品添加到購物籃之前顯示購物車圖標。

如果您愿意，則可以隱藏圖標，直到訪問者開始添加項目。只需單擊“隱藏購物車圖標”切換，使其變為藍色。

這就是創建基本滑動側推車所需的全部內容，但有些設置可以為您帶來更多銷售額。考慮到這一點，讓我們來看看 FunnelKit 的更高級功能。

在WooCommerce滑動側車中設置優惠券

優惠券是獲得更多銷售額和建立客戶忠誠度的好方法。

如果您使用高級優惠券插件創建了任何智能WooCommerce優惠券，則購物者可以直接在滑動購物車頁面中輸入它們。

當客戶點擊“應用”時，滑動推車將顯示他們節省了多少。

由于客戶可以立即看到折扣，這將鼓勵他們將更多商品添加到購物車中，并可能降低您的購物車放棄率。

您可以使用內置的WooCommerce優惠券功能或使用優惠券代碼插件來創建這些代碼。

要添加優惠券字段，請單擊“啟用優惠券框”切換，將其從灰色（禁用）變為藍色（啟用）。

之后，您可以在“最小化”和“擴展”布局之間切換。最小化占用的空間更少，因此不會分散注意力，但購物者需要先展開優惠券部分，然后才能輸入任何代碼。

在下圖中，您可以看到最小化的布局。

選擇布局后，您可以更改 FunnelKit 用于優惠券框標題、折扣占位符文本和按鈕文本的文本。

自定義購物車摘要

購物車摘要向客戶顯示他們的購買費用。這有助于降低購物車放棄率，因為在結賬時沒有令人討厭的驚喜。

因此，我們建議啟用“顯示小計”開關。

但是，如果要簡化側車，則可以單擊以禁用“顯示小計”切換。

您還可以顯示客戶有資格獲得的任何優惠，包括他們應用的任何優惠券的折扣。

通過這種方式，您可以使用 FOMO 來增加轉化率，尤其是在節省對時間敏感的情況下。例如，您可以在WooCommerce中安排優惠券，以便客戶只能在有限的時間內使用它們。

如果您希望從滑動側車中隱藏此信息，則可以禁用“顯示節省”切換。

您還可以將“保存文本”和“運輸文本”替換為您自己的自定義消息。

自定義WooCommerce購物車的號召性用語

滑動側購物車有一個默認的結帳按鈕，但您可以自定義此號召性用語按鈕以獲得更多轉化。首先，您可以使用“啟用按鈕圖標”切換添加結帳圖標。

如果您正在創建一個多語言WordPress網站，這可能特別有用。

您還可以使用“啟用購物車價格”切換將購物車價格添加到結帳按鈕。

這可能有助于購物者跟蹤購物車的成本，尤其是在您從購物車摘要部分刪除小計的情況下。

默認情況下，FunnelKit 在滑動側車的底部添加一個“繼續購物”鏈接。您可以通過在“繼續購物文本”字段中鍵入內容，將此文本替換為您自己的消息。

之后，選擇此鏈接是簡單地關閉側購物車面板還是將購物者重定向到您的WooCommerce商店頁面。

大多數購物者都希望退出滑動購物車，因此我們建議您選擇“關閉側購物車”按鈕。

如果您選擇“重定向到商店”，則可能需要更改“繼續購物文本”文本，以便清楚地了解客戶點擊鏈接時會發生什么。

創建自定義空購物車屏幕

可以隱藏購物車按鈕，直到購物者按照上述過程將至少一件商品添加到他們的購物籃中。

但是，如果您不隱藏按鈕，則客戶有時可能會看到空的購物車屏幕。

您可以使用“空購物車”部分中的設置更改標題、說明和按鈕文本。通常，您需要鼓勵客戶開始購物。例如，您可以談論您提供的內容，例如免費送貨或退款保證。

您甚至可以給購物者一個優惠券代碼，例如買一送一 （BOGO） 折扣。

您還可以選擇是單擊“立即購買”按鈕將客戶帶到WooCommerce商店頁面，還是直接關閉側面板。

我們建議選擇“重定向到商店”，因為這將使購物者更容易開始將商品添加到購物車。

在您的網站上的任何位置添加購物車圖標

如果您想更好地控制購物車圖標的顯示位置，則可以使用簡碼將其添加到任何頁面、帖子或小部件就緒區域。您也可以將其添加到站點的菜單中。

如果您按照上述過程在“圖標可見性”設置中選擇“無”，這是一個不錯的選擇。

但是，如果您選擇了“WooCommerce頁面”，則此方法允許您將購物車圖標添加到網站的其他重要區域。例如，您可以將圖標添加到自定義主頁或聯系表單。

首先，選擇“購物車菜單”，然后單擊“啟用購物車菜單”切換。

現在，您可以通過選擇其中一個圖標模板并選擇是否將產品計數和購物車總數顯示為圖標的一部分來更改圖標的外觀。此信息可以幫助訪問者跟蹤他們的購物車。

您還可以更改圖標大小和文本大小。在您進行更改時，小預覽將自動更新，因此您可以嘗試不同的設置以查看最佳外觀。

如果您對滑動側車圖標的外觀感到滿意，請單擊“保存”按鈕。

現在，您可以使用“嵌入簡碼”旁邊的代碼將圖標添加到任何頁面、帖子或小部件就緒區域。

另一種選擇是將圖標添加到站點的導航菜單中。這樣，滑動側推車始終觸手可及，而不會分散主頁內容的注意力。

為此，請打開“添加到菜單”下拉菜單，然后選擇要使用的菜單。

之后，單擊“保存”按鈕。

現在，如果您訪問WordPress網站，您將在導航菜單中看到購物車圖標。

添加您自己的顏色和品牌

您可能需要更改滑動側車的顏色以更好地匹配您的 WooCommerce 主題或品牌。要更改文本顏色，按鈕顏色，鏈接顏色等，請繼續并單擊“樣式”。

要更改任何默認顏色，只需單擊一下即可。這將打開一個彈出窗口，您可以在其中嘗試不同的顏色。

例如，在下圖中，我們正在自定義邊框。

另一種選擇是在“十六進制”字段中輸入十六進制代碼。如果您已經想到了特定的陰影，這是完美的。

如果您不知道要使用什么十六進制代碼，那么使用像 HTML 顏色代碼這樣的網站可能會有所幫助。在這里，您可以探索不同的顏色，然后獲取一個代碼，您可以簡單地將其粘貼到 FunnelKit 插件中。

如何創建響應式滑動側推車

許多人使用移動設備購買產品和服務。考慮到這一點，您需要確保滑動側推車在智能手機和平板電腦上看起來和在臺式計算機上一樣好。

在這里，更改購物車的寬度可能會有所幫助，這樣它就不會完全填滿移動設備的小屏幕。為此，請單擊“樣式”，然后查看“購物車預覽移動寬度”。

您可能需要嘗試在此字段中鍵入不同的值。如果您確實更改了默認設置，那么最好從桌面檢查WordPress網站的移動版本，以確保您對結果感到滿意。

當您在此屏幕上時，您還可以更改桌面上滑動側推車的寬度。為此，只需更改“購物車預覽桌面寬度”字段中的數字。

如何發布您的滑動側推車

當您對滑動側推車的設置方式感到滿意時，就該讓它上線了。只需單擊“購物車”旁邊的“草稿”按鈕，然后選擇“發布”。

現在，如果您訪問您的在線商店，您將看到滑動購物車。

如果您想在任何時候移除滑動側推車，那么只需返回 漏斗套件 ? 購物車 在 WordPress 儀表板中。然后，單擊“發布”按鈕并選擇“草稿”。

方法 2.添加高級滑動側推車（具有加售、交叉銷售和獎勵）

如果您想增加商店的平均訂單價值，則可以升級到FunnelKit Cart Pro。這個先進的滑動側推車插件為 FunnelKit 滑動側車添加了強大的追加銷售、交叉銷售和獎勵功能。

使用此插件，您可以在每次客戶將商品添加到購物車時推薦相關產品。

您還可以創建獨特的獎勵，例如優惠券代碼和免費禮物，然后在滑動購物車內推廣它們。

FunnelKit甚至可以跟蹤客戶需要花費多少，以解鎖下一個獎勵。

要添加這些強大的功能，您需要升級到 FunnelKit 漏斗生成器專業版。請注意，您需要Plus或更高的權限。

購買權限后，登錄您的漏斗套件帳戶。在這里，您將找到FunnelKit Funnel Builder Pro插件，以及FunnelKit Funnel Builder和FunnelKit Cart。您需要安裝所有三個插件才能解鎖高級滑車功能。

首先，您需要安裝并激活這三個插件。

激活后，轉到 漏斗套件 ? 設置并將您的許可證密鑰添加到“漏斗套件漏斗生成器專業版”字段。

您可以通過登錄您的帳戶來找到此信息 漏斗套件 網站.完成后，單擊“激活”。

之后，只需轉到 漏斗套件 ? 購物車.

現在，您可以按照方法 1 中描述的相同過程配置和自定義側車。當您對滑動側車的設置方式感到滿意時，您就可以添加追加銷售、交叉銷售和獎勵了。

通過追加銷售和交叉銷售WooCommerce產品獲得更多銷售額

當客戶打開滑動側購物車時，您可以根據購物籃中的商品向他們展示獨特的追加銷售和交叉銷售促銷活動。

追加銷售是您鼓勵購物者購買價格更高的產品而不是購物車中已有的產品的地方。

例如，假設客戶將防水夾克添加到他們的購物車中。您可能會建議使用更高質量的夾克，它更耐用、用途廣泛，并且有不同的顏色。

交叉銷售是您推廣與客戶已經購買的商品相關的產品的地方。例如，如果他們在購物車中添加賀卡，那么您也可以鼓勵他們購買巧克力或鮮花。

WooCommerce具有鏈接的產品功能，可讓您創建追加銷售和交叉銷售。

但是，您也可以直接從 FunnelKit 儀表板。這是最快的選項，因此我們將在本指南中使用它。

首先，單擊“加售”選項，然后選擇“啟用購物車加售”。

之后，滾動到“加售和交叉銷售”部分。

在這里，您將看到在線商店中的所有產品。

只需單擊要添加一個或多個鏈接產品的項目。

然后，單擊“添加追加銷售”或“添加交叉銷售”，具體取決于您要創建的促銷類型。

在彈出窗口中，開始鍵入要用作追加銷售或交叉銷售的產品。當出現正確的產品時，點擊一下。

要提供多種產品，只需遵循上述相同流程即可。

完成后，只需單擊“添加”按鈕。

現在，您只需按照上述相同的流程，即可為商店中的每種產品創建獨特的交叉銷售和追加銷售活動。

現在，您已準備好自定義追加銷售和交叉銷售促銷活動在滑動側購物車上的外觀。

首先，嘗試通過單擊“顯示”旁邊的單選按鈕在不同樣式之間切換。

實時預覽將自動更新，因此您可以嘗試不同的樣式，看看您最喜歡哪一種。

默認情況下，FunnelKit 將在滑動側購物車中顯示追加銷售和交叉銷售。如果您愿意，則可以僅顯示追加銷售，或者僅使用“產品推薦類型”中的單選按鈕顯示交叉銷售。

接下來，您可以通過在“標題”字段中輸入來更改 FunnelKit 在追加銷售或交叉銷售促銷上方顯示的標題。

請注意，FunnelKit 將為兩種類型的促銷使用相同的標題。

之后，您可以通過輸入“顯示最大追加銷售量”字段來設置FunnelKit將顯示的建議產品的最大數量。

在可能的情況下，最好為每種產品創建獨特的追加銷售和交叉銷售促銷活動。但是，如果您的在線商店有很多商品，那么這可能是不可能的。

考慮到這一點，您可以設置一個默認的追加銷售產品，FunnelKit 在沒有鏈接產品可用時將推廣該產品。為此，只需在“默認追加銷售”字段中輸入產品名稱即可。當出現正確的產品時，點擊一下。

當您對創建的追加銷售和交叉銷售促銷活動感到滿意時，請不要忘記單擊“保存”以存儲您的更改。

提供免費送貨、折扣和免費禮品

您通常可以通過讓客戶有理由花費更多來增加平均訂單價值。考慮到這一點， FunnelKit 允許您創建各種獎勵，然后將它們作為滑動側推車中的可解鎖獎金進行推廣。

例如，如果客戶超過最低支出，您可以提供免費送貨服務。FunnelKit甚至會向客戶展示他們需要花多少錢才能解鎖他們的獎品。

這是通過游戲化獲得更多銷售額并建立客戶忠誠度的簡單方法。

FunnelKit 允許您提供三種不同的獎勵：免費送貨、折扣和免費禮物。

要提供免費送貨服務，您需要已經在WooCommerce商店中設置了送貨服務。

同時，當客戶達到最低消費時，“折扣”獎勵會自動應用優惠券。如果您想提供此獎勵，則需要使用內置的WooCommerce優惠券功能或WordPress優惠券插件創建百分比折扣券。

之后，您可以通過在 FunnelKit 設置中選擇“獎勵”，然后單擊“創建獎勵”來創建獎勵。

您現在可以打開“類型”下拉菜單，然后選擇要創建的獎勵類型。

無論您選擇免費禮品、免費送貨還是折扣，您都可以通過在“消息”字段中輸入來更改 FunnelKit 向客戶顯示的文本。

如果您確實進行了任何更改，請注意不要進行編輯，因為這可以讓 FunnelKit 顯示客戶需要多花多少錢。{{remaining_amount}}

如果您要提供折扣，請確保更改消息以顯示客戶將節省多少。

完成后，在“獲得獎勵的金額”字段中輸入一個數字。這是購物者必須花費多少才能解鎖獎勵。

如果您提供百分比折扣，則需要指定應自動應用的優惠券 FunnelKit。

在“優惠券”字段中，開始輸入您要使用的優惠券。當出現正確的代碼時，單擊一下。

現在，當有人達到最低支出時，FunnelKit將自動應用優惠券。

提供免費禮物？然后開始在“產品”字段中輸入禮物的名稱。

當正確的產品出現時，點擊一下。

現在，FunnelKit將在客戶達到最低消費后立即將此商品添加到客戶的購物車中。

要添加更多獎勵，只需單擊“創建另一個獎勵”。

現在，您可以按照上述相同過程配置折扣、免費禮品或免費送貨獎勵。

默認情況下，一旦客戶有資格獲得所有獎項，FunnelKit 將顯示以下消息：“恭喜！你已經解鎖了所有的獎勵。

要顯示不同的消息，只需在“解鎖所有獎勵時”字段中輸入即可。您甚至可以為客戶提供解鎖所有獎勵的特殊獎勵，例如下次購買時使用的獨家優惠券代碼。

如果您對獎勵的設置方式感到滿意，請單擊“保存”按鈕。

如何發布您的滑動側推車

當您準備好使滑動側推車上線時，只需選擇“購物車”旁邊的“草稿”按鈕。然后，您可以單擊“發布”。

如果您想在任何時候卸下滑動側推車，那么只需返回 漏斗套件 ? 購物車 在 WordPress 儀表板中。然后，單擊“發布”按鈕并選擇“草稿”。