如何自定義 WooCommerce 結帳頁面(簡單方法)


您想自定義您的 WooCommerce 結帳頁面嗎?

默認的 WooCommerce 結帳頁面未針對轉化進行優化。 通過自定義和優化您的結帳頁面,您可以增加轉化次數並增加銷售額。

在本文中,我們將向您展示如何輕鬆自定義您的 WooCommerce 結賬頁面,而無需編寫任何代碼。

如何自定義 WooCommerce 結帳頁面(簡單的方法)

為什麼要在 WordPress 中自定義 WooCommerce 結帳頁面?

研究表明,70% 至 85% 的購物車被遺棄。 換句話說,大多數用戶在沒有購買的情況下離開了您的結帳頁面。

創建自定義 WooCommerce 結帳頁面為您提供了在網站訪問者離開您的商店之前將其轉變為客戶的最後機會。

使用自定義結帳頁面,您可以添加推薦/社會證明元素以建立信任,添加相關產品以增加收入,並優化整體頁面佈局以獲得更好的轉化。

結帳頁面示例

所有這些都將提高轉化率,並使您的訪問者更有可能成為長期客戶。

在繼續之前,您可能還想自定義您的 WooCommerce 購物車頁面,以提高此處的轉化率。

如果您同時使用 WooCommerce 的購物車和結帳頁面,那麼您會希望這些頁面具有相似的品牌,以便為訪問者提供出色的結帳體驗。

通過一起自定義這些,您可以提高整體轉化率並賺取更多收入。 有關更多詳細信息,請參閱有關如何在不編寫任何代碼的情況下創建自定義 WooCommerce 購物車頁面的指南。

話雖如此,讓我們來看看如何輕鬆自定義 WooCommerce 結帳頁面並從您的在線商店賺取更多收入。

如何在 WordPress 中自定義您的 WooCommerce 結賬頁面

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

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

筆記: 有一個免費版本的 SeedProd 可用,但在本教程中,我們將展示 Pro 版本,因為它具有內置的 WooCommerce 塊。

插件激活後,轉到 SeedProd » 設置 並輸入您的許可證密鑰。

SeedProd 許可證密鑰

您可以在 SeedProd 網站上的帳戶頁面下找到此信息。

之後,導航到 Seedprod » 頁面 然後單擊“添加新著陸頁”按鈕。

添加新的 SeedProd 登陸頁面

接下來,系統會要求您選擇登錄頁面模板。 有數十種專業設計的模板供您選擇。

您會注意到模板按不同類別進行過濾。 選擇與您要創建的頁麵類型相匹配的模板類別可以幫助您更快地構建頁面。

話雖如此,無論您選擇哪種模板,每個模板都可以完全自定義。

在本教程中,我們將選擇“空白”模板,因為這使我們能夠構建所需的確切類型的結帳頁面。

要選擇模板,請將鼠標懸停在模板上並單擊“對勾”圖標。

選擇空白 SeedProd 模板

之後,系統會要求您為頁面命名。 頁面名稱也將與您的結帳頁面的 URL 匹配。

然後,單擊“保存並開始編輯頁面”按鈕。

姓名結帳頁面

這將帶您進入拖放編輯器,您可以在其中構建自定義 WooCommerce 結帳頁面。

右側將是您的頁面預覽,左側是幫助您自定義的選項面板。

首先,我們將添加一個標題,以便您可以維護您的品牌。

為此,請單擊左側面板中的“部分”菜單選項,然後單擊“標題”類別。

插入標題部分

之後,將鼠標懸停在“標題 1”模板上,然後單擊“加號”圖標。

接下來,單擊頁面的“圖片”部分並在左側菜單上上傳您的商店徽標。

添加標題徽標

然後,您可以通過將鼠標懸停在導航菜單上並單擊“刪除塊”來刪除它。

刪除其他菜單項會減少頁面退出的次數,並使您的訪問者更有可能完成購買。

刪除菜單塊

完成後,單擊標有“號召性用語”的按鈕。

我們將更改文本,使其顯示為“查看購物車”。

編輯按鈕文本

這讓您的用戶可以返回他們的購物車頁面添加商品或更改數量。

然後,將您的 WooCommerce 購物車頁面的 URL 添加到標有“鏈接”的框中。

您可以將鏈接設為 nofollow 或在新選項卡中打開,但我們將保留默認設置。

編輯按鈕網址

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

這使您可以為結賬創建一個部分,以及一個推薦的產品部分。

選擇兩列佈局

之後,在 WooCommerce 部分找到“結帳”塊並將其拖到您的頁面上。

您可以完全自定義結賬的外觀,包括配色方案、字體選擇、鏈接顏色、按鈕等。

添加結帳塊

接下來,您可以添加熱門產品或推薦產品部分。 這可以讓您通過推廣購物者可能感興趣的其他產品來提高銷售額。

要添加此內容,只需將“WooCommerce”部分的“暢銷產品”塊拖到上方即可。

您也可以選擇任何其他 WooCommerce 產品塊。

添加 WooCommerce 產品塊

接下來,您可以在熱門產品上方添加標題。

只需將“標題”塊拖到流行產品上方的頁面上。 您可以自定義字體、大小、文本、顏色等。

添加產品標題塊

完成後,您可以添加一個推薦塊。 這可以作為社會證明,並確保您的訪問者做出正確的決定。

找到“推薦”塊並將其拖到您的熱門產品下方。

添加推薦塊

推薦塊可以完全定制。

您可以添加客戶照片、職位等。

自定義推薦塊

您可以做的另一件事是在您的推薦下添加星級,以進一步提高社交證明。

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

添加星級評分塊

完成自定義 WooCommerce 結帳頁面後,您可以通過單擊“保存”按鈕旁邊的下拉箭頭並選擇“發布”來使其生效。

發布結帳頁面

現在,您創建了一個高轉換率的 WooCommerce 結賬頁面,而不是默認的 WooCommerce 結賬頁面。

隨意繼續自定義您的頁面並測試不同的元素、部分和塊。

WooCommerce 結帳頁面示例

專家提示: 您可以跟踪您的 WooCommerce 結帳頁面性能,以查看您的自定義設置是否提高了收入。 有關更多詳細信息,請參閱有關如何設置 WooCommerce 轉換跟踪的分步指南。

將您的結帳頁面分配給 WooCommerce

完成自定義結帳頁面並使其生效後,您需要更改默認的 WooCommerce URL 設置。

更改 URL 可以讓您的客戶自動轉到您的新 WooCommerce 結帳頁面,而不是默認選項。

首先,去 WooCommerce » 設置 並單擊“高級”選項卡。

更改 WooCommerce 購物車 URL

然後,從下拉菜單中選擇新的 WooCommerce 結賬頁面 URL。

確保點擊屏幕底部的“保存更改”。

現在,當訪問者點擊“繼續結帳”時,他們將被帶到您剛剛構建的新的、高轉化率的頁面。

一些 WooCommerce 主題甚至讓客戶可以選擇直接進入結帳頁面。

直接結帳示例

如何減少結帳頁面的放棄

結帳頁面放棄是指客戶開始結帳流程,但未完成付款。 這類似於放棄購物車,但它是完成付款並成為客戶的又一步。

使用上面的教程自定義您的結帳頁面將大大有助於優化您的結帳頁面以進行轉換。

但是,您可以採取一些措施來進一步減少放棄結賬的情況。

減少任何附加結帳費用

當客戶到達他們的購物車時,他們希望總價與產品總價相似。

如果他們結賬時看到了稅費、高昂的運費和其他額外費用,那麼他們很有可能無法完成購買。

添加費用示例

如果客戶認為成本合理,他們可能會繼續購買。 但是,最好的辦法是預先確定您的定價。

如果您有很多額外費用來履行您的產品,那麼將這些添加到您的總產品價格中。 或者,解釋額外費用的原因。

亞馬遜通過提供 2 天免費送貨服務,在電子商務領域佔據主導地位。

考慮為您的產品提供免費送貨服務或為超過一定金額的訂單提供免費送貨服務。

使帳戶創建成為可選或更簡單

在完成購買之前要求註冊帳戶可能會導致放棄。 這可以增加您的電子郵件訂閱者,但會增加購買過程中的摩擦。

您可以允許您的用戶創建一個帳戶,但您不必將其作為一項要求。

相反,您可以設置一個註冊表單以在用戶完成購買後增加您的電子郵件列表。

您還可以簡化結帳頁面上的必填字段。 如果您需要收集更多信息,則可以在結帳後進行。

目標應該是從用戶的方式中消除盡可能多的領域(摩擦點),以便他們完成購買。

提供更多結帳付款選項

您的訪問者不會完成結帳流程的另一個原因是您沒有提供足夠的付款選項。

您的在線商店應提供最常見的付款方式。

付款選項示例

您的客戶將使用對他們來說最方便的付款方式。

有關更多詳細信息,請參閱我們的 WordPress 最佳 WooCommerce 支付網關列表。

我們希望本文能幫助您輕鬆自定義 WooCommerce 結帳頁面。 您可能還想查看我們精選的最佳 WooCommerce 託管專家,以及我們為您的商店列出的最佳 WooCommerce 插件列表。

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