如何使用 Divi 創建 WooCommerce 結帳頁面模板

設計 WooCommerce 結帳頁面通常涉及對後端 PHP 模板文件的高級自定義和大量自定義 CSS。 但是有了 Divi 的 Woo 模塊，這個過程變得簡單而愉快！ 當您使用 Divi 編輯 WC 結帳頁面時，該 WC 短代碼將轉換為動態 Woo 結帳模塊的結構化佈局，可以使用強大的內置設計選項進行可視化設計。 這使您可以完全控制結帳頁面的設計。

在本教程中，我們將向您展示如何使用 Divi 從頭開始創建一個完全自定義的 WooCommerce 結帳頁面。 首先，我們將使用結帳頁面可用的動態 Woo 模塊設計 WooCommerce 結帳頁面。 完成後，我們將向您展示如何將結帳頁面設計添加到主題生成器中的結帳頁面模板。 因此，無論您是想自定義實際的結帳頁面還是創建結帳頁面模板，Divi 都能滿足您的需求。 您將立即開始設計令人驚嘆的結帳頁面。

讓我們開始吧！

搶先看

之前和之後

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

以下是桌面和移動設備上的結帳頁面設計的詳細介紹。

您還可以查看此結帳頁面設計的現場演示。

免費下載結帳頁面佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後單擊導入按鈕。

完成後，部分佈局將在 Divi Builder 中可用。

下載 Divi 的購物車和結帳頁面模板集

此結帳頁面設計也可作為 Divi 的免費購物車和結帳頁面模板集的一部分下載。

讓我們進入教程，好嗎？

關於 WooCommerce 結帳頁面和 Divi

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

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

用於在 Divi 中設計結帳頁面的 Woo 模塊

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

構建結帳頁面或模板的關鍵模塊包括：

• 帖子標題- 這將在構建結帳頁面模板時動態顯示結帳頁面的標題。
• Woo Notice – 此模塊可以設置為不同的頁麵類型（購物車頁面、產品頁面、結帳頁面）。 它將根據需要動態地向用戶顯示重要通知。
• Woo Checkout Billing - 此模塊顯示結帳期間使用的帳單詳細信息表單。
• Woo Checkout Shipping - 此模塊顯示結帳期間使用的運輸詳細信息表格。
• Woo 結帳信息- 此模塊顯示結帳期間使用的附加信息表。
• Woo Checkout Details - 此模塊在結賬時顯示訂單詳細信息，包括所購買的產品及其價格。
• Woo Checkout Payment - 此模塊在結帳期間顯示付款類型選擇和付款表格詳細信息。

另一個可選的 woo 模塊：

• Woo Breadcrumbs – 這將顯示 WooCommerce 麵包屑導航欄。

設計結帳頁面或模板

如前所述，我們可以輕鬆使用 Divi Woo 模塊來設計自定義 WooCommerce 結帳頁面。 但是，您也可以選擇使用相同的設計流程構建自定義 Checkout模板。 對於本教程，我們將為結帳頁面構建自定義結帳頁面佈局。 然後我們將向您展示如何使用自定義結帳頁面佈局使用 Divi 主題生成器創建結帳頁面模板。

使用 Divi 設計 WooCommerce 結帳頁面佈局

對於此 WooCommerce 結帳頁面教程，目標是為在 WooCommerce 中指定為 WooCommerce 結帳頁面的 WooCommerce 結帳頁面創建自定義頁面佈局。 在本教程的最後，我們將向您展示如何輕鬆保存和導入此結帳頁面佈局，以使用主題生成器創建新的結帳頁面模板。

入門：編輯 WooCommerce 結帳頁面

在 WordPress 儀表板中，單擊以編輯 WooCommerce 結帳頁面。 默認情況下，該頁面將僅包含用於生成結帳頁面內容的簡碼。

單擊頁面編輯器頂部的使用 Divi Builder按鈕。

然後單擊Edit With The Divi Builder按鈕以啟動 Divi Builder。

清除佈局以從頭開始

如前所述，該頁面將加載構成​​結帳頁面內容的所有可定制的 Divi 模塊（包括關鍵的 Woo 模塊）。 如果需要，您可以使用現有佈局並開始自定義已經存在的模塊。 但是對於本教程，我們將從頭開始。

要清除佈局，請打開頁面底部的設置菜單，然後單擊清除佈局按鈕（垃圾桶圖標）並選擇是。

創建部分、行和列

部分背景

首先，將背景顏色添加到新的常規部分，如下所示：

• 背景顏色：#f7f3f0

行列

接下來，向該部分添加一列行

創建動態結帳頁面標題

要創建結帳頁面所需的動態頁面標題，請將帖子標題模塊添加到該列。

帖子標題內容

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

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

帖子標題文本

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

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

為結帳頁面設計動態 Woo 通知模塊

在頁面頂部添加 Woo Notice 模塊始終是一個好主意，這樣在與結帳頁面交互時，用戶最容易看到這些通知。 請記住，我們正在設計僅在需要時才顯示的通知。

要添加 Woo 通知模塊，請單擊以在帖子標題模塊下添加新的 Woo 通知模塊。

Woo 通知頁麵類型和背景

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

• 頁麵類型：結帳頁面
• 背景顏色：rgba(153,158,117,0.1)

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

Woo 通知標題文本

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

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

然後選擇鏈接選項卡並更新標題鏈接文本顏色：

• 鏈接文字顏色：#999e75

Woo 通知正文

在標題文本之後，更新正文如下：

• 正文字體：Roboto
• 正文文本顏色：#fff
• 車身線高：1.8em

然後選擇鏈接選項卡並更新鏈接文本：

• 鏈接字體粗細：粗體
• 鏈接文字顏色：#999e75

Woo 通知字段標籤

結帳頁面通知包括登錄表單和優惠券代碼等字段和字段標籤。 要編輯這些字段的字段標籤樣式，請更新以下內容：

1. 必填字段指示器顏色：#fff
2. 字段標籤字體：Roboto
3. 字段標籤字體粗體：粗體

Woo 通知字段

接下來，更新字段樣式選項，如下所示：

1. 佔位符顏色：#fff
2. 字段背景顏色：透明
3. 字段文本顏色：#fff
4. 字段焦點文本顏色：#fff
5. 字段填充：頂部 12 像素，底部 12 像素
6. 字段邊框寬度：1px
7. 字段邊框顏色：rgba(255,255,255,0.32)

Woo 通知按鈕

1. 為按鈕使用自定義樣式：是
2. 按鈕文字大小：14px
3. 按鈕文本顏色：#fff
4. 按鈕背景顏色：#999e75
5. 按鈕邊框寬度：1px
6. 按鈕邊框顏色：#999e75
7. 按鈕邊框半徑：0px
8. 按鈕字母間距：1px
9. 按鈕字體：Roboto
10. 按鈕字體粗細：粗體
11. 按鈕字體樣式：TT
12. 按鈕填充：頂部 12 像素，底部 12 像素，左側 24 像素，右側 24 像素

Woo 通知表

每個通知表單都可以在表單選項組下設置樣式。 要為表單提供淺色邊框，請更新以下內容：

1. 形成圓角：0px
2. 表格邊框寬度：1px
3. 表單邊框顏色：rgba(255,255,255,0.32)

Woo 通知框陰影

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

1. 盒子陰影：見截圖
2. 盒子陰影水平位置：0px
3. 盒子陰影垂直位置：3px
4. 陰影顏色：#999e75

設計 Woo Checkout 計費模塊

現在我們的頁面標題和通知已經到位，我們準備添加 Woo Checkout Billing 內容，這是結帳頁面的另一個關鍵元素。

在我們添加計費內容之前，創建一個具有五分之三五分之二列結構的新行。

在第 1 列中，添加一個 Woo Checkout 計費模塊。

Woo Checkout 帳單標題文本

我們可以通過自定義標題文本選項來定位標題文本。

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

1. 標題字體：DM Serif Display
2. 標題文字顏色：#fff
3. 標題文字大小：30px（桌面）、24px（平板電腦）、18px（手機）
4. 標題行高：1.4em

Woo Checkout 計費字段和字段標籤

就像通知模塊一樣，這個模塊也有設置字段和字段標籤樣式的選項。 由於我們希望所有字段和字段標籤在整個頁面中匹配，我們可以從已創建的 Notice 模塊複製字段和字段標籤樣式並將這些樣式粘貼到 Woo Checkout Billing 模塊。

這是如何做到的：

• 在頁面頂部打開通知模塊的設置。
• 右鍵單擊設計選項卡下的字段標籤選項組。
• 從右鍵菜單中選擇“複製字段標籤樣式”。

現在復製樣式後，打開 Woo Checkout Billing 模塊頂部菜單欄中的更多設置菜單。 然後從菜單中選擇“粘貼字段標籤樣式”。

我們也可以重複相同的過程來複製字段樣式。

這是如何做到的：

• 在頁面頂部打開通知模塊的設置。
• 右鍵單擊設計選項卡下的字段選項組。
• 從右鍵菜單中選擇“複製字段樣式”。

現在復製樣式後，打開 Woo Checkout Billing 模塊頂部菜單欄中的更多設置菜單。 然後從菜單中選擇“粘貼字段樣式”。

Woo Checkout 賬單表格通知

表單通知是動態顯示填寫表單時可能出現的任何通知或錯誤的內容。 要設置表單通知的樣式，請打開 Woo Checkout Billing 設置並更新以下內容：

• 表格通知背景顏色：#e0816b
• 表單通知填充：頂部 8px，底部 8px
• 表格通知字體：Roboto
• 表格通知文字大小：14px

Woo 結帳帳單間距和邊框

為了完成設計，讓我們為模塊添加一點填充和淺色邊框，如下所示：

• 內邊距：頂部 16 像素，底部 16 像素，左側 16 像素，右側 16 像素
• 邊框寬度：1px
• 邊框顏色：rgba(255,255,255,0.1)

設計 Woo Checkout 運輸和 Woo 結帳信息

我們需要創建結帳頁面模板的下一個關鍵元素是 Woo Checkout Shipping 模塊和 Woo Checkout Information 模塊。 Woo Checkout Shipping 模塊顯示完成結帳前輸入運輸信息所需的表格。 Woo 結帳信息模塊顯示一個輸入表單，允許用戶在結帳前輸入任何其他信息。

添加 Woo Checkout 運輸模塊

對於此佈局，請直接在 Woo Checkout Billing 模塊下添加一個新的 Woo Checkout Shipping 模塊。

添加 Woo Checkout 運輸模塊

在 Woo Checkout Shipping 模塊下，繼續添加 Woo Checkout Information 模塊。

樣式化 Woo Checkout Shipping 和 Woo Checkout 信息模塊

因為這兩個 woo 模塊（Checkout Shipping 和 Checkout Information）都需要匹配 Woo Checkout Billing 模塊的設計，所以我們可以將我們需要的樣式複製到每個模塊中。

複製和粘貼標題文本樣式

讓我們從標題文本樣式開始。 打開 Woo Checkout Billing 模塊的設置並使用右鍵菜單複制標題文本樣式。

然後使用多選功能選擇 Woo Checkout Shipping 和 Woo Checkout 信息模塊。 然後將標題文本樣式粘貼到選定的模塊之一。

複製和粘貼字段標籤樣式

重複相同的過程以復制和粘貼字段標籤樣式。

打開 Woo Checkout Billing 模塊的設置並使用右鍵菜單複製字段標籤樣式。

然後使用多選功能選擇 Woo Checkout Shipping 和 Woo Checkout 信息模塊。 然後將字段標籤樣式粘貼到所選模塊之一。

複製和粘貼字段樣式

重複相同的過程以復制和粘貼字段的樣式。

打開 Woo Checkout Billing 模塊的設置並使用右鍵菜單複製字段的樣式。

然後使用多選功能選擇 Woo Checkout Shipping 和 Woo Checkout 信息模塊。 然後將字段樣式粘貼到所選模塊之一。

複製和粘貼填充

重複相同的過程來複製和粘貼填充。

打開 Woo Checkout Billing 模塊的設置並使用右鍵菜單複制填充。

然後使用多選功能選擇 Woo Checkout Shipping 和 Woo Checkout Information Modules 並將填充粘貼到所選模塊之一。

複製和粘貼邊框

重複相同的過程以復制和粘貼邊框。

打開 Woo Checkout Billing 模塊的設置並使用右鍵菜單複制邊框。

然後使用多選功能選擇 Woo Checkout Shipping 和 Woo Checkout 信息模塊，並將邊框樣式粘貼到所選模塊之一。

設計 Woo Checkout 詳細信息模塊

現在我們的運輸和附加信息內容已經設計好了，我們準備添加 Woo Checkout Details 內容。 這是顯示採購訂單詳細信息的結帳頁面的另一個關鍵元素。 它包括產品清單、小計和採購總額。 它還顯示任何可以通過鏈接刪除的優惠券折扣。

在結帳詳細信息中，將新的 Woo Checkout Details 模塊添加到同一行的第 2 列。

Woo 結帳詳細信息標題文本

在 Woo Checkout Details 設置模式中，轉到設計選項卡並更新標題文本，如下所示：

• 標題字體：DM Serif Display
• 標題字體粗細：粗體
• 標題文字顏色：#fff
• 標題文字大小：24px（桌面）、22px（平板電腦）、18px（手機）
• 標題行高：1.4em

Woo 結帳詳細信息列標籤

要設置列標籤的樣式，請更新以下內容：

• 列標籤字體：Roboto
• 列標籤字體粗細：粗體
• 列標籤文本顏色：rgba(255,255,255,0.32)

Woo 結帳詳細信息正文

要設置針對列表中每列下項目的正文文本的樣式，請更新以下內容：

• 正文字體：Roboto
• 正文文本顏色：#fff

在鏈接選項卡下，更新鏈接文本顏色：

• 鏈接文本顏色：#e0816b

Woo 結帳詳細信息表邊框

對於這個設計，我們將完全去掉表格邊框。 為此，請更新以下內容：

• 表格邊框寬度：0px

Woo 結帳詳細信息表格單元格

要設置表格中表格單元格的樣式，請更新以下內容：

• 表格單元格內邊距：左 0px
• 表格單元格邊框樣式：無

這會將表格單元格內的內容向左對齊，並完全移除表格單元格邊框。

Woo 結帳細節填充和邊框

為了使模塊的設計與其他模塊保持一致，請按如下方式更新填充和邊框：

• 內邊距：頂部 16 像素，底部 16 像素，左側 16 像素，右側 16 像素
• 邊框寬度：1px
• 邊框顏色：rgba(255,255,255,0.1)

設計 Woo Checkout 支付模塊

現在我們的結帳詳情內容已經完成，我們準備添加 Woo Checkout Payment 內容。 這是結帳頁面的最後一個關鍵元素。 它包括用於不同付款選項的可單擊單選按鈕切換以及主要結帳按鈕。 它還包括內置的表單通知。

要添加結帳付款內容，請在第 2 列的結帳詳細信息下添加一個新的 Woo Checkout 付款模塊。

Woo Checkout 付款背景

打開 Woo Checkout Payment 設置並給模塊一個透明背景：

• 背景顏色：透明

Woo Checkout 付款正文

接下來，更新正文樣式如下：

• 正文字體：Roboto

在鏈接選項卡下更新鏈接文本顏色：

• 鏈接文字顏色：#999e75

Woo 結帳付款單選按鈕

接下來，更新單選按鈕的樣式，如下所示：

• 單選按鈕文本顏色：#fff
• 單選按鈕字體：Roboto
• 單選按鈕字體粗體：粗體

Woo Checkout 付款工具提示

工具提示是打開單選按鈕切換時顯示的文本框。

讓我們更新工具提示樣式如下：

• 工具提示背景顏色：透明
• 工具提示邊距：頂部 -10 像素，左側 17 像素
• 工具提示字體：Roboto

Woo Checkout 付款表格通知

因為 Woo Checkout Payment 模塊共享相同的 Form Notice 選項，我們可以從 Woo Checkout Billing 模塊複製現有的表單通知樣式並將它們粘貼到 Woo Checkout Payment 模塊。

Woo 結帳付款按鈕

要為 Woo Checkout Payment 模塊設置結帳按鈕樣式，請從 Woo Notice 模塊複製按鈕樣式。

然後將按鈕樣式粘貼到 Woo Checkout Payment 模塊。

Woo Checkout 付款填充和邊框

要完成設計，請添加填充和邊框，如下所示：

• 內邊距：頂部 16 像素，底部 16 像素，左側 16 像素，右側 16 像素
• 圓角：0px
• 邊框寬度：1px
• 邊框顏色：rgba(255,255,255,0.1)

結果

這是我們的結帳頁面現在的樣子！

根據需要添加更多內容

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

對於我們這個結帳頁面模板的特色演示（可在此處下載），我們包含一個帶有一些自定義導航鏈接的固定側邊欄。

為結帳頁面創建自定義模板

如果要創建結帳頁面模板，可以使用主題生成器創建結帳頁面模板佈局，就像我們使用結帳頁面模板所做的那樣。 但是，由於我們已經有了根據本教程設計的頁面佈局，我們可以簡單地將此佈局添加到結帳頁面模板中。

將 WooCommerce 頁面佈局保存到 Divi 庫

在我們可以將結帳頁面佈局添加到結帳頁面模板之前，我們必須首先將頁面佈局保存到 Divi 庫。

為此，請打開結帳頁面底部的 Divi Builder 設置菜單。 單擊添加到庫圖標，為佈局命名，然後單擊保存到庫。

創建新的結帳頁面模板

結帳頁面佈局保存到庫後，我們就可以創建新的結帳頁面模板了。

這是如何做到的：

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

將結帳頁面佈局添加到結帳模板

創建新的結帳模板後，單擊模板的“添加自定義正文”區域。 在彈出列表中，選擇Add From Library 。

從“從庫加載”彈出窗口的“您保存的佈局”選項卡下，選擇您已保存到庫中的結帳頁面佈局。

完成後，Checkout 模板將在 Theme Builder 中可用。 要編輯模板，請單擊模板正文區域上的編輯圖標。

最後結果

讓我們看看結帳頁面模板的最終結果。

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

最後的想法

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

有關更多信息，請查看如何在 Divi 中設計 WooCommerce 購物車頁面模板或下載我們很棒的 Divi 免費購物車和結帳頁面模板集。

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

乾杯!