如何使用 Divi 創建 WooCommerce 購物車頁面模板

WooCommerce 購物車頁面對於任何使用 WooCommerce(WC) 在線商店的 Divi 網站都是必不可少的。 但是很多時候，購物車頁面在設計時往往會受到影響，因為設計頁面通常涉及從外部自定義購物車頁面模板，然後純粹使用外部 CSS 設置頁面模板的樣式。 但是有了 Divi 的新 Woo 模塊，這個過程變得簡單而愉快！

在本教程中，我們將向您展示如何使用 Divi Theme Builder 從頭開始為您的網站創建一個 WC 購物車頁面模板。 我們將向您展示如何為購物車頁面快速設置新模板，並使用 Divi Builder 中可用的適當動態 woo 模塊設計模板。

讓我們開始吧！

搶先看

之前和之後

這是 Divi 的默認購物車頁面與我們將在本教程中設計的新購物車頁面的快速對比。

下面是購物車頁面模板的詳細介紹。

免費下載購物車頁面模板

此購物車頁面模板可作為我們的免費購物車和購物車頁面模板集之一下載。 因此，請隨時從包含購物車和結帳模板集的帖子中下載它。

要掌握本教程中的購物車頁面模板設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂閱者，您將在每週一收到更多 Divi 福利和免費的 Divi Layout 包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

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

下載

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

要將模板佈局導入您的網站，您需要轉到 Divi 主題生成器並使用可移植性選項將 .json 文件導入主題生成器。

完成後，購物車模板將在主題生成器中可用。 要編輯模板，請單擊模板正文區域上的編輯圖標。

讓我們進入教程，好嗎？

關於 WooCommerce 購物車頁面和 Divi

每當您在 Divi 網站上安裝 WooCommerce 時，WooCommerce (WC) 都會生成關鍵的 WC 頁面，包括商店頁面、購物車頁面、結帳頁面和帳戶頁面。 頁面內容是通過在後端 WordPress 塊編輯器上使用簡碼來部署的。

如果您在此購物車頁面上激活 Divi Builder，WooCommerce 購物車頁面的每個內容元素都將作為可用於設置頁面樣式的 Divi Woo 模塊加載。

用於在 Divi 中設計購物車頁面的 Woo 模塊

Divi 帶有各種模塊，這些模塊對於向頁面模板添加動態內容至關重要。 其中一些包括特定於購物車頁面的 Woo 模塊。

構建購物車頁面或模板的關鍵模塊包括：

• 帖子標題 - 這將在構建購物車頁面模板時動態顯示購物車頁面的標題。
• Woo Notice – 此模塊可以設置為不同的頁麵類型（購物車頁面、產品頁面、結帳頁面）。 它將根據需要動態地向用戶顯示重要通知。
• Woo Cart Products – 此模塊顯示用戶當前在其購物車中的產品列表。
• Woo Cart Totals – 此模塊顯示用戶購物車中產品的當前小計、運費和總價。

其他可選模塊包括：

• Woo Breadcrumbs – 這將顯示 WooCommerce 麵包屑導航欄。
• Woo Cross Sells – 這將動態顯示與購物車中的項目相關聯的任何交叉銷售產品。

設計購物車頁面或模板

如前所述，如果您不需要為購物車頁面構建自定義模板，我們可以輕鬆使用 Divi Woo 模塊設計自定義 WooCommerce 購物車頁面。 對於本教程，我們將使用 Divi Theme Builder 構建購物車頁面模板。

使用 Divi 設計 WooCommerce 購物車頁面模板

對於此 WooCommerce 購物車頁面模板，目標是為分配給 Divi 中的 WooCommerce 購物車頁面的模板創建自定義正文區域。 我們不會為此模板創建自定義頁眉或頁腳區域，但您可以使用自己的頁眉和頁腳在自己的網站上輕鬆使用此模板。

為購物車頁面創建自定義模板

首先，讓我們執行以下操作：

1. 轉到您的 WordPress 儀表板並導航到 Divi > Theme Builder。
2. 然後單擊空灰色框區域內的添加新模板加號圖標以添加新模板。
3. 在模板設置模式中，在“使用”選項卡下，選擇 WooCommerce 頁面列表下的購物車。
4. 最後，單擊創建模板。

創建新的購物車模板後，單擊模板的“添加自定義正文”區域。 在彈出列表中，選擇Build Custom Body 。

創建剖面行和列結構

在模板佈局編輯器中，插入一個新的專業部分，該部分具有四分之一二分之一 0ne-fourth 列結構和兩個側邊欄。

接下來，在該部分的中間添加一列行。

部分背景

打開部分設置並添加背景顏色，如下所示：

• 背景顏色：#f7f3f0

截面尺寸

在設計選項卡下，更新以下內容：

• 天溝寬度：2
• 內寬：100%
• 內部最大寬度：無
• 最小高度：100vh

截面間距

接下來為部分和列添加一些間距，如下所示：

• 內邊距：頂部 0px，左側 40px，右側 40px
• 第 1 列填充：頂部 90 像素
• 第 3 列內邊距：84 像素

創建自定義導航鏈接

對於此佈局，我們將創建一些自定義導航鏈接，指向構成商店的關鍵頁面——商店、購物車和結帳。 這將使用戶更容易瀏覽購買過程。

在左欄中，添加一個新的簡介模塊。 這將用作您網站上商店頁面的鏈接。

在 Blurb Settings 模式中，更新內容如下：

• 標題：商店
• 正文：留空
• 使用圖標：是
• 圖標：見截圖

我們可以向 Shop 頁面添加動態鏈接，而不是添加靜態鏈接 URL。 這是如何做到的。

1. 將鼠標懸停在模塊鏈接 URL 輸入框上，然後單擊“使用動態內容”圖標。
2. 在下拉列表中，從列表中選擇頁面鏈接。
3. 在頁面鏈接模式中，從下拉列表中選擇商店頁面。
4. 然後保存更改。

在設計選項卡下，更新圖標樣式如下：

• 圖標顏色：rgba(55,61,75,0.3)
• 圖像/圖標位置：左
• 圖片/圖標寬度：16px

接下來，更新標題文本：

• 標題字體：Roboto
• 標題字體粗細：中
• 標題文字顏色：rgba(55,61,75,0.3)

最後，更新大小和間距，如下所示：

• 內容寬度：100%
• 邊距：底部 10px
• 圖像/圖標動畫：無動畫

這將確保簡介（或導航鏈接）跨越平板電腦和手機上瀏覽器的整個寬度，並在我們要添加的下一個簡介之間創建一些空間。

要創建我們接下來的兩個鏈接，請將我們剛剛設計的現有簡介模塊複製兩次，以便總共有三個鏈接。

第二個鏈接將是我們當前正在創建的頁面的購物車鏈接。 為了讓它脫穎而出，打開第二個簡介的設置並更新圖標和文本顏色：

• 圖標顏色：#373d4b
• 標題文字顏色：#373d4b

現在剩下要做的就是更新標題文本和模塊鏈接 URL，以便它們每個都有各自的動態頁面鏈接 URL。

自定義行設置

在頁面的中間部分，我們將添加 woo 通知模塊和 woo 購物車產品。 但在我們添加這些之前，我們需要優化行設置。

行填充

打開行設置並更新以下內容：

• 內邊距（桌面）：頂部 72 像素，左側 6%，右側 6%
• 填充：（平板電腦和手機）：0px 頂部，0px 左側，0px 右側

行邊框

• 邊框寬度：1px
• 邊框顏色：rgba(55,61,75,0.14)
• 頂部邊框寬度：0px
• 底部邊框寬度：0px

為購物車頁面設計動態 Woo 通知模塊

在頁面頂部添加 Woo 通知模塊始終是一個好主意，這樣在與購物車頁面交互時，通知對用戶最可見。 請記住，我們正在設計僅在需要時才顯示的通知。

要添加 Woo 通知模塊，請單擊以在單列行內添加一個新的 Woo 通知模塊。

Woo 通知頁麵類型和背景

接下來，更新 Woo Notice 的 Page Type 和 Background 顏色如下：

• 頁麵類型：購物車頁面
• 背景顏色：rgba(153,158,117,0.1)

重要提示：確保選擇購物車頁面作為頁麵類型，以便 woo 通知正常工作。

Woo 通知標題文本

在設計選項卡下，更新標題文本樣式如下：

• 標題字體：Roboto
• 標題字體粗細：中
• 標題文字顏色：#373d4b
• 標題文字大小：14px
• 標題行高度：1.8em

Woo 通知按鈕

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：14px
• 按鈕文本顏色：#fff
• 按鈕背景顏色：#999e75
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字母間距：1px
• 按鈕字體：Roboto
• 按鈕字體粗細：粗體
• 按鈕字體樣式：TT
• 按鈕填充：頂部 0.8em，底部 0.8em，左側 1em，右側 1em

Woo 通知框陰影

要為 woo 通知欄提供類似頂部邊框的設計，請按如下方式更新 box-shadow 選項：

• 盒子陰影：見截圖
• 盒子陰影垂直位置：0px
• 盒子陰影模糊強度：0px
• 盒子陰影傳播強度：0px
• 陰影顏色：#999e75

為了取出 woo 通知下方的默認邊距，請轉到高級選項卡並將以下自定義 CSS 添加到主元素：

margin-bottom: 0 !important;

創建動態購物車頁面標題

要創建購物車頁面所需的動態頁面標題，請在 woo notice 模塊下添加帖子標題模塊。

帖子標題內容

在帖子標題設置中，更新元素以僅顯示標題，如下所示：

• 節目名稱：是的
• 顯示元：否
• 顯示特色圖片：否

帖子標題文本

要設置帖子標題文本的樣式，請在設計選項卡下更新以下內容：

• 標題字體：DM Serif Display
• 標題文字顏色：#373d4b
• 標題文字大小：80px（桌面）、60px（平板電腦）、42px（手機）
• 標題行高度：1.2em

設計動態 Woo 推車產品

現在我們的頁面標題已經到位，我們準備添加 Woo Cart Products，這是購物車頁面模板的另一個關鍵元素。

在帖子標題模塊下，添加一個 Woo Cart Products 模塊。

除非您的購物車中已有產品，否則該模塊應顯示虛擬內容。 這將有助於可視化設計過程。

Woo 購物車產品正文和鏈接

我們可以通過在 Woo Cart Products 設置中自定義正文文本選項來定位產品標題鏈接、價格文本和小計文本。

打開 Woo Cart Products 設置模式，然後在設計選項卡下更新以下內容：

• 正文字體：Roboto
• 鏈接文字顏色：#373d4b

注意：鏈接文本將針對產品列下的產品標題鏈接。

Woo Cart Products 表格、表格單元格和刪除圖標

正如您可能知道的那樣，購物車產品是在表格結構中組織的。 我們可以使用模塊的內置選項來定位表格和表格單元格的樣式。

對於此示例，更新以下內容：

• 折疊表格排水溝和邊框：是
• 表格單元格填充：0px

然後更新每個產品左側的刪除圖標（“x”）的顏色，如下所示：

• 刪除圖標文本顏色：#373d4b

Woo Cart 產品領域

我們還可以使用模塊的內置字段選項來定位購物車產品字段。 這將針對數量字段框和優惠券代碼字段框等內容。

在字段選項下，更新以下內容：

• 字段背景顏色：透明
• 字段填充：頂部 10 像素，底部 10 像素
• 場圓角：0px
• 字段邊框寬度：1px
• 字段邊框顏色：rgba(0,0,0,0.16)

Woo 購物車產品按鈕

Woo Cart Products 模塊包含兩個按鈕（“應用優惠券”按鈕和“更新購物車”按鈕），可以使用模塊的內置按鈕選項進行自定義。

由於我們已經在 Woo Notice 模塊中設置了按鈕樣式，因此打開 Woo Notice 模塊設置並找到按鈕選項切換。 然後右鍵單擊按鈕切換或單擊“三點”圖標以打開更多設置菜單。 在那裡，選擇複製按鈕樣式。

現在復制按鈕樣式後，打開 Woo Cart Products 模塊設置並打開按鈕選項組上的更多設置菜單，然後選擇粘貼按鈕樣式。 這會將按鈕的樣式從 woo 通知模塊複製到該模塊。

一旦按鈕樣式就位，更改按鈕背景顏色如下：

• 按鈕背景顏色：#373d4b

禁用按鈕

“更新購物車”按鈕在不需要時處於禁用狀態。 我們也可以自定義禁用按鈕的樣式。 現在，只需複制當前按鈕樣式並使用右鍵單擊菜單設置將它們粘貼到禁用的按鈕樣式中。

Woo 購物車產品圖片

我們還可以在此模塊中更改產品圖片的樣式。 現在，讓我們在大小選項下更改圖像的大小，如下所示：

• 圖片寬度：80px

自定義表格佈局

如果您想為表格中的產品信息創建更多水平空間，您可以將 WooCommerce 默認的固定表格佈局覆蓋為初始（或自動）。 為此，請轉到高級選項卡，並將以下自定義 CSS 添加到表中：

table-layout: initial !important;

設計動態 Woo 購物車總計模塊

我們需要完成購物車頁面模板的最後一個關鍵元素是 Woo Cart Totals 模塊。 此模塊顯示動態購物車總計內容以及“繼續結帳”按鈕。 對於此佈局，繼續並將購物車總計模塊添加到該部分的右列。

購物車總計按鈕

首先，讓我們複製用於 Woo Notice 模塊的按鈕樣式（就像我們之前所做的那樣）並將按鈕樣式粘貼到購物車總計模塊中。 這將為“Proceed to Checkout”按鈕提供匹配的按鈕樣式。 當然，您可以使用模塊的內置選項輕鬆自定義按鈕樣式。

購物車總計文本

要設置購物車總計模塊的標題文本，請打開購物車總計模塊，然後在設計選項卡下更新以下內容：

• 標題字體：DM Serif Display
• 標題文字大小：30px（桌面）、24px（平板電腦）、18px（手機）
• 標題行高度：1.8em

表格邊框和表格單元格邊框

默認情況下，購物車總計將具有一些表格樣式。 您可以選擇使用模塊的內置表格和表格單元格選項來設置樣式。 對於這個佈局，我們將去掉兩者的邊框樣式。 為此，請更新以下內容：

• 表格邊框樣式：無
• 表格單元格邊框樣式：無

購物車總計字段

要為購物車總計模塊提供 Woo 購物車產品中使用的相同字段樣式，請從 Woo 購物車產品模塊複製字段樣式並將它們粘貼到購物車總計模塊。

根據需要添加更多內容

至此，我們擁有了購物車頁面模板的所有關鍵元素。 但你不必停在這裡。 您可以根據需要將任何您想要的內容添加到頁面。 這裡有一些想法：

• 添加 Woo Cross Sells 模塊以顯示與添加到購物車的產品相關聯的任何交叉銷售產品。
• 添加電子郵件選項以獲得首次購買的折扣。
• 添加顯示優惠券代碼的促銷以激勵完成購買過程。

對於此佈局的免費演示，我們在購物車產品下方提供了一個不錯的電子郵件選擇。

最後結果

讓我們看看我們的購物車頁面模板的最終結果。

以下是它在平板電腦和手機設備上的外觀。

最後的想法

使用 Divi 強大的主題構建器和直觀的 Woo 模塊，設計自定義 WooCommerce 購物車頁面模板的過程得到了極大的簡化和放大。 在本教程中，我們專注於整合構成購物車頁面的關鍵元素。 但是，請記住，所有其他強大的 Divi 模塊和功能都可供您使用，以將您的購物車頁面提升到一個全新的水平。 希望這將有助於提高您的 Divi 設計技能，更重要的是，帶來​​更多的轉化。

我期待在評論中收到您的來信。

乾杯!