Divi 插件亮點：Divi BodyCommerce

Divi BodyCommerce 是 Divi 的第三方插件，可讓您控制從產品頁面到結賬頁面以及兩者之間的所有內容的商店設計。 它的設計考慮到了轉換，讓您可以使用 Divi Builder 完全控製商店的設計。

當一個插件提供與這個一樣多的模塊和功能時，它們往往會變得難以使用。 然而，這不是問題，因為一切都很容易理解，而且比我見過的任何插件都有更多的分步視頻。 在本文中，我們將看看 Divi BodyCommerce，看看它可以做什麼以及它是多麼容易使用。

Divi BodyCommerce 安裝和設置

正常上傳並激活插件。 要激活許可證，請轉到儀表板菜單中的Divi Engine > BodyCommerce 許可證。

單擊儀表板菜單中的BodyCommerce打開設置。 這些與您希望在 WooCommerce 中看到的設置類型相同。 在這裡，您可以選擇您的頁面。 為這些頁面創建佈局後，請轉到此設置頁面並選擇它們。 您還可以將頁面設置為全寬，並為每個類別選擇不同的產品模板。

Divi BodyCommerce 模塊

Divi Builder 中添加了 53 個新模塊。 這些是設計 WooCommerce 商店各個方面所需的所有元素，包括產品頁面、帳戶頁面、存檔頁面、購物車等。它們採用顏色編碼，因此您不會錯過它們。 顏色實際上顯示了模塊的用途。 例如，紅色模塊用於產品頁面。 有些使用漸變來顯示它們可以處理兩種類型的頁面。 此圖顯示前 24 個模塊。

以下是接下來的 29 個模塊。 模塊添加頁面元素，例如向上銷售、交叉銷售、滑塊、相關產品、輪播、畫廊、共享、標籤、麵包屑等等。 循環創建產品列表以構建您的商店頁面。 它們包括預期的內容、設計和高級選項卡和選項。

注意 – 如果頁面未加載，請確保您沒有在該頁面上使用不是設計為在該頁面上工作的模塊。 一些模塊是全局的，適用於任何頁面，但其他模塊則適用於特定類型的頁面。 例如，您不能在循環頁面上使用產品頁面模塊。

創建和分配頁面

讓我們看看如何創建頁面並將其設置為該類別的默認值。 首先，在 Divi 庫中創建佈局。

接下來，轉到儀表板菜單中的Divi Engine > BodyCommerce 。 選擇您正在創建的頁麵類型的選項卡，然後為該頁面選擇佈局。 您可以根據需要創建任意數量的佈局，並將它們用於不同類型的頁面和各個類別。

Divi BodyCommerce 示例

以下是我創建的幾個示例。 這只是使用此插件可以完成的一小部分示例。

Divi BodyCommerce 商店頁面

對於商店頁面，我剛剛添加了一個產品循環存檔頁面模塊。

這是具有默認設置的頁面。 每個元素都可以使用 Divi Builder 進行調整。

這是在茶店佈局內。 這是除限制外的默認設置。 我將其設置為顯示 6 個產品。

您可以實時調整一些元素。

我為銷售徽章和按鈕添加了綠色背景，將佈局設置為顯示 6 列，為產品添加了框陰影，並添加了綠色覆蓋層。 我對佈局的選項數量印象深刻。

這是博客風格的佈局。 如果您有更長的產品說明，那就太好了。

Divi BodyCommerce 產品頁面

我在 Divi 庫中創建了一個產品頁面佈局，並在 BodyCommerce 設置中選擇它作為默認佈局。 這只是了解模塊可以做什麼的基本佈局。

這很簡單，但它是一個很好的起點。 它顯示了產品的標題、圖庫和滑塊。

我隨機添加了一些產品頁面和全局模塊。

它開始展示可以使用 BodyCommerce 完成的事情。 讓我們在這個頁面上做一些 Divi。

以下是 Divi Builder 的一些簡單調整。 我所做的只是為部分和行添加背景，並調整按鈕和搜索字段的邊框。

在這一行中，我為相關產品添加了一個新行，並將搜索模塊移至該行。 我還更改了產品的佈局並將產品圖片更改為圖庫。 我把它設置為垂直滾動。 如果 WooCommerce 演示中有更多該產品的圖像，它們將顯示在左側的垂直列中。 這只是觸及產品頁面可以完成的調整級別的表面。

Divi BodyCommerce 購物車

我正在使用 Bakery 佈局中的聯繫頁面構建購物車頁面。 我正在使用 Cart Products 和 Cart Totals 模塊。 在 Visual Builder 中查看時，它們不會顯示其內容，但您仍然可以在 Visual Builder 中進行構建。 這些模塊提供了許多其他功能，例如交叉銷售。

這是使用默認設置的購物車。 我在一個 2 列佈局中有兩個模塊。

這是經過幾次更改後的購物車頁面。 我改為單列佈局，在右側和左側添加一些間距，從佈局中添加背景顏色，更改按鈕顏色和文本顏色以匹配佈局，並添加框陰影。

Divi BodyCommerce 文檔

開發人員的網站以書面形式提供文檔，並在 YouTube 上提供一系列視頻。 我喜歡它包括兩者。 Divi Engine 儀表板菜單中提供了鏈接。 您還可以通過單擊開發人員網站上的任何功能來觀看視頻。 這會創建一個有趣的結構來查找您需要的視頻。 這實際上是我找到我想看的視頻的方式。

Divi BodyCommerce 價格

BodyCommerce 有三個許可證可供選擇：

• 1 個站點 – 24 英鎊
• 5 個站點 – 50 英鎊
• 無限站點 – 96 英鎊

您可以從開發商的網站購買 BodyCommerce。

結束的想法

Divi BodyCommerce 對 WooCommerce 產品和頁面設計提供了令人印象深刻的控制。 我只是幾乎沒有觸及它可以做什麼。 您還可以自定義登錄屏幕、徽章、帳戶頁面、感謝頁面、表單、搜索頁面等等。 它甚至包括用於購物車的電子郵件模板、自定義圖標、色板和 AJAX。 我喜歡能夠為每個類別創建不同的佈局。

模塊和佈局易於使用。 我確實按照開發人員頁面上的視頻來創建我的示例。 這些視頻很詳細，易於理解。 我可以輕鬆創建我想要的任何類型的頁面。

BodyCommerce 提供的工具和自定義功能比我目前見過的任何 WooCommerce/Divi 插件都多。 如果您將 WooCommerce 與 Divi 一起使用並且想要自定義您的 WooCommerce 頁面，BodyCommerce 是一個簡單的選擇。

我們希望聽到您的意見。 您是否為 Divi 和 WooCommerce 嘗試過 BodyCommerce？ 請在評論中告訴我們您對此的看法。

精選圖片來自 Letters-Shmetters / shutterstock.com