如何使用 Divi 將優惠券代碼欄動態添加到特定產品頁面

當您經營使用 Divi 和 WooCommerce 製作的在線商店時，您偶爾會希望在您的網站上顯示優惠券代碼以增加緊迫感。 在整個網絡上，您會注意到許多在線商店在粘貼在頁面頂部的欄中共享優惠券代碼。 現在，使用 Divi 的 Theme Builder，您可以自動將此類優惠券代碼欄添加到符合優惠券代碼條件的產品中。

在本教程中，我們將向您展示如何做到這一點。 本教程有幾個部分，從設置優惠券代碼到為折扣類別中的產品創建單獨的產品模板。 您還可以免費下載模板的 JSON 文件！ 我們使用的整體風格基於我們過去分享的粗體產品頁面佈局。

讓我們開始吧！

預覽

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

桌面

移動的

免費下載產品頁面模板

要使用產品頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

教程概述

• 確保您的網站上安裝了 Divi 和 WooCommerce 插件
• 在教程的第一部分，我們將創建一個新的折扣產品類別
• 我們會將符合條件的產品分配給這個新產品類別
• 然後，我們將創建一個新的優惠券代碼並確保優惠券代碼僅適用於我們創建的產品類別
• 在主題構建器中，我們將為該特定產品類別創建一個新模板
• 我們將為此模板重用普通的產品頁面正文，並使用 Divi 的內置選項添加頂部優惠券代碼欄

1.創建新的折扣產品類別

轉到產品類別並添加新的折扣產品類別

首先在您的 WordPress 網站上安裝 WooCommerce 插件，然後添加一個新產品類別，專用於所有有資格享受新折扣的產品。 如果您打算在現有產品類別上使用優惠券代碼，則可以改用這些代碼。

2. 將產品分配到新的折扣類別

編輯產品

然後，打開要包含在銷售中的產品。

將產品分配到新的折扣類別

並將它們包含在新的折扣產品類別中。

3. 創建 WooCommerce 優惠券代碼

轉到優惠券並添加新優惠券

本教程的下一部分將處理創建新的優惠券代碼。 轉到您的WordPress 儀表板 > 優惠券 > 然後點擊“創建您的第一張優惠券” 。

添加優惠券代碼和優惠券數據

在頂部添加優惠券代碼，然後選擇要應用於優惠券代碼的常規設置。

• 優惠碼：添加優惠碼
• 折扣類型：百分比折扣
• 優惠券金額：增加百分比
• 優惠券有效期：選擇日期

添加使用限制

然後，轉到使用限制並確保優惠券代碼僅適用於您的折扣產品類別內的產品。

• 產品類別：折扣

4. 新增折扣類別模板

添加新模板

創建優惠券代碼後，就可以將其包含在相關產品頁面上！ 為此，請轉到 Divi Theme Builder 並添加一個新模板。

使用時間

在折扣產品類別上使用此新模板。

• 用於：特定產品類別中的產品：折扣

5. 為新模板重用全局產品頁面主體

將產品模板正文拖到新模板的正文

您只需將常規產品頁面模板主體拖到新模板上即可重複使用。 在本教程中，我們使用在另一個教程中創建的粗體產品頁面佈局。 您可以在博客文章中下載佈局的 JSON 文件。

6. 新模板正文中添加Top Coupon Code Bar

進入正文模板編輯器

將產品頁面正文添加到新模板後，您就可以開始編輯它了。 您對此模板所做的更改只會出現在屬於折扣產品類別的產品頁面上。

將新部分添加到頂部

在模板編輯器中，我們要做的第一件事是在頂部添加一個新部分。

背景顏色

打開部分設置並更改背景顏色。

• 背景顏色：#e02b20

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

動畫片

通過添加動畫完成部分設置。

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫持續時間：1500ms
• 動畫延遲：1000ms
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

打開行設置並允許行佔據部分容器的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

第 1 欄

間距

然後，打開第 1 列設置並添加一些頂部和底部填充。

• 頂部填充：25px
• 底部填充：25px

第 2 欄

背景顏色

也打開第 2 列設置並添加白色背景色。

• 背景顏色：#ffffff

間距

也向此列添加一些自定義的頂部和底部填充。

• 頂部填充：20px
• 底部填充：20px

邊界

並包括一些左上角和右上角的半徑。

• 左上角 + 右上角：30px

將文本模塊添加到第 1 列

添加內容

第 1 列中我們需要的第一個也是唯一的模塊是文本模塊。 輸入您選擇的一些副本。

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：蒙特塞拉特
• 文字顏色：#ffffff
• 文字大小：16px
• 文本對齊：居中

將文本模塊添加到第 2 列

將優惠券代碼添加到內容框

在第二列中，使用您在教程第一部分中添加的折扣代碼添加另一個文本模塊。

文字設置

更改模塊的文本設置如下：

• 文字字體：蒙特塞拉特
• 文字字體粗細：重
• 文字顏色：#000000
• 文字大小：19px
• 文本對齊：居中

漿紗

然後，修改大小設置。

• 寬度：50%
• 模塊對齊：居中

間距

也添加一些底部填充。

• 底部填充：10px

邊界

並通過添加底部邊框來完成模塊的設置。

• 底部邊框寬度：1px
• 底部邊框顏色：#333333

7. 保存主題生成器更改並查看結果

完成修改後的產品頁面後，您可以保存模板更改，退出主題構建器並在折扣產品頁面上查看結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創建優惠券代碼欄並讓它自動顯示在有資格使用相關優惠券代碼的產品頁面上。 這是一個很好的方式來鼓勵訪問者購買您的產品。 您還可以免費下載模板 JSON 文件！ 如果您有任何疑問，請確保在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。