如何像 Shopify 一樣進行 WooCommerce 結帳
已發表: 2021-10-07你想改變你的結帳並讓它看起來像 Shopify 嗎？ 我們為您準備了完美的教程。 在本指南中，我們將向您展示如何讓您的 WooCommerce 結帳像 Shopify。
WooCommerce 是具有眾多自定義選項的最靈活的電子商務平台之一。 但有時，所有這些特權對於網站管理員和客戶來說可能是壓倒性的。 例如，我們已經看到包含大量字段的複雜結帳頁面會影響您的轉化率。 這就是為什麼您應該刪除不必要的字段並保持結帳簡潔明了的原因。
對於像 Shopify 這樣具有非常簡單的結帳頁面的其他平台來說，這可能是一個優勢。 例如，即使您可以自定義結賬並創建單頁結賬，一些用戶仍然更喜歡擁有類似 Shopify 的結賬頁面。 好消息是 WooCommerce 的巨大靈活性使您可以像 Shopify 提供的那樣進行結帳。
在我們了解如何做到這一點之前，讓我們看一下 WooCommerce 和 Shopify 結帳頁面之間的區別。
WooCommerce 結帳與 Shopify 結帳
您已經知道可以在 WooCommerce 中添加許多結帳字段。 但是如果你添加太多，你最終可能會得到一個又長又復雜的結帳頁面。 這可能會增加購物車放棄率並影響您的轉化率，因為用戶可能會發現填寫這麼多字段很乏味。
另一方面，如果您查看默認的 Shopify 結帳頁面，它的設計簡單而美觀，只有必要的結帳字段。 相比之下，WooCommerce 結帳頁面肯定可以改進以提高效率。
好消息是，由於 WooCommerce 有很多自定義選項，您可以輕鬆地使您的 WooCommerce 結帳看起來像 Shopify。
如何像 Shopify 一樣製作 WooCommerce Checkout
在 WooCommerce 中創建 Shopify 結帳的最簡單方法是使用插件。 WordPress 提供了許多可用於自定義結帳的插件。 在本節中，我們將分析一些使您的 WooCommerce 結帳看起來像 Shopify 的最佳工具。
WooCommerce 塊
WooCommerce Blocks是由 Automattic 開發的免費插件。 它有許多專門為 WooCommerce 設計的 Gutenberg 塊和一個專用於結帳的塊。
在結帳塊的幫助下，您可以輕鬆地使您的 WooCommerce 結帳看起來像 Shopify 結帳。 默認情況下，它甚至具有相似的佈局和內容部分，使轉換非常容易。 該工具還為結帳塊提供了多種選項，以便您可以對其進行自定義以滿足您的需求。
主要特點
- 簡化結帳塊
- 多個產品塊選項
- 按類別和產品塊的評論
- 很棒的支持
價格
這是一個免費插件，您可以從 WordPress 存儲庫下載。
結帳WC
CheckoutWC是最受歡迎的插件之一，用於自定義您的 WooCommerce 結帳。 它帶有幾個受 Shopify 啟發的模板，因此您可以使用它們使您的 WooCommerce 結帳看起來像 Shopify。
該插件還具有響應式設計以及與大多數主要 WordPress 插件和主題的出色兼容性選項。 此外，它還為您的客戶提供了方便的選項，例如密碼生成器、地址自動完成功能等等。
主要特點
- 多個結帳頁面模板
- 完全響應式設計
- 地址自動完成
- 購物車編輯
價格
CheckoutWC是一個高級插件，起價為每月 15 美元或每年 149 美元。 它還包括 30 天退款保證、免費更新和對一個站點的支持。
使用插件在 WooCommerce 中創建 Shopify 結帳
在本教程中，我們將使用WooCommerce Blocks讓您的 WooCommerce 結賬，如 Shopify。 它是一個出色的免費插件，具有許多功能來編輯您的 WooCommerce 商店和專用的結帳塊。
在我們開始之前，請確保您已正確設置您的網站 WooCommerce。 另請記住，我們將使用 Divi 主題，因此如果您使用其他主題，您網站上的某些頁面和選項可能會有所不同。 但是，您應該能夠毫無問題地遵循這些步驟。
1. 安裝和激活 WooCommerce 塊
首先，安裝並激活插件。 為此，在您的 WordPress 儀表板中轉到插件 > 添加新內容，然後搜索 WooCommerce Blocks 插件。 找到它後，單擊Install Now進行安裝。
安裝完成後，激活插件。 如果您需要有關此過程的更多信息，請查看我們的指南，了解如何手動安裝 WordPress 插件。
2.配置和自定義結帳頁面
現在您所要做的就是轉到儀表板中的Pages ，找到Checkout 頁面，然後按Edit 。
然後，您將在此處看到默認的 WooCommerce 結帳頁面短代碼。 由於我們想讓 WooCommerce 結賬看起來像 Shopify，您需要刪除短代碼。 要刪除它，只需單擊簡碼並按三個垂直點打開選項。
然後，單擊刪除塊以刪除短代碼。 或者，您可以單擊該塊，然後按Ctrl+Alt+Z ，如選項快捷方式所示。
之後，單擊“ + ”圖標或輸入“ / ”以添加新塊並蒐索“ Checkout ”。 選擇結帳塊並更新頁面。 您將能夠在 WooCommerce 中看到受 Shopify 啟發的新結帳頁面。
現在您有兩個選擇：保持原樣或自定義。 讓我們看看如何編輯它。
首先，打開屏幕右上角的設置圖標。 頁面和塊設置將出現在右側邊欄中。 然後，單擊其中一個塊，您可以從塊設置側邊欄中開始編輯特定塊。
例如，如果您想編輯送貨地址的字段，只需按送貨地址塊，您就會在右側邊欄中看到所有可用的設置。 從那裡，您可以顯示或隱藏結帳頁面的字段編輯器。
完成所有必要的更改後，更新頁面。 從前端檢查您的結帳，您將看到受 Spotify 啟發的新結帳頁面。
專業提示：將購物車頁面與結帳頁面匹配
如果您有購物車頁面，您可以對購物車頁面重複上述過程，並匹配結帳頁面和購物車頁面的樣式。
在您的 WordPress 儀表板中，只需轉到Pages ，找到購物車頁面並刪除默認的 WooCommerce 購物車頁面短代碼。 然後，使用購物車頁面添加一個新的購物車塊並更新它。
這取決於您擁有的產品或服務的類型，但作為一般規則，我們建議您跳過購物車頁面以縮短結帳過程。 如果您想了解更多相關信息，請查看我們的指南，了解如何在 WooCommerce 中跳過購物車頁面。
使您的 WooCommerce Checkout 像 Shopify 的另一種方法
如果您認為通過編輯來自定義結帳頁面的工作量太大，那麼您還有另一種選擇。 您可以使用高級插件CheckoutWC使您的 WooCommerce 結帳看起來像 Shopify。
為此，您需要訂閱他們的其中一個計劃，因為它是付費產品。 您還可以使用他們的 7 天免費試用來測試該工具是否能滿足您的需求。
現在讓我們看一下使用 CheckoutWC 在 WooCommerce 中創建 Shopify 結賬的過程。
1.安裝並激活CheckoutWC
首先，您需要激活並安裝插件才能開始使用它。 在您的儀表板中，轉到Plugins > Add New並單擊Upload Plugin 。 上傳您在購買期間下載的 zip 文件，上傳完成後，按立即安裝。
安裝完成後，激活插件。 如果您對此過程有疑問，可以再次查看我們的手動安裝 WordPress 插件指南。
2.選擇結帳模板
此插件的主要優點是它具有專門設計的結帳模板 Shopify 結帳頁面。 有 4 個模板，因此請為您的商店選擇您更喜歡的一個。
只需轉到 WordPress 儀表板中的Settings > Checkout for WooCommerce > Templates ，您將看到四個模板選項：
- 默認
- 未來主義者
- 複製
- 玻璃
Copify模板與 Shopify 結帳頁面最相似，但其他三個也有一些 Shopify 元素。
選擇模板後，就可以使用您的徽標對其進行自定義了。 打開設計選項卡，然後單擊上傳徽標。 上傳圖片後，請務必保存更改。
而已！ 現在從前端檢查您的結帳，您將在 WooCommerce 商店上看到 Shopify 結帳頁面。
獎勵：刪除 WooCommerce 結帳字段
最後，讓我們看看如何從結帳中刪除一些字段。
假設您不想讓您的 WooCommerce 結帳與 Shopify 完全一樣，但您仍想簡化結帳頁面並隱藏一些不必要的字段。 由於這使結帳過程更快，這將幫助您提高轉化率並減少購物車放棄。
刪除結帳的最簡單方法是使用WooCommerce Checkout Manager插件。
此工具可讓您根據需要添加、隱藏和編輯結帳字段，輕鬆自定義結帳頁面。
安裝並激活插件
首先，轉到插件 > 添加新插件並蒐索插件。 然後，安裝並激活它。 這是免費增值工具，因此您可以下載免費版本或獲得具有更高級功能的高級計劃之一，起價僅為 19 美元（一次性付款）。
編輯結帳頁面
安裝插件後，轉到WooCommerce > 設置並打開結帳選項卡。 您將看到編輯 WooCommerce 結帳頁面的所有選項。
此外，請轉到“結算”選項卡，因為大多數結帳字段都在那裡。 只需轉到“計費”選項卡並使用“禁用”切換來刪除您想要的結帳字段。 您還可以使用“必需”切換將它們設為強製或不強制。
一旦您對您的選擇感到滿意，請不要忘記保存您的更改。 然後，從前端查看結帳，您將看到新的結帳頁面。
如果您在此過程中需要更多幫助，請查看我們的指南以刪除 WooCommerce 結帳字段。 如果您只想刪除字段而不添加或編輯現有字段，則可以使用另一個名為 Direct Checkout 的插件。
結論
總而言之，默認的 Shopify 結賬比 WooCommerce 更乾淨、更簡單。 在本指南中，我們了解瞭如何使 WooCommerce 結帳看起來像您商店中的 Shopify 。 最方便的方法是使用插件，我們向您展示了使用兩種不同工具的過程。
WooCommerce Blocks 是免費的，並使用塊來編輯結帳頁面，而CheckoutWC是一個高級插件，帶有多個結帳模板，可幫助您自定義結帳頁面。 這兩個插件都可以完成工作並且非常易於使用，因此請選擇最適合您需求的插件。
此外，我們還向您展示瞭如何刪除 WooCommerce 結帳字段以進一步自定義結帳頁面並提高轉化率。 這將使您的結帳頁面更簡單並加快結帳過程。
要了解有關如何充分利用結帳的更多信息，請查看如何編輯 WooCommerce 結帳頁面。 如果您喜歡這篇文章，請查看以下教程：
- 如何創建 WooCommerce 單頁結帳
- 在結賬時添加費用的不同方法
- 如何將條件字段添加到 WooCommerce 結帳