如何使用 Elementor 輕鬆自定義 WooCommerce 結帳頁面

已發表: 2020-05-11

在本教程中，我將向您展示如何使用您的 WordPress 頁面構建器輕鬆自定義您的 WooCommerce 結帳頁面。通過創建銷售漏斗類型的結帳頁面，輕鬆減少結帳放棄並獲得更多銷售額。

最近亞馬遜發布了優化他們的結賬增加了他們的收入和訂單成功率。因此，其他幾家電子商務公司也開始這樣做，因為他們有內部開發人員，他們可以隨時優化和使用他們的結帳設計。

自定義 WooCommerce 結帳頁面的步驟

安裝 Cartflows 插件
為結帳頁面導入設計。
編輯結帳頁面的內容
編輯結帳頁面的表單字段
獲取 Cartflows 插件的高級功能
創建加售和減售
創建訂單凸點

訪問 CartFlows 網站

訂閱我們的頻道

使用 Elementor 自定義 WooCommerce 結帳頁面

我們更新了這篇文章，現在您可以使用免費插件自定義結帳頁面。這允許您使用 Elementor（免費）頁面構建器自定義結帳頁面。在下面下載此插件並繼續閱讀本文。

某些高級功能在免費版本中不起作用。

CartFlows 的漏斗生成器 – 為 WordPress 創建高轉化銷售漏斗

但是中小型電子商務賣家一直在尋找如何自定義結帳頁面並使其愉快的選項，以便用戶體驗良好並擁有出色的用戶界面，使客戶可以快速結帳而不會感到困惑。

因此，好消息等待著 WordPress 和 WooCommerce 的所有用戶。現在，您可以輕鬆設計和自定義結帳頁面，並根據自己的喜好對其進行優化，而無需購買多個主題和插件。您只需要 1 個插件即可完成這項工作。

如果您嘗試編輯和自定義結帳頁面，那麼您會發現幾乎不可能按照您想要的方式進行設計，並且以編碼方式進行設計要困難得多，這就是我們推薦CartFlows的原因

WooCommerce 插件使用鉤子和操作來工作，使插件能夠在不更改任何內容的情況下開始處理支持 WooCommerce 的任何主題。

[勇敢的對齊=“中心”]

因此，如果您想更改設計佈局或向結帳頁面添加任何功能，您需要執行編碼方式或聘請開發人員並支付數千美元。或者，您可以查看由 GloriousThemes 的 WordPress 專家編寫的 WooCommerce 指南和教程。

自定義 WooCommerce 結帳頁面的頁面構建器

如果您使用任何頁面構建器，例如 Elementor、Beaver Builder、Divi。然後，您可以使用頁面構建器來設計和自定義 WooCommerce 結帳頁面。

但要做到這一點，您將需要另一個名為 CartFlows Pro 的插件。 CartFlows Pro 允許您使用頁面構建器插件創建自定義結帳頁面、銷售頁面和渠道構建器。

Cartflows Pro 與您的頁面構建器集成，並為您提供拖放結帳頁面功能和設計的選項，並添加其他幾個自定義功能，例如：-

購物車遺棄
分析和跟踪
一切的模板
動態鏈接
轉換測試結帳
一鍵下單
無限加售/減售
結帳自定義字段
全球結帳

模板是為

元素
海狸生成器
迪維生成器
興旺建築師
古騰堡（計劃中）

自定義 WooCommerce 結帳頁面的方法

到目前為止，您已經知道 CartFlows 的功能和功能，但是如果您認為您可以在沒有 CartFlows Pro 的情況下編輯 woocommerce 頁面並對其進行自定義，那麼這裡有一個比較簡單且 100% 無錯誤的比較。

2種方式是

使用CartFlows Pro 插件的簡單方法
使用編碼的艱難方式

CartFlows 方式

使用CartFlows Pro ，您需要做的就是安裝插件並激活它。激活後創建一個流程（漏斗）並為您的頁面構建器導入預製模板或從頭開始創建一個。

您還可以創建Upsells、Downsells 和Thank You 頁面並對其進行自定義。完成設計和創建結帳頁面後。

下載 CartFlows Pro

單擊“發布”，您的 woocommerce 新定制結帳頁面就可以使用了。

[勇敢的對齊=“中心”]

此外，CartFlows pro 還具有購物車放棄功能，這意味著如果買家未完成結帳，他們的信息將被傳遞到您的 CRM 以觸發電子郵件。

使用 CartFlows 自定義 WooCommerce 結帳頁面

下載和安裝 CartFlows Pro。

我們需要做的第一件事是下載 CartFlows Pro。單擊下面的按鈕下載 CartFlows Pro。

下載 Cartflows 專業版

下載插件後。轉到wp-admin > Plugins > Add New 並上傳CartFlows Pro 插件。

激活 CartFlows Pro 時會要求安裝其基本插件 Cartflows 免費版。安裝免費版。

然後，您需要在分步過程中設置我們在下面顯示的插件。

自定義結帳頁面。

CartFlows 提供了一種在第一次激活時設置插件的交互方式。該插件將指導您完成 5 個步驟的過程，使非技術人員的設置變得非常容易

安裝 cartflows 後，你會得到一個像這樣的彈出窗口

單擊藍色按鈕“啟動嚮導”並開始設置過程。這是一個5 個步驟的過程。所以讓我們開始吧。

步驟：1 - 歡迎

第一頁是歡迎您使用插件的歡迎頁面，並簡要介紹了該插件如何幫助您從電子商務中獲得更多銷售額並幫助您輕鬆自定義結帳頁面。

只需單擊“ Let's go ”按鈕並繼續下一步。

步驟：2 – 選擇您的頁面構建器。

在第 2 步中，系統會要求您選擇要使用的頁面構建器插件，如果您正在使用任何頁面構建器插件，請從下拉列表中選擇一個。

如果您沒有使用任何頁面構建器，那麼我會要求您使用 Elementor 作為您的頁面構建器。 Elementor Pro 具有強大的功能，使您能夠設計、自定義和向現有頁面添加功能，甚至可以自己創建新主題。

選擇頁面構建器插件後，單擊“下一步”按鈕。

步驟：3 - 結帳

在第 3 步中，cartflows 建議您使用和安裝推薦的插件，例如 WooCommerce、WooCommerce Cart Abandonment Recovery。

您需要安裝並激活那些推薦的插件才能使購物車正常工作。當您單擊Yes時，插件將自動安裝並激活。

單擊“是”按鈕並繼續下一步。

步驟：4 – 培訓

在第 4 步中，他們提供免費培訓，我認為您不需要，因為我們已經詳細介紹瞭如何自定義 WooCommerce 結帳頁面 Elementor。

單擊“不，謝謝”並繼續進行最後一步。

步驟：5 – 最終準備就緒

現在一切都完成了，可以使用了。

現在我們將創建我們的第一個流程。 Flow 是您的銷售頁面的漏斗。簡而言之，我們將創建和設計您的結帳頁面、追加銷售頁面、向下銷售頁面和感謝頁面。

單擊“創建流”按鈕。

現在我們將為結帳頁面創建一個流程。

在 CartFlows 中創建流程 – 自定義結帳頁面

Flow 基本上是一個銷售漏斗或結帳頁面，後面是加售、減售和感謝頁面。您可以保持簡單或使用這些功能進行升級。

要為您的 WooCommerce 網站創建自定義結帳頁面，您需要在購物車流中創建一個流程。

要創建流程，請轉到wp-admin > cartflows > Flows > add new 。將出現一個新的彈出窗口，為您提供選擇現成的高級模板的選項。

由於我們有CartFlows Pro ，我們將導入第一個選項，它是一個專業模板。

導入過程結束後，您將被重定向到新創建的流程，看起來像這樣。

現在通過添加標題來命名流，然後單擊右側邊欄中的更新按鈕。

保存標題後，現在您需要處理自定義 woocommerce 結帳頁面的流程。

流程有 4 個步驟：

選擇頁面/登陸頁面
結帳頁面
加售和減售頁面
謝謝頁面

如果您只想要結帳頁面並且想要獲得 optin 頁面的裝備，請追加銷售和感謝頁面。然後單擊步驟右側邊欄上的刪除按鈕。

因此，如果您只想要結帳頁面，請刪除其餘的購物車步驟並單擊更新按鈕。

您的結帳頁面將如下所示。

真棒對。是的，我知道。晚點再謝我。

但是等待它現在不起作用。為什麼？因為現在您既沒有為該結帳頁面分配任何產品，也沒有讓 woocommerce 使用此自定義結帳頁面而不是無聊的頁面。

哪個 WooCommerce 將繼續使用原始但無聊的結帳頁面。

分配產品

因此，默認情況下，CartFlows 會要求您分配產品，以便您可以為每種產品提供不同類型的自定義結帳頁面，並提供不同的追加銷售、感謝頁面和其他選項。

但是，如果您想為所有 WooCommerce 產品使用默認的自定義結帳頁面，則不要在此步驟中分配任何產品。

使 WooCommerce 使用自定義結帳頁面。

要為您的所有產品使用單個自定義結帳頁面，您需要保存和更新當前流程並轉到 CartFlows 設置。

在 CartFlows 設置 > 常規設置中，您將找到一個帶有全局結帳選項的下拉菜單，如上圖所示。

選擇您現在創建的流。如果您是第一次創建，您將只有 1 個流程。

選擇該流程作為您的全局結帳頁面，然後單擊“保存更改”。您的新自定義 woocommerce 結帳頁面現在可以使用了。

現在測試您的新結帳頁面是否正常工作。轉到您網站上的任何產品，然後單擊“添加到購物車”並繼續結帳。如果您看到新創建的頁面，則表示它有效。您的 WooCommerce 支付網關將在您的自定義結帳頁面上自動激活。

做一個測試購買，你準備好搖滾了。

但是，如果我想使用 Upsells 和Thankyou 頁面怎麼辦

創建追加銷售

創建追加銷售非常簡單，分為兩部分。

設計加售頁面
為追加銷售分配產品

設計加售頁面

要設計加售頁面，請打開流程並單擊該加售列上的編輯鏈接，如下圖所示：-

單擊編輯鏈接後，將出現一個新頁面，其中包含“使用 Elementor 編輯”按鈕和“優惠頁面設置”下的一些自定義字段。

要編輯頁面設計，請單擊使用 Elementor 編輯並使用 elemetor 輕鬆設計追加銷售頁面。

將打開一個新選項卡，您可以在其中使用 elementor 拖放功能編輯整個加售頁面的設計。

設計完追加銷售頁面後，就該為追加銷售分配產品了。所以讓我們現在就這樣做

為追加銷售分配產品

在購物車流中將產品分配為加售非常容易和簡單。您需要做的只是轉到“報價頁面設置”並單擊“選擇產品”並輸入要分配給加售頁面的產品名稱。

輸入產品名稱後，該插件將進行快速搜索，並在您拼寫正確的情況下向您顯示產品。

在選擇產品字段中選擇產品後，單擊“保存更改”。如果客戶購買了加售或拒絕了它，您還可以編輯其他選項，例如重定向選項。

還有其他幾個功能，但我認為默認選項設置得很好。

現在您的追加銷售頁面可以使用了，我們將轉到“ Thankyou Page ”。

創建感謝頁面

編輯感謝頁麵類似於追加銷售頁面。要創建和設計感謝頁面，您必須經過 2 個步驟：-

步驟：1 - 設計感謝頁面

單擊流程中“謝謝”步驟上的“編輯”鏈接，這會將您重定向到新頁面。

單擊“使用 Elementor 編輯”並編輯感謝頁面的設計。

注意：編輯成功後無法查看訂單詳情。訂單詳情僅在訂單成功時才會出現。
但我有一個黑客！
打開一個新選項卡並在測試模式下訂購產品，此時您將被重定向到您現在設計的感謝頁面。當您在“感謝頁面”上時，然後單擊頂部 WordPress 欄上的“使用基本編輯”鏈接。現在您可以編輯您的感謝頁面，並顯示所有詳細信息。

所以現在，我們的感謝頁面設計好了，我們需要做的就是設置。那你還在等什麼。讓我們完成設置。

步驟：2 - 編輯設置

因此，現在您可以選擇要在感謝頁面中顯示的選項。選項是： -

訂單概覽
訂單詳細信息
結算明細
送貨細節

因此，根據您的商店類型，您可能會顯示此選項。因為我有一個在 WooCommerce 上運行的數字商店，所以我不需要顯示賬單詳細信息、運輸詳細信息。

因此，這就是您無需編碼即可輕鬆自定義 WooCommerce 結帳頁面的方式。

使用代碼自定義 WooCommerce 結帳頁面

說實話，我討厭使用代碼設計結帳頁面的過程，為什麼？

因為您需要創建 HTML、CSS、JS，然後將 WooCommerce 操作和過濾器連接在一起，以便設計頁面。

畢竟，你不能完全擁有加售和感謝頁面的功能，你需要單獨編碼所有這些。

那麼，您為什麼要通過手動完成所有這些事情來浪費時間，或者通過聘請開發人員來創建這些功能來浪費金錢呢？

您可以將所有這些東西與購物車的拖放界面捆綁在一起。所以今天就獲得 CartFlows Pro 。

編碼方式

如果您想節省幾塊錢並以傳統方式完成所有工作，那麼您應該知道 woocommerce 代碼是如何工作的。

只是為了設計 woocommerce 結帳頁面

<?php
/**
 * 將字段添加到結帳頁面
 */add_action('woocommerce_after_order_notes', 'customise_checkout_field');
函數 customise_checkout_field($checkout)
{
  迴聲'<div><h2>'。 __('標題') 。 '</h2>';
  woocommerce_form_field('customised_field_name', array(
    '類型' => '文本',
    '類' => 數組（
      'my-field-class form-row-wide'
    ) ,
    'label' => __('自定義附加字段') ,
    '佔位符' => __('指導') ,
    '必需' => 真的，
  ) , $checkout->get_value('customised_field_name'));
  迴聲'</div>';

結論

我們個人發現，經過優化的自定義結帳頁面增加了結帳和用戶體驗。許多大公司一直在測試他們的結賬流程，讓他們更加友好並優化用戶體驗。

所以這是一個很好的方法來做這些大公司正在做的事情，只需使用一個簡單的插件，從長遠來看會讓你受益。

如果您已經自定義了結帳頁面，那麼接下來您應該自定義的是您的 woocommerce 的帳戶頁面。

如果您有任何疑問，您可以在下方發表評論或在 Facebook、Twitter 和 Instagram 上的社交媒體上與我聯繫。您也可以在 Facebook、Twitter、Instagram 上關注作者。

要在不編碼的情況下輕鬆修改 woocommerce 結帳頁面，請下載我們提到的插件並使用它拖放並添加元素來設計和修改您的 woocommerce 結帳頁面。