[ad_1]
你用 迪維 並想要編輯您的產品頁面以提高轉換率？ 您來對地方了！ 在本指南中，我們將向您展示在Divi中自定義WooCommerce產品頁面的不同方法。
WooCommerce是目前最好的電子商務工具。 正確的插件和優化的WordPress主題是成功建立WooCommerce商店的第一步。 但這還不足以擁有成功的業務。 為了使您的商店更上一層樓，您應該自定義最重要的部分。 我們已經了解了如何編輯商店頁面和結帳頁面，因此今天我們將向您展示如何在Divi中自定義WooCommerce產品頁面。
為什麼要自定義WooCommerce產品頁面？
在商品頁面上，您可以顯示在商店中出售的商品。 它會影響您的業務成敗，因此您必須花時間對其進行優化，以提高轉化率。
默認情況下，WooCommerce插件帶有自定義產品頁面模板。 因此，無論您使用的是諸如GeneratePress之類的簡單主題還是諸如Avada之類的複雜主題，產品頁面的元素和設計都是相同的。 這就是為什麼要在客戶中留下印象的原因，應該自定義默認的WooCommerce產品頁面。
更改產品頁面的顏色和元素是一個不錯的開始，但是您可以做更多的事情。 一種選擇是使用自定義設計創建新的產品頁面模板。 藉助一點PHP，HTML和CSS，您就可以完全重新設計產品頁面。 但是，如果使用Divi，還有更好的選擇。
Divi主題具有其自己的風俗習慣 頁面構建器，稱為Divi Builder。 它使您可以輕鬆自定義WooCommerce產品頁面和網站的每一英寸，而無需編寫任何代碼。 讓我們仔細看看如何做。
如何在Divi中自定義WooCommerce產品頁面
對於此演示，我們將使用Divi Builder插件對產品頁面進行所有更改。 開始之前，請確保已將Divi與 已安裝Divi Builder 在您的網站上。
啟用可視編輯器
要開始使用Divi Builder在Divi中自定義WooCommerce產品頁面，請打開要編輯的任何產品頁面。 頁面打開後，您將在管理欄上看到一個名為「啟用可視編輯器」的按鈕。 單擊它以打開Divi Builder。
現在，您已啟用Divi的可視化編輯器，您將能夠選擇該頁面上的任何模塊並進行編輯。 要自定義當前模板，您只需編輯現有模塊或添加新模塊即可。 在模塊部分，您將看到基於WooCommerce的模塊，例如：
- 添加到購物車
- 附加信息
- 麵包屑
- 購物車通知
- 描述
- 畫廊
- 圖片
- 元
- 價錢
- 評分
- 相關產品
- 評論
- 股票
- 標籤
- 標題
- 加售
您可以將這些模塊中的任何一個添加到頁面中，並通過單擊來使其更加用戶友好。 最重要的是，最新版本的Divi構建器可與WooCommerce完美配合，因此您可以輕鬆自定義任何模塊。 讓我們看一下您可以編輯的一些內容。
1.顯示或隱藏評論
讓我們從簡單的事情開始。 如上所示，您可以輕鬆顯示或隱藏星級評定功能並關閉客戶評論數。 只需單擊審閱元素，然後按「設置」圖標。 然後轉到「元素」部分，您可以選擇顯示或隱藏星級和客戶評論數。
為了贏得在線客戶的信任，建議您在產品頁面上同時顯示星級和評論。
2.畫廊修改
一張圖片值得一千個單詞已經不是什麼秘密了。 這就是為什麼要提高轉換率的原因，最好在產品頁面上添加產品庫。 WooCommerce默認包含此功能，因此您要做的就是將圖像上傳到產品頁面或從媒體頁面中選擇它們。
用圖像更新產品頁面後，將如下所示：
如果由於某種原因您只想顯示每個產品的一個圖像，則使用Divi Builder可以隱藏任何產品的圖庫。 只需單擊圖庫，按「設置」圖標，轉到「元素」，即可選擇禁用圖庫。
此外，您可以隱藏特色圖片和銷售徽章。 考慮到銷售時圖片的重要性，我們建議您為每種產品至少添加3-4張圖片。
3.特色圖片修改
在Divi中自定義WooCommerce產品頁面的另一種有趣方法是編輯特色圖像。 第一印象很重要，因此您應該為產品選擇一個吸引人的功能圖片。 該圖像還將在商店存檔頁面上可見。
使用Divi構建器打開特色圖像選項時，您將能夠更改特色圖像和銷售徽章。
如前所述，我們建議您顯示吸引人的精選圖片，因為它們可能會對您的轉化率產生重大影響。
4.添加到購物車按鈕修改
要將產品添加到購物車，用戶需要單擊添加到購物車按鈕。 WooCommerce默認帶有「添加到購物車」按鈕的數量欄位，因此您無需手動創建按鈕。 在本節中，我們將向您展示如何使用Divi構建器修改「添加到購物車」按鈕。
在「元素」部分下，您將看到兩個主要選項。
如果要讓用戶選擇產品數量，請保留「數量」欄位。 但是，例如，如果您銷售在線課程，則可能要禁用「數量」選項以消除產品頁面中的噪音。
如您所見，一旦我們關閉了「數量」欄位，該欄位將消失。 在此產品頁面上，我們沒有選項來查看庫存選項，但是如果您在網站上顯示庫存，則可以用相同的方式啟用或禁用它。
5.將更改應用於相關產品
向購物者展示與購物者相關的產品是增加銷售額的好方法。 通常，默認情況下，WooCommerce根據商品的主要類別顯示相關產品。 但是，如果您的主題或模板不顯示相關產品，我們將為您提供解決方案。 讓我們看看如何使用Divi定製產品頁面並添加具有相關元素的新行。
首先，在頁面上添加新行。 對於本教程，我們將添加一行，但是您可以選擇更適合您的商店的樣式。
之後，將WooCommerce相關產品模塊添加到該行，如下所示。
您會看到相關產品部分將添加到頁面中。 然後，您可以自定義布局和顏色。
如果您不展示相關產品，我們建議您嘗試一下。 它們易於設置，可以幫助您提高銷售額。
6.添加一個切換
切換是一種在保持產品清潔的同時在產品頁面上顯示信息的絕佳方法。 在Divi中，可以使用「切換」模塊添加切換。 在本節中，我們將展示如何在產品說明下方添加切換模塊。
首先，將滑鼠懸停在產品說明上，然後點擊+按鈕。 然後，在搜索欄中查找「切換」並打開切換模塊。
要添加切換，您需要做兩件事。
對於此演示，我們將使用產品名稱作為切換標題，並使用產品說明作為切換主體。 為此，只需單擊右側的資料庫圖標，您將在資料庫中看到不同類型的內容。 對於標題，我們將選擇「 Product / Archive-title」作為標題，但是您可以選擇最符合您需求的內容類型。
現在讓我們對身體做同樣的事情。 按資料庫圖標，然後從菜單中選擇「產品描述」選項。
保存之後，您將在產品頁面上看到一個簡單的切換模塊，用戶可以按此模塊以查看有關該產品的更多信息。
Divi還允許您添加其他自定義元素，例如標題和說明以及字體，顏色等。 我們建議您隨便玩耍，並使用切換按鈕自定義產品頁面。
WooCommerce產品頁面專業提示
在完成本指南之前，我們為您提供了一個快速提示。
定期更新主題和插件
為了確保您始終可以訪問Divi必須提供的最新功能，我們強烈建議您將Divi主題，Divi構建器插件和WordPress核心更新為可用的最新穩定版本。
最簡單的方法是從Divi主題面板中打開自動更新。
您只需輸入您的Elegant Themes用戶名和API密鑰即可在您的Elegant Themes帳戶的信息中心中找到。 輸入這些內容後，保存更改，您將收到自動更新。
網站範圍內的使用
使用新的Divi Builder模塊，您將能夠添加部分並自定義任何頁面或帖子。 您需要做的就是啟用可視化編輯器，添加所需的元素，然後選擇要使用的模塊。 例如，如果您要編寫產品的自定義評論，請考慮在評論帖子中添加「添加到購物車」按鈕，以便用戶可以立即訪問它。
結論
總之，使用Divi自定義WooCommerce產品頁面可以幫助您提高銷售額並提高轉化率。 好消息是，您無需編寫任何代碼即可完成此操作。
隨著 Divi Builder，您可以輕鬆地在商店上編輯產品頁面，而無需任何其他頁面構建器插件。 在本指南中，我們向您展示了如何顯示或隱藏評論，特色圖像和圖像庫，以及如何自定義「添加到購物車」按鈕和相關產品部分。 這些只是您可以做的一些事情，因此我們鼓勵您試用Divi Builder並進行其他修改。
拖放頁面構建體驗將幫助您輕鬆自定義商店的每一英寸，即使您沒有編碼技能。
您使用Divi對商店進行了哪些更改？ 在我們的教程之後，您有任何問題嗎？ 讓我們在下面的評論部分中知道！