關於Divi 5的WooCommerce產品模塊，您需要了解的一切

與WooCommerce的兼容性現已擴展到Divi 5，可讓您完全控制產品頁面，而不依賴WooCommerce的內置模板。新成立的WooCommerce產品模塊可讓您設計引人入勝的，用戶友好的佈局，可與您的品牌相匹配並幫助銷售，同時利用Divi 5的所有功能，包括Flexbox，以構建具有現代佈局控制的產品頁面。

在這篇文章中，我們將介紹模塊的關鍵功能，並向您展示如何將它們用於下一個Divi 5電子商務網站。讓我們潛水。

什麼是WooCommerce產品模塊？

Woo產品模塊是Divi 5中的專門內容元素，旨在自定義Woo-Power商店的產品和類別頁面。這些模塊替換了插件標準配置的WooCommerce模板，從而使您可以創建可自定義的佈局。與這些傳統模板不同，Divi 5的模塊允許創造性自由，同時保持與WooCommerce的核心功能的兼容性。

Divi 5中的17個WooCommerce模塊的發布標誌著一個重要的里程碑。這些模塊涵蓋了所有產品和類別頁面設計方面，不再處於傳統模式，這意味著它們都針對Divi 5的現代體系結構進行了全面優化。通過這種向更有效的基礎的過渡，Divi 5的性能更好，更可擴展，並且與WordPress的未來兼容。

剩下的8個Woo模塊，專注於購物車和結帳頁面，預計將很快推出。

Divi 5的WooCommerce產品模塊的主要功能

讓我們介紹一下WooCommerce產品模塊已集成到Divi 5中，您可以期待的關鍵功能。

綜合模塊集

Divi 5的第一批WooCommerce產品模塊包括旨在處理產品和類別頁面設計特定方面的工具。這些模塊是：

• woo麵包屑：顯示導航麵包板小徑，以幫助用戶輕鬆瀏覽商店。
• woo注意：顯示系統消息，例如購物車更新，錯誤或確認。
• WOO產品添加到購物車：通過可選數量控件呈現一個添加到購物車按鈕。
• Woo產品描述：輸出主要的長格式產品描述。
• Woo產品庫：以網格或滑塊格式顯示其他產品圖像。
• Woo產品圖像：顯示主要產品圖像或圖像畫廊。
• Woo產品信息：顯示產品詳細信息，例如重量，尺寸或屬性。
• Woo產品元：顯示產品SKU，類別和標籤。
• Woo產品價格：顯示產品的價格，包括銷售價格。
• Woo產品評級：顯示平均星級評分和審查計數。
• Woo產品評論：允許客戶查看和提交產品評論。
• Woo產品庫存：表示產品可用性和庫存水平。
• Woo產品選項卡：顯示默認產品選項卡以進行描述，其他信息和評論。
• Woo產品標題：將產品的名稱輸出為可自定義的標題。
• Woo Product upsell：促進銷售產品以鼓勵高價值購買。
• Woo產品：為類別頁面創建可自定義的產品網格。
• Woo相關產品：根據類別或標籤顯示相關產品。

這些模塊一起提供了構建產品和類別頁面所需的一切，從導航麵包屑到動態產品顯示。

創意自由

Divi 5的WooCommerce產品模塊從標準WooCommerce模板的限制中免費用戶。使用這些模塊，您可以完全控制產品頁面的佈局，結構和設計，從而創建獨特的體驗。

這些模塊支持動態內容，這意味著它們直接從WooCommerce中獲取產品數據，從而確保價格，股票水平和描述的實時更新。這使您可以構建可以驅動參與度和轉換的頁面，而無需第三方插件或自定義代碼。

自定義選項

每個模塊都有廣泛的設計設置，所有模塊都可以在視覺構建器中進行管理。您可以自定義產品庫，銷售徽章，按鈕等元素，以及用於排版，顏色，間距和動畫的選項。

例如，您可以調整Woo產品庫模塊的佈局以在滑塊或網格中顯示圖像，樣式woo產品添加到推車按鈕具有自定義顏色和懸停效果，或調整Woo產品評分模塊，以完美地與您的設計保持一致。

這些設置使您可以輕鬆創建凝聚力的商店頁面。

主題構建器的動態模板

Divi 5的主題構建器使您可以通過允許您為產品和類別頁面創建全球模板來擁抱WooCommerce產品模塊的全部潛力。使用主題構建器，您可以設計一個用於商店中所有產品和類別的單個模板，以確保一致，凝聚力的外觀。

循環構建器用於動態WooCommerce內容

Divi 5循環構建器提供了構建動態Woo內容的另一種方法。使用Loop Builder，您可以使用任何Divi元素來查詢WooCommerce產品和設計靈活的產品循環，從而創建超出專用產品模塊的固定結構的佈局，列表和旋轉木製。對於單產品佈局，請使用Woo產品模塊；對於產品收集和檔案，請使用循環構建器。

如何使用Divi 5的WooCommerce產品模塊

本節將使用新的WooCommerce產品模塊在Divi 5的主題構建器中創建產品頁面。

創建一個新的主題構建器模板

導航到WordPress儀表板中的Divi>主題構建器。單擊+添加新模板。

出現對話框時，單擊“構建新模板” 。

接下來，我們需要將模板分配給我們的產品。在產品下，選擇所有產品來分配模板。

單擊創建模板分配。

單擊添加自定義車身。這將使我們能夠構建產品頁面模板的主體。

出現對話框時，請選擇“構建自定義車身” 。

構建產品模板

當主題構建器啟動時，您可以從頭開始構建模板，選擇預製佈局或使用AI構建。我們將從頭開始選擇本教程的構建。

單擊綠色 +圖標以添加新行。

當選項出現時，選擇兩列行。您添加到任何Divi 5頁或模板中的新行將使用Flebox。 Divi 5的Flexbox佈局系統使您對產品頁面的外觀有更多的控制，包括更改WooCommerce產品模塊在不同屏幕尺寸上堆疊的方式。

向下滾動以顯示Woo產品模塊選項。單擊後，您將擁有17個Divi 5 Woo模塊和8個舊模塊（Divi 4）模塊。

添加Woo產品圖像模塊

查找並選擇Woo產品圖像模塊，然後將其添加到第一列。

默認情況下，在“內容”選項卡中的“產品”字段中選擇此帖子。如果您想使用現有產品構建模板，請從下拉菜單中選擇它。這是一種預覽模板在創建模板時的好方法。切記在最終保存之前將其交換回此帖子。

擴展元素下拉菜單以顯示設置。在這裡，您可以控制模塊中顯示哪些圖像，包括特色圖像，畫廊圖像和銷售徽章。

單擊“設計”選項卡中的“圖像下拉菜單”以顯示設置。在這裡，您可以強迫圖像佔據所有可用空間（強制全寬），添加邊框，盒子陰影，調整間距或添加過濾器。

您還可以通過分配背景顏色，文字，邊框等來設置銷售徽章。

添加Woo產品標題模塊

在第二列中，單擊Woo產品模塊，然後滾動以選擇Woo產品標題模塊。

使用“內容”選項卡的“產品”字段中的“下拉菜單”選擇產品，然後預覽模板中的外觀。

接下來，導航到模塊的設計選項卡並展開標題文本下拉菜單。在這裡，您可以分配字體，並根據需要進行標題。

添加Woo產品價格模塊

在產品標題下，單擊以添加新模塊。選擇Woo產品模塊並滾動以選擇WOO產品價格模塊。

在“設計”選項卡中，您可以設計產品價格的各個方面，包括文本，銷售文本，新價格文本等。

添加Woo產品評級模塊

接下來，我們將在WOO價格模塊下添加Woo產品評級模塊。

在元素下的“內容”選項卡中，您可以選擇顯示或隱藏星級評分和客戶評論數量。

在“設計”選項卡中，佈局下拉菜單使您可以選擇如何顯示星級評分。元素可以在線顯示或堆疊。

其他樣式選項包括為星星分配顏色，文本大小和字母間距以及評分文本的樣式選項。

添加Woo產品描述模塊

在Woo Star評級模塊下，單擊以添加新的Woo模塊。這次，我們將選擇Woo產品描述模塊。在“內容”選項卡中，選擇要顯示的描述（描述或簡短說明）。

在“設計”選項卡中，您可以使用字體，重量，樣式，對齊，顏色，大小等選項為描述設計。

將Woo產品添加到購物車模塊中

接下來，我們將添加Woo產品添加到購物車模塊。它將使您的客戶可以將產品添加到他們的購物車中，並選擇分配給產品的任何變體。

“內容”選項卡中的元素可以切換，允許您顯示或隱藏數量字段和可用庫存。快速注意：要顯示庫存數量，必須檢查WOO產品本身中的管理庫存。

您可以在“設計”選項卡中對字段標籤，文本，下拉菜單（用於變體）和與您的品牌匹配的按鈕進行樣式。

繼續添加模塊，例如Woo產品元模塊以顯示SKU數字和類別。

您還可以添加“ Woo產品”選項卡模塊，以顯示有關產品的描述，評論和其他信息。

為了獲得最大範圍，您可以在產品模板上顯示一系列相關產品，以鼓勵您的網站訪問者探索商店中的其他產品，從而增加轉換的機會。

保存模板

完成添加模塊後，進行所需的任何其他更改，然後單擊主題構建器右上角的“保存”按鈕來保存模板。

接下來，單擊“退出”按鈕以返回主題構建器儀表板。

回到主題構建器儀表板中，單擊“保存更改”以保存模板並將其應用於Woo產品。

如您所見，使用Divi 5的Woo產品模塊創建產品模板是一個簡單的過程。我們不會介紹本教程中的所有模塊，但是使用所有模塊，您可以創建令人印象深刻的產品或類別頁面，以使訪問者參與其中。

下載文件

免費下載

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

下載

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

Divi 5的WooCommerce集成的下一步是什麼？

接下來的幾週將發布第二批WooCommerce模塊，重點關注購物車和結帳頁面，並將其與WooCommerce結合在一起。這些添加將使用戶能夠完全自定義整個電子商務渠道，從產品瀏覽到結帳。 Divi 5 Public Beta將進一步完善這些功能，並結合用戶反饋和其他錯誤修復，以確保穩定性。

除了WooCommerce的兼容性和集成之外，Divi 5還繼續隨著最新功能的發展而發展，例如用於創建動態產品滑塊的組旋轉木馬模塊，用於添加輕型動畫的Lottie模塊以及用於增強佈局控制的新的Flexbox佈局系統。這些添加補充了Woo模塊，為電子商務網站提供了更具創造力的可能性。

立即嘗試Divi 5的Woo產品模塊

Divi 5的Woo產品模塊使您可以以無與倫比的靈活性和創造力創建迷人的產品和類別頁面。這些模塊提供了創意自由，動態內容集成和性能的融合，所有這些都在直觀的界面內。從可自定義的產品畫廊到通過主題構建器的自定義佈局，Divi 5使創建高轉換商店頁面變得容易。

您準備好潛入Divi 5嗎？下載最新的Divi 5 Public Alpha來探索這些模塊，並查看它們如何改變您的WooCommerce網站。我們很想听聽您的想法。在評論中分享您的反饋，或在我們的社交媒體渠道上與我們聯繫。