如何使用 Divi 創建 WooCommerce Lucky Wheel Optin 表單

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 和 WP Optin Wheel 插件創建 WooCommerce 幸運輪選擇表單。 本教程有望幫助您提高 optin 表單的轉換率。 幸運輪選擇表單的遊戲化功能將允許您與訪問者互動，並用他們可以在網上購買時使用的折扣代碼獎勵他們。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸下的結果。

安裝 WooCommerce

搜索插件並安裝

如果您還沒有安裝 WooCommerce，您需要做的第一件事就是在您的 WordPress 網站上安裝 WooCommerce。 我們還假設您已經在您正在使用的 Divi 網站上設置了硬件商店佈局包。

轉到您的插件並蒐索 WooCommerce。 找到後，單擊“立即安裝”按鈕。

啟用

確保立即激活 WooCommerce 插件。

設置 WooCommerce

然後，WooCommerce 會自動將您重定向到其設置表單。 在這裡，您必須填寫所有詳細信息，以準備您的商店上線。 完成此過程後，所有需要的 WooCommerce 頁面都將自動添加到您的網站。

安裝 WP Optin Wheel 插件

搜索插件並安裝

為了創建幸運輪選擇表單，我們將使用一個名為 WP Optin Wheel 的免費遊戲化插件。 返回您的插件並蒐索 WP Optin Wheel 插件。 然後，單擊“立即安裝”按鈕。

啟用

繼續激活插件。

將產品添加到 WooCommerce

添加新產品

如果您已經在運營電子商務網站，則可以跳過此部分。 但是，如果您只是嘗試一下，我們建議您向 WooCommerce 插件添加一些產品。 這將幫助您在之後測試幸運輪選擇表單。 要添加新產品，請轉到產品 > 添加新產品。

添加產品詳細信息

填寫所有產品詳細信息。 這包括但不限於產品名稱、描述、特色圖片、價格和類別。 添加完這些詳細信息後，發布產品頁面。

對每個產品重複

對要添加到網站的每一種產品重複相同的步驟。

向 WooCommerce 添加優惠券

前往優惠券

現在是添加優惠券的時候了。 在這篇文章的後面，我們將使用我們在幸運輪選擇表單中創建的優惠券。 轉到您的WordPress 儀表板 > WooCommerce > 優惠券。 到達那里後，繼續並開始創建您的第一張優惠券。

添加優惠券 #1：5% 的折扣

一般的

在 12 個切片的幸運輪中，您可以決定多少個切片包含獎品。 例如，您可以提供 4 個獎品，並為每個獎品創建不同的優惠券。 您還可以將優惠券用於車輪上的多個位置。 創建第一張優惠券後，請繼續並在頁面頂部輸入優惠券代碼。 然後，修改常規設置：

• 折扣類型：百分比折扣
• 優惠券金額：5
• 優惠券到期日：輸入選擇的日期

使用限制

繼續切換到使用限制選項卡。 在這裡，您可以決定是否有與優惠券相關的最低和最高支出。 您還可以勾選以下框：

• 如果優惠券不能與其他優惠券一起使用，請選中此框。
• 如果優惠券不適用於特價商品，請選中此框。 每件商品的優惠券僅在商品未打折時有效。 每個購物車的優惠券只有在購物車中有未銷售的商品時才有效。

對其他 3 張優惠券重複步驟

按照上述相同步驟創建任意數量的優惠券。 您不僅限於提供百分比折扣。 您還可以創建提供固定購物車或產品折扣的優惠券，並將其包含在幸運輪中。

創建幸運輪選擇表單

轉到插件設置

現在我們已經完成了使幸運輪選擇表單工作的所有必要步驟，我們可以開始創建一個！ 轉到您的 WordPress儀表板 > WP Optin Wheel 。

添加 MailChimp API 密鑰

在開始創建幸運輪之前，您必須添加 MailChimp API 密鑰。 WP Wheel Optin 插件的免費版本僅提供與 MailChimp 的集成。 如果您想將幸運轉盤鏈接到其他提供商，則必須切換到高級版本。

創建新輪子

選擇主題

讓我們開始創建輪子吧！ 選擇您選擇的調色板。 在本教程中，我們選擇橙色，因為它與 Hardware Store Layout Pack 的調色板很相配。

設置機會

創建幸運輪選擇表單的下一步是選擇獲勝變化百分比。 這個百分比表明人們在旋轉輪子時贏得一些東西的頻率。 在這種情況下，每個旋轉輪子的訪問者都有 70% 的機會贏得優惠券代碼。

設置切片

繼續設置 12 個不同的切片。 您可以將每個切片專用於以下三個選項之一：

• 沒有獎品：訪客沒有贏得任何東西
• 優惠券代碼：訪客贏取優惠券代碼
• 鏈接：例如，訪問者贏得電子書

在此示例中，我們使用 12 個切片中的 4 個來添加優惠券代碼。 我們還為這些切片中的每一個單獨設置了機會。

設置表單生成器

下一步可幫助您​​構建 optin 表單本身。 您會注意到那裡已經有一個電子郵件字段。 您可以添加到選擇表單的唯一其他類型的字段是複選框。 他們專門添加了此類字段以使表單符合 GDPR。

內容設置

繼續，您將能夠設置幸運輪選擇表單的書面內容。 繼續更改所有內容以使其與您的網站相匹配。

設計設置

接下來打開設計設置並為背景圖案選項選擇“無圖案”。

行為設置

您還可以選擇幸運輪選擇表單何時出現在行為設置中。

GDPR

最後但並非最不重要的一點是，您可以確保訪問者共享的數據不會被保存，除非他們在您的 optin 表單中勾選了不同的框，然後您就完成了！ 保存幸運輪選擇表單並轉到您的網站進行測試。

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

最後的想法

本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的工具箱中添加一些額外的東西。 我們希望本教程能夠幫助您以交互方式更快地構建電子郵件列表。 如果您有任何問題或建議，請務必在下方評論區留言！