如何使用 Elementor 和 ShopEngine 自定義 WooCommerce 結帳頁面

已發表: 2021-09-26

電子商務業務現在比以往任何時候都具有競爭力。 競爭越來越激烈,因為新網站定期出現。 許多電子商務企業家都在為銷售而苦苦掙扎。 你也是?

最近的一項研究表明,如今 60% 的購物車放棄是正常現象。 因此,您將潛在客戶帶到您的 WordPress 網站,讓他們選擇產品,添加購物車頁面,然後獲得退回。

在有人採取將產品添加到購物車的步驟之後沒有獲得銷售真的令人沮喪。 但是,如果您自定義 WooCommerce 結帳頁面,則可以解決此問題。

內容隱藏
為什麼要自定義 WooCommerce 結帳頁面?
自定義 WooCommerce 結帳頁面的方法
安裝 Elementor 和 ShopEngine
創建結帳頁面模板
自定義結帳頁面的結帳元素
改進 WooCommerce 結帳頁面的額外提示
ShopEngine 還提供什麼?
最後呼叫

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

WooCommerce 結帳頁面可以為客戶提供順暢的結帳流程。 但是,如果您想為您的用戶提供更豐富的購物體驗,從而提高您的轉化率,那麼您應該考慮自定義 WooCommerce 結帳頁面。

根據您的業務類型,您應該更改 WooCommerce 結帳頁面,以確保為您的客戶提供順暢的購買體驗。 例如,如果您只銷售數字商品,則無需收集地址。

說到收集地址,結帳頁面是您收集用戶數據的最佳場所,您可以使用這些數據來改善客戶的體驗,並在未來的營銷策略中使用這些數據來增加銷售額。

除了添加、刪除或編輯結帳頁面表單字段外,您還可以添加一個新部分來突出您的業務或推薦的特別優惠或 USP(獨特的銷售主張)等。所有這些都可以幫助您獲得客戶的信任並讓更多的客戶完成他們的訂單。

我希望您現在意識到自定義結帳頁面對您的 WordPress 網站的重要性,以及為什麼您應該自定義 WooCommerce 結帳頁面。

如果您想知道如何自定義 WooCommerce 結帳頁面,請移至下一部分以獲取答案。

自定義 WooCommerce 結帳頁面的方法

當所有其他公司為結帳頁面提供外部插件/插件時,wpmet 帶來了內置的拖放結帳頁面構建器。 使用 ShopEngine,您可以通過 3 個簡單的步驟創建自己的結帳頁面。

在開始設計之前,最好為即將到來的結帳頁面畫一個草圖。 它將在設計頁面時節省您的時間並消除混亂。

安裝 Elementor 和 ShopEngine

Elementor 和 ShopEngine

第一步是在您的 WordPress wooCommerce 網站中安裝 Elementor 和 ShopEngine。 這兩個插件都是免費的,可以在 WordPress 目錄中找到。 安裝插件後,請完成基本設置。

安裝密鑰:wp-admin -> Plugins -> Add New -> ShopEngine/Elementor -> Install Now -> Activate

下載 ShopEngine

創建結帳頁面模板

  • 單擊ShopEngine側邊欄菜單中的模板
  • 單擊“添加新”,您的儀表板中將顯示一個彈出窗口。
  • 從“類型”下拉菜單中設置名稱和“結帳”。
  • 將默認設置為“”並保存頁面。

設置鍵 - 轉到 ShopEngine -> 模板 -> 添加新的

自定義 woocommerce 結帳頁面

新的結帳頁面將添加到頁面列表中。 使用 Elementor 編輯頁面。 有關如何使用 ShopEngine 創建結帳頁面模板的更多詳細信息,請查看文檔。

自定義 woocommerce 結帳頁面
自定義 woocommerce 結帳頁面

您可以創建自定義字段並為您的網站製作標準的 WooCommerce 結帳頁面。 結帳頁面模板不需要自定義代碼或自定義 CSS。 使用 ShopEngine,您可以通過簡單的“拖放”來修改 WooCommerce 結帳頁面。

您可以搜索元素並將其放在頁面上。 然後保存它。 此外,您可以手動瀏覽它們。 您可以根據自己的選擇選擇任何 Elementor 佈局,添加小部件並保存。

自定義結帳頁面的結帳元素

自定義 woocommerce 結帳頁面
  • 優惠券表格-這是提供您的優惠券的表格。
  • 結帳付款-該表格用於設置結帳付款方式。 此表單包含用於自定義結帳頁面的帳單詳細信息。
  • 結帳評論訂單-使用此表格,可以獲取客戶評論。
  • 結帳表格附加- 它(自定義結帳字段)用於獲取額外信息,例如不同的帳單地址或外部信息。
  • 結帳表格計費-這是一種用於獲取客戶計費信息的表格。
  • 結帳表格登錄- 該表格用於客戶在訂單期間登錄。
  • 結帳表格運輸- 這是從客戶那裡獲取送貨地址的表格。
  • 運輸方式-運輸方式是要知道將應用哪種運輸方式。
  • 附加表格- 這些自定義字段用於獲取額外信息,例如不同的帳單地址或外部信息。
  • 表格運輸-表格運輸用於從客戶那裡獲取運輸信息。

所以,現在你知道哪個元素是乾什麼用的了! 您還擁有結帳頁面的草圖。 因此,使用 ShopEngine 拖放功能設計您的自定義 WooCommerce 結帳頁面。

注意:如果您不想從頭開始構建結帳頁面,您可以使用 ShopEngine 的預構建結帳頁面模板並編輯不同的部分以對其進行個性化設置。 為了更清楚地了解該過程,請觀看以下視頻:

使用 ShopEngine 自定義 WooCommerce 結帳頁面
https://wpmet.com/plugin/shopengine/pricing/?utm_campaign=checkoutpage&utm_medium=gif&utm_source=blog

改進 WooCommerce 結帳頁面的額外提示

總有一些秘密的東西可以促進銷售。 我們把所有的秘密技巧都公開在這裡。 應用以下技巧可以使您的銷售量大大超過您的預期。

簡化結帳流程

最近的一項研究表明,28% 的頂級電子商務網站在結帳頁面中有 5 個步驟。 您可以在您的電子商務網站上保持相同或更少的步驟。

保持結帳頁面簡單明了。 添加視覺指示器,以便您的客戶可以看到總步驟。 太多的步驟會損害您的進度。

提供多種付款方式

曾經有一段時間,電子商務網站包含一種支付方式。 這導致了很高的放棄率。 特別是當網站堅持使用本地支付網關時。

為了解決高放棄問題,品牌現在提供多種支付方式。 電子錢包和電子支付讓一切變得比以往更容易。 在這個時代,如果您不提供多種付款方式,您將失去很多客戶。

顯示結帳進度

如前所述,結帳頁面應該有大約 5 個步驟,現在,最好將這些步驟顯示為進度或步驟完成。 您的客戶應該知道完成結賬還剩多少步。

最好在標題中加上進度步驟。 它將幫助用戶了解即將發布的信息。

分享儲蓄金額

這是增加銷售額的好主意。 向您的客戶展示總節省。 假設他們從訂單中節省了 x%。 誰不想拯救? 所以,它會引起他們的注意。

您還可以顯示即將到來的儲蓄點。 例如,您可以 ping 或顯示帶有“花費 100 並節省 x% 更多”的通知。 這肯定會有助於獲得更多的銷售。

在付款過程中保持客戶在同一頁面上

如果您將客戶帶到另一個頁面進行付款,您的客戶通常會退出該站點。 他們不會回來進行額外的購物。 很難向客戶進行追加銷售和向下銷售。

因此,在創建付款時讓您的客戶保持在同一頁面上。 您現在可以集成支付網關。 它改善了客戶體驗並減少了廢棄的問題。

展示感言

在結帳頁面添加一些引人注目的推薦可以增加客戶的信任。 但請確保,您沒有在頁面上添加通用的和太多的推薦。

實施積分和獎勵

另一個減少廢棄問題的好方法是引入積分和獎勵。 如果您允許您的客戶兌換積分以進行購買或額外折扣,這將激勵他們結賬。

只有滿足上述訂單總額的要求,客戶才能在結賬時賺取積分。

嘗試追加銷售和交叉銷售

據亞馬遜稱,交叉銷售和追加銷售貢獻了他們約 35% 的收入。 據 Forrester Research 分析師稱,產品推薦平均佔電子商務網站收入的 10-30%。

結帳頁面追加銷售和交叉銷售是任何電子商務網站的最佳選擇。 通過折扣和獎勵積分展示您與客戶相關的產品。

使用適合移動設備的設計

在 SEO 方面,谷歌和所有其他搜索引擎都關心移動友好的設計。 它對搜索排名有很大影響。 好吧,如果您的結帳頁面不太適合移動設備,那麼您很有可能會失去很多客戶。

為您的電子商務網站設計一個適合移動設備的響應式結帳頁面。 您可以使用 ShopEngine 設計適合移動設備的結帳頁面,

啟用購物車內容保存

該站點應具有簡潔明了的“購物車內容”保存選項。 它不應要求用戶將來進行任何註冊、登錄或數據輸入。

https://wpmet.com/plugin/shopengine/pricing/?utm_campaign=checkoutpage&utm_medium=gif&utm_source=blog

ShopEngine 還提供什麼?

除了小部件,ShopEngine 還提供了許多有用的模塊,例如預購、延期交貨、閃購等。您以後可以隨時查看所有這些模塊的詳細信息。

但我要說明的模塊是附加結帳字段。 使用此模塊,您可以輕鬆地將自定義字段添加到 WooCommerce 結帳頁面的任何形式,並根據您的業務和要求更改 WooCommerce 結帳頁面。

您可以在下面的視頻中查看添加自定義字段是多麼容易:

將自定義字段添加到 WooCommerce 結帳頁面

獎勵博客:

如何在不編碼的情況下自定義 WooCommerce 購物車頁面(免費)
如何使用 ShopEngine 自定義 WooCommerce 我的帳戶頁面
如何使用 ShopEngine 自定義 WooCommerce 商店頁面
如何使用 ShopEngine 自定義 WooCommerce 產品頁面
WordPress 和 WooCommerce 的最佳購物車插件

最後呼叫

結賬是潛在客戶購買商品的最後一步。 因此,結帳頁面是您需要格外小心的地方。 ShopEngine 是您會發現自定義 WooCommerce 結帳頁面或修改 WooCommerce 結帳頁面並使其更加特別的最佳插件。

下載 ShopEngine
https://wpmet.com/plugin/shopengine/pricing/?utm_campaign=checkoutpage&utm_medium=gif&utm_source=blog