如何創建自定義 WooCommerce 購物車頁面(無編碼)


您想創建自定義的 WooCommerce 購物車頁面嗎?

默認的 WooCommerce 購物車頁面未針對轉化進行優化。 通過優化購物車頁面佈局,您可以顯著提高轉化率並獲得更多銷售額。

在本文中,我們將向您展示如何在沒有任何技術知識的情況下自定義您的 WooCommerce 購物車頁面。

如何創建自定義 WooCommerce 購物車頁面(無編碼)

為什麼要在 WordPress 中創建自定義 WooCommerce 購物車頁面?

創建自定義 WooCommerce 購物車頁面使您有機會增加在線商店的銷售轉化率。

研究表明,近十分之七的客戶會放棄您的購物車,再也不會回來。

通過優化默認的 WooCommerce 購物車頁面,您可以在不增加當前流量的情況下進行更多銷售。

OptinMonster 購物車頁面示例

當您的訪問者的購物車中有商品時,他們就快要完成購買了。 您的 WooCommerce 購物車頁面應盡一切可能使轉換發生。

話雖如此,讓我們來看看如何無需代碼即可自定義 WooCommerce 購物車頁面。

如何在 WordPress 中創建自定義 WooCommerce 購物車頁面

SeedProd 是超過 100 萬個網站使用的最佳拖放頁面構建器。 它可讓您輕鬆創建自定義 WooCommerce 購物車頁面以增加銷售額。

您需要做的第一件事是安裝並激活插件。 有關更多詳細信息,請參閱有關如何安裝 WordPress 插件的分步指南。

筆記: 您可以使用免費版本的 SeedProd,但在本教程中,我們將使用 Pro 版本,因為它具有我們需要的內置 WooCommerce 塊。

插件激活後,你需要去 SeedProd » 設置 並輸入您的產品許可證密鑰。

輸入 SeedProd 許可證密鑰

您可以在 SeedProd 網站上的帳戶信息下找到您的許可證密鑰。

完成後,轉到 SeedProd » 頁面 並單擊“添加新著陸頁”按鈕以創建您的購物車頁面。

添加新的 SeedProd 購物車頁面

之後,您需要選擇購物車頁面模板。 您可以使用數十種專業設計的模板。 找到您喜歡的模板後,將鼠標懸停在它上面並單擊“對勾”圖標。

我們將使用“Blank”模板,因為它允許我們只添加我們想要的部分。

選擇 SeedProd 模板

接下來,系統會要求您為購物車頁面命名,然後單擊“保存並開始編輯頁面”。

這將帶您進入拖放構建器,您可以在其中開始構建自定義購物車頁面。

首先,我們將添加一個圖像塊並上傳徽標。 您可以調整它以使其看起來像您的標題,而無需點擊以減少放棄。

這可以保持您的品牌形象,但讓您的訪問者退出較少,因此他們更有可能進行購買。

接下來,只需選擇“圖像”塊並將其拖到您的頁面上。 然後,從您的圖片庫上傳您的徽標。

添加圖像塊標題

您可以使用左側的選項面板完全自定義它。

接下來,單擊“選擇您的佈局:”部分中的內容和側邊欄塊。

選擇 SeedProd 佈局

這使您可以為購物車創建一個部分,以及一個推薦部分。

之後,在 WooCommerce 部分找到“購物車”塊並將其拖過來。

添加 WooCommerce 購物車塊

您可以自定義購物車的每個部分,包括字體選擇、顏色、按鈕等。

自定義 WooCommerce 購物車塊

接下來,您可以添加一個推薦塊。 這些可以作為您的訪客的社會證明,並向他們表明他們正在做出正確的決定。

找到“推薦”塊並將其拖到打開的部分。

添加推薦塊

您可以完全控制您的推薦書的外觀。

可以選擇添加客戶照片、更改推薦、添加職位等。

自定義推薦塊

如果您想添加多個推薦,請按照上述相同步驟操作。

另一個好主意是在您的推薦下方添加星級。

只需選擇“星級”塊並將其拖到您的推薦下即可。

添加星級評分塊

如果您想創造稀缺性以鼓勵客戶立即購買,那麼您可以在購物車中添加稀缺計時器。

您需要做的就是選擇“倒數計時器”塊並將其拖到購物車的頂部。 然後,選擇“訪客計時器”選項,以便為所有訪客刷新計時器。

倒數計時器常綠塊

接下來,添加一個標題,通知您的購物者在購物車到期之前有一段固定的時間。

只需將“標題”塊拖到“標題”塊上並輸入您的文字即可。

倒數計時器標題

要添加的另一個重要功能是流行的產品部分。 這可以讓您通過推廣客戶可能感興趣的其他熱門產品來提高銷售額。

為此,只需從“WooCommerce”部分拖過“暢銷產品”塊。

您還可以選擇要添加的任何其他產品塊。

添加 SeedProd 產品塊

有關將流行產品添加到 WooCommerce 的更多詳細信息,請參閱我們關於如何在 WooCommerce 中顯示流行產品的指南。

對購物車頁面進行更改後,您可以通過單擊“保存”按鈕旁邊的箭頭並選擇“發布”來實時發布它。

實時發布購物車

接下來,您需要在 WooCommerce 設置中調整您的購物車 URL。

WooCommerce » 設置 然後單擊“高級”選項卡。

WooCommerce 購物車設置

之後,選擇您使用 SeedProd 創建的新購物車頁面 URL。 確保點擊屏幕底部的“保存更改”。

根據您使用的 WooCommerce 主題,您的訪問者現在可以更輕鬆地導航到購物車頁面。

查看 WooCommerce 購物車下拉菜單

這也將幫助您的訪問者在移動設備上查看他們的購物車。

您可以繼續使用 SeedProd 自定義您的購物車頁面、添加新塊並更改設計,直到完美為止。

繼續測試嘗試不同的元素,看看什麼能最大程度地提高轉化率。

購物車頁面示例

要跟踪您的 WooCommerce 購物車轉化,請參閱我們關於如何設置 WooCommerce 轉化跟踪的分步指南。

獎勵:如何進一步改善 WooCommerce 購物車頁面轉換

創建自定義 WooCommerce 購物車頁面後,您可以進一步提高轉化率並減少購物車放棄。

這有助於您從現有流量中獲得更多收入。

這裡有一些簡單的方法來做到這一點。

1. 在 WooCommerce 中使用定時彈出窗口減少購物車放棄

近 70% 的購物車被丟棄。 減少購物車放棄的最佳方法之一是使用定時彈出窗口。

OptinMonster 是超過 120 萬個網站使用的最好的 WordPress 彈出插件。

OptinMonster WooCommerce 彈出窗口

它使用獨特的 Exit-Intent® 技術在用戶即將離開您的網站時準確顯示彈出窗口。

您可以使用專屬於他們的獨特優惠券代碼來吸引他們回來。

OptinMonster 彈出窗口 WooCommerce

如果您已經為訪問者提供了優惠券,請使用教育彈出窗口來幫助解決任何問題並讓他們放心購買,例如來自 WPForms 的這個。

WPForms 退出意圖彈出窗口

您還可以將更多獨特的彈出窗口和幻燈片添加到您的網站。

例如,如果客戶將一件商品添加到他們的購物車並離開但後來又回來了,那麼您可以添加一個提供優惠券的幻燈片來完成他們的購買。

OptinMonster 購物車提醒

有關更多詳細信息,請參閱有關如何創建 WooCommerce 彈出窗口以增加銷售額的指南。

2. 通過 WooCommerce 中的社交活動通知促進銷售

社交活動通知會實時提醒您的訪問者有新的購買。 這使用 FOMO 來改善您的轉換並推動他們購買。

將社交證明通知添加到您的 WooCommerce 購物車頁面的最簡單方法是使用 TrustPulse。

TrustPulse WooCommerce 通知

它是市場上 WordPress 和 WooCommerce 最好的社交證明插件,並且已被證明可以將轉化率提高 15%。

它可以在幾分鐘內完成設置,您可以自動顯示最近購買、免費試用註冊等信息的通知氣泡。

通知不會妨礙您的購物車或用戶體驗。 他們唯一做的就是提高您的商店轉化率。

TrustPulse 警報通知

有關更多詳細信息,請參閱有關如何在您的 WordPress 網站上使用 FOMO 以增加轉化率的指南。

我們希望本文能幫助您在不編寫任何代碼的情況下創建自定義 WooCommerce 購物車頁面。 您可能還想查看我們關於如何改進 WooCommerce SEO 以增加流量的分步指南,以及我們為您的商店挑選的最佳 WooCommerce 插件的專家。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 你也可以找到我們 推特 和臉書。