• 主頁
  • 文章
  • 插件
  • 如何通過 4 個簡單步驟創建類似 Shopify 的 WooCommerce 結帳頁面

如何通過 4 個簡單步驟創建類似 Shopify 的 WooCommerce 結帳頁面

已發表: 2022-02-12

事實上，默認的 WooCommerce 結帳頁面看起來很乏味，並且缺少轉換優化的元素。

作為 WooCommerce 的強大競爭對手，Shopify 憑藉其著名的結賬頁面戰勝了 WooCommerce。 它直觀、賞心悅目、速度快，最重要的是，它轉換得非常好。

如果您正在尋找一種簡單的方法來自定義您的 WooCommerce 結帳頁面以滿足 Shopify 風格，那麼您就在正確的頁面上！

本文將向您展示如何快速創建類似 Shopify 的 WooCommerce 結帳頁面的分步指南。

但首先，讓我們分解一下 Shopify 結帳頁面，以了解為什麼它很容易轉換。

  • 是什麼讓 Shopify 結帳頁面易於轉換
  • Shopify 與 WooCommerce 結帳頁面
  • 如何創建類似 Shopify 的 WooCommerce 結帳頁面
  • CheckoutWC 替代方案

是什麼讓 Shopify 結帳頁面易於轉換

在電子商務結賬體驗方面，Shopify 結賬頁面優於其他電子商務解決方案。 最新的 Littledata 調查發現，Shopify 的平均轉化率為 2.1%，而 WooCommerce 的這一數字僅下降到 0.7%。

那麼是什麼讓 Shopify 結帳頁面易於轉換？ 我們分析並提出了以下9個關鍵點。

#1。 無干擾的直觀佈局

整個 Shopify 結帳頁面看起來非常乾淨整潔，間距和填充適當。 它僅通過減少所有導致分心的亂七八糟的東西（包括導航菜單）來專注於結帳目的。
直觀的 Shopify 結帳佈局

#2。 麵包屑導航

Shopify 沒有在結帳頁面上包含導航菜單，而是將其優化為進度指示器或麵包屑。 這很棒，因為它不僅可以節省空間，還可以幫助向用戶展示他們在購買過程中的確切位置。

基本上，Shopify 將結賬分為三個邏輯步驟：信息、運輸和付款。 客戶只需單擊麵包屑導航中的任何一個，即可在步驟之間跳轉。
Shopify 麵包屑

#3。 電子郵件輸入設置為頂部

在頂部字段詢問電子郵件地址證明了這種聰明的轉換技巧。 如果用戶放棄他們的購物車，這種做法可以讓您輕鬆跟進他們。 這為恢復購物車放棄提供了機會。
在頂部設置電子郵件輸入

#4。 谷歌地址自動填充

根據 Shopify 開發團隊的說法，這種 Google 地址自動填充功能可以最大限度地減少結賬時的摩擦，並為店主帶來更多銷售。

只要買家在地址字段中輸入其地址的一些首字母，Google 地址自動填充就會顯示匹配選項。 通過減少在結帳頁面上花費的時間，這極大地有助於為客戶創造快速結帳體驗。

Shopify 確實測試了這個功能，他們發現拼寫錯誤的百分比和花費的時間下降到了 20%，更不用說轉化率提高了。
谷歌地址自動填充

#5。 多個快速結帳選項

就像它的名字一樣真實，快速結賬讓您可以盡快結賬。

通常，客戶在下訂單之前必須填寫平均 10 個字段。 你可以想像那個儀式是多麼的煩人和耗時。

意識到這一擔憂，包括亞馬遜在內的大多數頂級在線零售商都通過提供多種快遞支付選項對超快結賬表示“是”。

Paypal 強調，使用 Paypal Express Checkout “為客戶提供了通過結賬過程的捷徑，降低了放棄購物車的可能性。” 此外，這種方法還將您的轉化率提高到 3.75%，並使您的底線翻倍。

幸運的是，Shopify 在您的結帳頁面上允許這些選項。
Shopify 的快速結帳選項

#6。 帶有清晰說明的 CTA 按鈕

除了麵包屑，Shopify 還通過 CTA 按鈕上的指導性副本讓用戶免於在每個結帳步驟中令人困惑地導航。 這些 CTA 按鈕直接通知用戶下一步或上一步。
Shopify 的 CTA 按鈕清除說明

正如您在屏幕截圖中看到的，Shopify 在左側提供了“返回購物車”選項，並在右側向您展示了輸入信用卡的下一步。

#7。 訂單總額中的成本透明度

你知道嗎，不明確的定價恰好是放棄購物車的主要原因。 大約 17% 的買家放棄了他們的購物車，因為他們無法看到預先計算的訂單總額。 （購物）

Shopify checkout 不僅讓購物者看到他們的訂單總額，而且還分解了所有成本，從而消除了這種煩惱。 不僅如此，它還通過與產品名稱一起顯示的圖像和產品數量來保證成本透明度。 多虧了這一點，用戶肯定知道他們的購物車中有多少物品以及相應的總價格。
Shopify 的成本明細

#8。 數據預覽

當您繼續下一步時，Shopify 將在頂部顯示您已填寫的所有基本字段。 這使您可以檢查是否鍵入了正確的信息。 如果出現錯誤，請點擊“更改”以返回該字段。
Shopify 的數據預覽選項

#9。 移動優化

Shopify 已經是一個天生的移動優化電子商務解決方案。 您是否知道，無論 Shopify 擁有多少主題，它們都在移動和以轉化為中心方面具有相似之處？

Shopify 移動優化結帳頁面

從上面的截圖中，你能看到頂部的訂單摘要嗎？ 很高興知道它是可折疊的，在移動屏幕上不會佔用太多空間。 用戶可以在完成購買之前再次點擊它以查看訂單詳細信息。

Shopify 與 WooCommerce 結帳頁面

為了讓您清楚地了解 Shopify 與 WooCommerce 結帳頁面，讓我們將這兩個電子商務巨頭的默認結帳頁面並排放置。
Shopify 與 WooCommerce 結帳頁面

那麼您想填寫哪種表格？ Shopify 或 WooCommerce 結帳頁面？ 如果您的目光被 Shopify 吸引，它不會讓我們大開眼界。

Purple Ninja 可能在各方面都勝過 Green Bag，但在結賬流程和設計方面可能落後於競爭對手。

默認的 WooCommerce 結帳頁面看起來既無聊又令人困惑。 該頁面似乎並沒有履行其增加銷售額的主要職責，而是專注於詢問客戶數據。

它在一頁上塞滿了許多輸入字段，一頁一頁地排列。 更重要的是，您不能將它們拆分為多個步驟或在頂部設置重要字段，例如電子郵件地址或電話號碼。 這似乎是數千 WooCommerce 店主錯過銷售的根本原因。

如果你想調整頁面，你別無選擇，只能使用一堆自定義代碼。

此外，無法優化移動設備上的默認 WooCommerce 結帳頁面。 更不用說冗長的佈局，甚至不是所有的 WooCommerce 結帳主題都針對移動設備進行了優化。

最重要的是，Shopify 對每個結帳步驟都使用 Ajax，這意味著您無需重新加載頁面。 另一方面，WooCommerce 缺少開箱即用的 Ajax，因此您必須多次重新加載。 這使得在結帳過程中查看和編輯您的購物車非常痛苦。

因此，當談到 Shopify 與 WooCommerce 結帳頁面時，戰線已被繪製出來。

幸運的是，創建 WooCommerce 一頁結帳並不是優化默認結帳的唯一方法。 借助多樣化的 WordPress 插件系統，您可以將外觀基本且轉換率低的 WooCommerce 結帳頁面轉換為類似 Shopify 的頁面。

如何創建類似 Shopify 的 WooCommerce 結帳頁面

在本教程中，我們選擇 CheckoutWC。 這是一個簡單易用的插件，可以在一秒鐘內將默認的 WooCommerce 結帳頁面轉換為高轉化率的 Shopify 結帳樣式。

該插件擁有大量您夢寐以求的高級功能，例如：

  • 輕鬆快速結帳
  • 具有自動查找和簡單創建的帳戶創建/登錄
  • 自動填充地址並與 Google Maps API 集成
  • 與廣泛的主要 WooCommerce 插件直接集成。

另外，CheckoutWC 支持 Ajax。 由於用戶不需要重新加載頁面來更新項目，因此這會掃除所有來回。

總而言之，CheckoutWC 彌補了我們在 WooCommerce 平台上發現的所有負面影響。

您可以註冊 CheckoutWC 免費試用 7 天以了解其工作原理。 設置 Shopify 風格的 WooCommerce 結帳頁面的過程需要 4 個簡單的步驟。

  • 第 1 步：註冊免費試用 CheckoutWC

他們會要求您提供信用卡，但不用擔心，您只會在試用期結束時收到賬單。

  • 第 2 步：安裝 CheckoutWC 插件

註冊後，下載插件 zip 文件的鏈接將附在您的電子郵件收據或感謝頁面上。

您可以通過解壓縮文件並通過 SFTP 上傳來安裝插件，或者只需轉到 WordPress 儀表板中的插件 > 添加新的。

安裝後，點擊激活。

  • 第三步：選擇你想要的模板

前往Settings > Checkout for WooCommerce > Templates 。 在數百個 Shopify 結帳頁面副本中，選擇Copify 。
CheckoutWC 的 Copify 模板

  • 第 4 步：添加您的徽標並查看您的新結帳頁面

切換到附近的“設計”選項卡，選擇Logo > Upload Images 。 請記住保存您的更改。
上傳徽標圖片

現在，是時候預覽您的新結帳頁面了。

返回您的新結帳頁面，將產品添加到您的購物車，單擊結帳並享受新的類似 Shopify 的 WoooCommerce 結帳頁面。

CheckoutWC 替代方案

如果 CheckoutWC 的價格讓您猶豫不決，讓我們考慮另一種創建 Shopify 風格的 WooCommerce 結帳頁面的絕佳選擇——Aero Checkout。

使用 Aero Checkout，您無需從頭開始構建結帳頁面。 它包含各種預先設計和高轉化率的結帳模板，包括您可以在現場使用的單頁結帳和嵌入式表格。

Aero Checkout 的一些顯著特點是：

  • 多步驟結帳頁面
  • 小推車改裝
  • 字段預覽
  • 谷歌地址自動填充
  • 移動優化結賬

根據您的業務規模，您可以在 Starter 和 Growth 兩個計劃之間進行選擇。
Aero Checkout 定價

準備好對您的默認 WooCommerce 結帳頁面進行現代化改造了嗎？

由於其靈活和可擴展的特性，WooCommerce 得到了數百萬用戶的認可。 但是，當涉及到結帳頁面時，它並沒有領先於遊戲。

本文詳細說明了 Shopify 與 WooCommerce 結帳頁面，以及為 WooCommerce 構建 Shopify 式結帳的簡單方法。

想要提高您的轉化率、提升銷售額並讓您的競爭對手望塵莫及嗎？ 立即開始現代化您的默認 WooCommerce 結帳頁面！

對 Shopify 與 WooCommerce 的比較感興趣？ 在此處查看我們對 Shopify vs WooCommerce SEO 的評論！