如何創建自定義 WooCommerce 註冊表單

已發表: 2022-02-15

想要改進您的 WordPress 網站的客戶註冊流程? 構建自定義 WooCommerce 註冊表單是朝著正確方向邁出的一步。

默認的 WooCommerce 插件有一個註冊表單,但只收集基本信息。 但是在名為 ProfilePress 的插件的幫助下,您可以從用戶那裡收集更多信息並重新排序表單以使其對用戶友好。 通過表格收集的信息可用於您的電子郵件營銷活動等。

在本文中,我們將向您展示如何創建自定義註冊表單並將其替換為您的默認 WooCommerce 表單。 讓我們潛入水中。

創建自定義 WooCommerce 註冊表單

要創建自定義 WooCommerce 註冊表單,您需要一個名為 ProfilePress 的插件。 下面,我們將向您展示如何設置插件。

第 1 步:安裝 ProfilePress

註冊 ProfilePress,您將收到一張收據,其中包含下載插件的鏈接以及許可證密鑰。 在您的 WordPress 網站上下載並安裝該插件。 輸入許可證密鑰以激活插件。

步驟 1.5:啟用 WooCommerce 註冊

轉到WooCommerce-> 儀表板的設置。 單擊“隱私和帳戶”部分,然後選中“允許客戶在“我的帳戶”頁面上創建帳戶選項。

第 2 步:使用 ProfilePress 創建自定義表單

有趣的來了。 在您的 WordPress 儀表板上,轉到ProfilePress > Forms & Profiles > Registration > Add New

您有兩個選項來創建自定義註冊表單。 您可以使用預製模板或從頭開始構建表單。 如果您不知道如何編碼和/或不想花時間從頭開始構建表單,那麼我們建議您選擇模板。

選擇拖放生成器。

為表單命名,然後從其中一個預建模板中進行選擇。 出於本教程的目的,我們選擇了Tulip 。 在下一頁上,您可以根據需要自定義表單。

添加自定義字段

您可以將以下自定義字段添加到表單中,包括 WooCommerce 計費和運輸字段到您的註冊表單。

  • 用戶名
  • 電子郵件地址
  • 確認電子郵件
  • 密碼
  • 確認密碼
  • 密碼強度
  • 網站暱稱
  • 顯示名稱
  • 上傳頭像
  • 上傳封面照片
  • 選擇角色
  • 自定義 HTML
  • 重新驗證碼

以下是我們為註冊表單選擇的自定義字段的快速瀏覽:

自定義 woocommerce 註冊表單生成器

修改表單設置

ProfilePress 允許您更改表單的外觀,包括。 這意味著您可以創建一個與您的品牌和風格相得益彰的表格。 我們建議您花幾分鐘時間修改表單的外觀。

在進行下一步之前,請確保您轉到註冊設置並選擇客戶作為新用戶角色。 使用此自定義表單註冊的任何人都將被視為客戶。

表單準備好後,保存更改。 現在,是時候在您的網站上顯示新的自定義註冊表單了。

第 3 步:更換 WooCommerce 註冊表單

在本節中,您將學習如何用新的自定義註冊表單替換默認的 WooCommerce 註冊表單。

轉到ProfilePress > 設置 > WooCommerce 。 您應該會看到一個名為My Account Registration Form的選項。 從下拉菜單中,選擇您剛剛構建的新註冊表並保存設置。

如果需要,您可以使用此表單作為您網站的默認註冊頁面。 您需要做的就是轉到ProfilePress > 設置 > 常規 > 全局。 然後從註冊頁面選項中,選擇新的自定義註冊頁面

值得注意的是,如果您選擇創建一個新的註冊頁面,複製表單的簡碼創建一個新頁面,添加簡碼並發布頁面。 是的,就是這麼簡單!

就是這樣,伙計們! 這就是您創建自定義 WooCommerce 註冊表單的方式! 當您預覽您的 WooCommerce 我的帳戶頁面時,您應該會看到顯示的註冊表單。

WooCommerce 自定義註冊表單

現在您有了自定義註冊表單,有些人想知道是否還可以創建自定義登錄表單。 創建自定義 WooCommerce 登錄表單的過程與創建自定義註冊表單的過程相同。 我們將在下一節中快速向您展示這些步驟。

如何創建自定義 WooCommerce 登錄表單

要創建自定義 WooCommerce 登錄表單,請轉到ProfilePress > Forms & Profiles > Login > Add New

選擇拖放生成器。 為表單命名,然後從其中一個預建模板中進行選擇。

接下來,添加自定義字段並根據需要修改表單的外觀

最後,要用新的自定義表單替換默認的 WooCommerce 登錄表單,請轉到ProfilePress > Settings > WooCommerce > My Account Login Form選擇新的登錄表單

如果您想讓新的登錄表單成為您整個網站的默認登錄表單,請轉到ProfilePress > Settings > General > Global 。 然後從登錄頁面選項中,選擇新的自定義登錄表單

以下是自定義登錄頁面在我們網站上的外觀:

WooCommerce 自定義登錄

有了它,您現在知道如何創建自定義 WooCommerce 登錄表單。

如果您將“我的帳戶”頁面中的默認註冊和登錄表單都替換為來自 ProfilePress 的自定義表單,則它在您的網站上可能會出現以下情況。

在任何 WooCommerce 商店中,除了註冊和登錄表單之外,還有一種訪問者經常使用的重要表單——結帳表單。 接下來,我們將了解您為什麼應該考慮自定義結帳表單以及您需要採取的具體步驟。

將自定義註冊字段添加到 WooCommerce Checkout

將自定義字段添加到結帳頁面是從客戶那裡收集其他信息的好方法。 例如,您可以讓客戶添加他們的社交媒體帳戶,以簡化註冊過程。 這有助於提供更好的客戶體驗並提高您的銷售額。

轉到WooCommerce > 設置 > 帳戶和隱私,然後選擇允許客戶在結帳時創建帳戶

接下來,轉到ProfilePress > 設置 > 自定義字段。 您應該會在此頁面上找到一兩個可用的自定義字段。 要添加更多自定義字段,請選擇Add New

ProfilePress 支持以下自定義字段類型:

  • 文本
  • 密碼
  • 電子郵件
  • 電話
  • 隱藏場
  • 數字
  • 日期
  • 國家
  • 文本區域
  • 單個複選框
  • 上傳文件
  • 選擇下拉菜單
  • 單選按鈕
  • 複選框

創建所需的所有字段後,保存設置,然後轉到ProfilePress > Settings > WooCommerce > Checkout Registration Fields添加您剛剛創建的註冊字段

如果您想將字段設為必填,則在必填註冊字段中,添加您認為應為必填的字段

不要忘記保存更改。

就是這樣。 您現在有一個自定義結帳註冊表單。

結論

通過自定義 WooCommerce 註冊或表單收集用戶信息有助於提高您的銷售額。 WooCommerce 不提供添加字段或對其表單進行任何類型自定義的選項,因此您需要像 ProfilePress 這樣的插件來修改 WooCommerce 表單。

也就是說,ProfilePress 不僅僅是一個表單構建器。 它可以幫助您管理用戶配置文件和成員目錄。 它可以幫助您限制對網站內容的訪問,等等。 給 ProfilePress 一個旋轉!

如果您喜歡我們的指南,那麼您可能會發現我們的其他一些 WooCommerce 指南很有幫助。 看看我們的博客。