如何在 Divi Builder 中編輯產品頁面模板
已發表: 2022-10-25如果您使用 WordPress 的 Divi 主題並想要編輯您的產品頁面,您需要了解一些事項。 首先,您需要創建一個子主題。 這將允許您在不影響原始主題文件的情況下更改代碼。 設置子主題後,您可以在 Divi Builder 中編輯產品頁面模板。 要編輯產品頁面模板,首先轉到 WordPress 管理面板中的 Divi Builder 選項卡。 然後,單擊“模板”選項卡並從下拉菜單中選擇“產品頁面”。 進入 Divi Builder 後,您將看到構成產品頁面模板的所有元素的列表。 您可以通過單擊這些元素中的任何一個,然後在右側的邊欄中進行更改來編輯它們。 例如,如果您想更改產品圖片,請單擊“圖片”元素,然後從 WordPress 媒體庫中選擇一個新圖片。 完成更改後,單擊 Divi Builder 側邊欄中的“保存”按鈕。 您的更改現在將應用於您網站上的所有產品。
Divi Builder 是一款出色的工具,可讓您直觀地自定義 WooCommerce 網站,而無需編寫任何代碼。 在您商店的產品頁面上,您將能夠展示您的產品是如何展示的。 為產品頁面著色並添加相關元素是個好主意,但還有很多其他內容。 Divi 主題包括一個 Divi Builder 頁面構建器,可用於創建自定義頁面。 您將能夠快速輕鬆地個性化 WooCommerce 產品頁面和您網站的任何其他部分,而無需任何編碼經驗。 WooCommerce 平台支持廣泛的模塊,可以輕鬆修改以滿足您的特定要求。 使用 Divi Builder,您可以快速關閉客戶評論計數並顯示星級,或者您可以隱藏該功能。
您可以通過將產品庫添加到產品頁面來提高轉化率。 我們建議您在訂單中至少包含每件商品的 3-4 張照片。 如果您銷售在線課程,您可能希望禁用數量選項以保持產品頁面清晰。 切換使您更容易查看信息,同時保持您的產品頁面乾淨。 我們將向您展示如何從下面的產品頁面在產品描述下方安裝切換模塊。 在我們的產品/存檔部分,標題將是產品/存檔標題,但您可以選擇最適合您作為作者的需要的材料。 通過從菜單中選擇產品描述,您可以訪問您的數據庫。 完成更改後,您將在完成後立即收到自動更新。 此模塊使您能夠以簡單的方式創建部分並個性化您的頁面和帖子。
Divi Woocommerce 自定義產品頁面

有很多方法可以自定義Divi WooCommerce 產品頁面。 您可以更改佈局、顏色、字體等等。 您還可以添加自定義 CSS 和 HTML 以進一步自定義產品頁面的外觀。
Divi Woocommerce 產品頁面模板

divi woocommerce 產品頁面模板是在您的網站上展示您的產品的好方法。 這種類型的模板允許您以乾淨和有條理的方式展示您的產品,使訪問者可以輕鬆瀏覽和找到他們正在尋找的內容。 此外,divi woocommerce 產品頁面模板可以通過讓搜索引擎更輕鬆地查找和索引您的產品來幫助提升您網站的搜索引擎優化 (SEO)。
您可以使用 WooCommerce 在您的網站上創建電子商務商店,因為它包含所有必要的花里胡哨。 WooCommerce 的默認頁面佈局,尤其是產品頁面,極其簡單,缺乏創意。 在本教程中,我們將學習如何使用 Divi 從頭開始創建 WooCommerce 產品頁面模板。 這個分步視頻向您展示瞭如何使用 Divi 創建 WooCommerce 產品頁面模板。 然後,您可以根據此時定義的標准設計和佈局您的產品。 可以將單個產品頁面或產品存檔頁面創建為單獨的模板。 在這兩列中,都會有很多模塊。

我們為每個模塊創建了一個專門的部分,以幫助您添加和修改它們。 首先,我們必須首先為模板定義產品圖像模塊。 在接下來的步驟中,我們將向產品頁面添加購物車通知。 產品名稱和評級應顯示在產品頁面上。 通過詳細說明產品的來源,用戶將能夠弄清楚他們在頁面上的位置。 您可以通過選擇添加新模塊按鈕,然後選擇 Woo Breadcrumbs 添加麵包屑。 還需要購物車通知和分隔線。
我們希望包含產品定價,以便向我們的用戶展示添加產品評級後產品的成本。 然後,在價格文本部分,包括 Woo Price 模塊。 下一步是從“設計”選項卡中選擇“為按鈕使用自定義樣式”。 要保持設計一致,請選擇紫色作為按鈕文本顏色。 現在是時候添加產品描述了。 如果您按佔位符 URL,它將顯示產品頁面的佔位符文本,但它會動態更新以反映頁面的內容。 在第 3 步中,您需要添加 Woo 相關產品模塊。
此步驟需要製作面板的第三排,用於放置產品托盤。 通過測試您的產品頁面模板來檢查一切是否正常。 首先,我們必須先保存我們的模板。 如果一切順利,您將能夠使用 Divi 創建自定義 WooCommerce 產品頁面模板。 Divi 強大的模塊和直觀的用戶界面使您可以輕鬆地立即創建具有專業外觀的設計。 為了使其盡可能短,我們在教程中只查看了一個設置。 因為每個模塊都有自己的一組設計設置和選項,所以可能性是無限的。
Divi產品頁面佈局
Divi 產品頁面佈局是一種旨在在在線商店中展示產品的佈局。 這種類型的佈局通常包括產品的大圖像,以及描述和價格。 大多數Divi 產品頁面佈局還包括一種讓客戶將產品添加到購物車的方法。
您可以使用 WooCommerce Layouts for Divi 創建在線商店。 Divi 商店附帶大量模板,可讓您自定義電子商務網站的各個方面,而不僅僅是 Divi 商店佈局。 產品頁面、商店頁面、購物車頁面和結帳頁面均可用。 這些佈局將通過創建用戶友好的 Divi 購物車頁面來幫助客戶,如果他們當前的購物車過時,他們可以在中間留下購買。 當您使用這些 Divi 結帳頁面模板時,您將可以完全控制從商店頁面到結帳頁面的整個網站。 通過使用此頁面上的按鈕,您可以連接到具有任何尺寸的屏幕分辨率的任何設備上的任何頁面。
Divi主題店佈局
如果您想使用 WordPress 建立在線商店,那麼您需要選擇一個包含電子商務功能的主題。 Divi 主題是許多在線商店的熱門選擇,因為它包括專門針對電子商務網站的預構建佈局。 此佈局包括產品網格、產品頁面、購物車等。 您可以輕鬆自定義 Divi 主題以匹配您商店的品牌和風格。
以下頁麵包含可用於 Divi 的電子商務佈局的完整列表。 Divi 的佈局是市場上任何平台中最實用的,其設計來自世界各地的設計師和開發人員。 Divi Builder 允許您將電子商務佈局直接導入您的 Divi 庫,讓您立即開始處理您的下一個 Divi 項目。 由於 Divi 主題與 WordPress 兼容,因此您可以在您的網站中使用上面顯示的電子商務佈局。 可以在側邊欄中使用搜索功能來查找和瀏覽此佈局目錄。 我們鼓勵您將DivieCommerce 佈局提交到 Divilayouts.com 目錄。
為什麼 Divi 是您電子商務網站的完美主題
Divi 是一個很好的電子商務主題。 Divi 是電子商務網站的絕佳平台。 有了它,您可以創建一個與 WooCommerce 集成的功能良好且多功能的網站。 無論您是想重新開始還是更新現有網站,Divi 都是一個絕佳的選擇。