如何使用 Elementor 編輯 WooCommerce 產品頁面

製作定制的單一產品頁面是讓您的電子商務商店脫穎而出的最佳方式之一，讓您的客戶在購物時擁有更多自由。

多虧了 WordPress，創建自定義產品頁面很容易。 您可以使用流行的頁面構建器 Elementor 的拖放 WooCommerce 小部件有效地為您的電子商務商店創建自定義產品頁面。

在本指南中，您將學習如何編輯 WooCommerce 產品頁面以及從頭開始設計自定義單個產品頁面。 在深入學習本教程之前，我們將看看為什麼您應該自定義 WooCommerce 產品頁面。

讓我們開始吧：

為什麼需要自定義 WooCommerce 產品頁面

WooCommerce 提供默認情況下最小且簡單的單個產品頁面。 使用此產品頁面，客戶可以輕鬆查看產品併購買。 但是，如果您想向單個產品頁面添加更多功能，例如產品附加組件、尺寸表、360 度圖像、產品視頻等，那麼您需要自定義單個產品頁面或編輯當前頁面。

自定義產品頁面在很多方面都有幫助。 以下是有關為您的電子商務商店創建自定義產品頁面的一些重要事實。

• 確保更好的用戶體驗
• 增加產品銷量
• 改進產品頁面設計
• 幫助客戶購買產品
• 抓住客戶的注意力
• 確保更好的產品視圖

如何編輯 WooCommerce 產品頁面（分步指南）

在我們博客的以下部分中，我們將向您展示如何以兩種簡單的方式編輯 WooCommerce 產品頁面。

1. 第一種方法：創建單個產品頁面模板
2. 第二種方法：從頭開始創建一個新的單個產品頁面

您需要安裝並激活以下插件來創建單個產品頁面：

先決條件：

• 元素（免費）
• 元素專業版

如果您是 Elementor 的新手，請閱讀此初學者分步指南。

第一種方法：創建單個產品頁面模板

在這種方法中，我們將向您展示如何使用 Elementor 預製模板創建和編輯單個產品頁面模板。

第 1 步：轉到模板主題生成器

要創建單個產品頁面模板，您需要定位到Dashboard–>Template–>Theme Builder。

第 2 步：單擊單個產品選項卡

您將在下一頁獲得單一產品頁面創建選項。 首先單擊單個產品選項卡。 然後您需要單擊添加新的單一產品按鈕。

第 3 步：創建模板

之後，您將獲得創建第一個頁面模板的選項。 您還可以在此區域中寫下您的模板名稱。 然後單擊創建模板按鈕。

第 4 步：選擇合適的預先設計的產品頁面模板

如果你想使用默認的 Elementor 模板，你可以在 Elementor 庫中選擇十個。 您可以根據需要選擇並安裝合適的模板。

如果您沒有足夠的時間來設計和自定義您的 WooCommerce 單一產品頁面，您可以使用 Elementor 預製模板和塊。 但在本指南中，您將向您展示如何使用 Elementor 從頭開始創建 WooCommerce 產品頁面。

第二種方法：從頭開始創建一個新的單個產品頁面

現在，是時候從頭開始設計一個新的產品頁面了。 如果您遵循以下指南，您將能夠在很短的時間內設計您的第一個產品頁面。

讓我們開始吧：

第 1 步：打開頁面到 Elementor 編輯器面板

創建單個產品頁面模板後，您需要將頁面打開到 Elementor 編輯器面板中。 在這裡，您會看到左側尺寸的小部件庫中提供了所有 WooCommerce 小部件。 要使用它們，您需要為您的產品頁面建立一個堅實的結構。 單擊紅色加號 (+) 圖標以添加列。

第 2 步：添加兩列

您可以從下面的屏幕截圖中看到，我們添加了兩列來設計我們的單個產品頁面。

第 3 步：添加必要的 WooCommerce 小部件來設計您的產品頁面

現在，是時候添加必要的 WooCommerce 小部件來設計產品頁面了。 在這裡，我們添加了這些小部件來設計我們的自定義產品頁面。

• 產品圖片小部件：您可以設置要顯示的圖片或畫廊
• 產品標題小部件：此小部件將幫助您自定義產品標題的樣式和佈局。
• WooCommerce 麵包屑小部件：自定義 WooCommerce 麵包屑的顏色和佈局。
• 簡短描述小部件：選擇您希望如何顯示產品的簡短描述。
• 產品價格小部件：控制產品價格的佈局和設計。
• 產品評級小部件：自定義產品的評級。 使其更加明顯，並確保客戶可以輕鬆了解用戶如何查看您的產品。
• Product Meta Widget : 設置文本之間的距離，堆疊或內聯顯示，並控制元數據的樣式
• 附加信息小部件：您可以使用此小部件添加產品的附加信息。
• 添加到購物車小部件：自定義添加到購物車按鈕的樣式和佈局。
• 產品數據選項卡小部件：控制產品數據選項卡的佈局。
• 追加銷售小部件：您可以為追加銷售產品創建自己的樣式。
• 產品相關小部件：如果您的網站上有類似的產品，則必須有相關的產品部分。 您可以使用此小部件對相關產品部分進行樣式化。

第 4 步：添加產品圖片小部件

首先，我們將 Product Image 小部件添加到右側列。 您可以在搜索字段中輸入“產品圖片”，然後將其拖放到列中。

第 5 步：自定義產品圖片樣式

您可以使用此小部件的樣式選項以自己的方式自定義產品圖像樣式。 在這裡，您可以打開和關閉Sale Flash。 您還可以添加產品圖片和縮略圖的邊框類型、邊框半徑等 管理產品圖片和縮略圖之間的間距。

第 6 步：添加 WooCommerce 麵包屑小部件

為了確保更好的用戶體驗，您需要在頁面上提供正確的導航。 這就是為什麼我們需要添加 WooCommerce 麵包屑小部件來添加我們產品頁面的導航。

第 7 步：自定義 WooCommerce 麵包屑

您再次使用樣式選項自定義麵包屑的設計。 在這裡，您可以設置麵包屑的文本顏色、鏈接顏色、地形和對齊方式。

第 8 步：添加產品標題小部件

您需要添加合適的產品標題，以便用戶輕鬆了解您的產品的全部內容。 因此，讓我們將產品標題添加到左側列中。

第 9 步：樣式產品標題小部件

在Style部分，您可以更改 Product Title 設計並管理 Text Color 、 Topography 、 Text Shadow ，並選擇混合模式。

第 10 步：添加簡短描述小部件

如果需要，您可以添加簡短描述小部件以顯示簡短的產品描述。 與其他小部件一樣，您可以從左側小部件區域找到它。 只需將小部件拖放到適合您產品頁面的位置即可。

第 11 步：樣式簡短描述

樣式區域還允許您更改小部件的默認設計。 您注意到我們已經更改了Typography Size並將其設置為15px 。

第 12 步：刪除簡短描述空間

您在這裡看到我們刪除了簡短描述小部件的額外空間。 轉到高級區域。 然後取消鏈接保證金 並添加所需的邊距。 在這裡，我們添加了-25px 邊距以移除額外的空間。

第 13 步：添加和設置產品價格小部件的樣式

讓我們添加Product Price小部件來顯示產品價格。 您可以在樣式部分添加您的自定義樣式。 在這裡，您會看到我們更改了產品價格的顏色。

第 14 步：添加和样式產品評級小部件

如果要顯示產品的客戶評分，則需要添加產品評分小部件。 您還可以使用樣式選項以自己的方式設置您的客戶產品評級。

第 15 步：添加和設置產品元小部件的樣式

您可以顯示產品元信息，例如產品類別等。為此，您需要添加Product Mata小部件。 您可以根據需要使用其樣式選項自定義小部件。

第 16 步：添加和設置附加信息小部件的樣式

如果您需要顯示您的產品附加信息，例如產品顏色和尺寸，您應該添加附加信息小部件。 您可以編輯小部件的樣式。 為此，請單擊樣式部分。 在這裡，您將獲得以您的方式更改當前樣式的基本選項。

第 17 步：添加和样式添加到購物車按鈕

添加購物車按鈕非常重要，這樣您的客戶才能購買產品。 通過添加“添加到購物車”小部件，您可以輕鬆地將購物車按鈕添加到您的單個產品頁面。 您還可以使用樣式選項根據您的選擇自定義購物車按鈕。

第 18 步：添加和样式化產品數據選項卡

如果要顯示產品數據選項卡，可以通過添加產品數據選項卡小部件並使用其樣式選項進行進一步自定義來實現。

第 19 步：添加追加銷售小部件

您可以通過將 Upsells 小部件添加到您的單個產品頁面來添加您的 upsell 產品。

第 20 步：樣式加售小部件

如果需要，您可以更改設計。 在樣式區域中，您將獲得必要的設置來自定義加售產品。 選項是。

• 產品
• 標題
• 盒子
• 銷售快閃

第 21 步：添加和样式相關產品小部件

與 Upsells 產品一樣，您也可以將相關產品添加到您的產品頁面。 您需要將產品相關小部件添加到您的產品頁面合適的區域。

我們的自定義 WooCommerce 單一產品頁面的最終預覽

完成單個產品頁面設計後，您會在下面看到我們 WooCommerce 產品頁面的最終外觀。

使用 HappyAddons WooCommerce 小部件設計電子商務網站

介紹 Happy Addons 的 WooCommerce 單一產品小部件

儘管您可以使用 Elementor 輕鬆創建獨特的產品頁面，但是，許多 Elementor 插件（如 Happy Addons）為您在設計和自定義 WooCommerce 產品頁面時提供了更大的靈活性。

我們將討論 Happy Addons 的全新獨家 WooCoommerce Single Product 小部件，該小部件先進、易於使用，並帶有現代的 premed 產品演示頁面佈局。

有了這個很棒的小部件，您可以在幾分鐘內裝飾您的產品頁面。 此外，您將獲得一些新設置，使您能夠有效地控制設計。 此外，您還可以獲得經典、標準和風景三種精美的設計皮膚來展示您的產品。

查看文檔以了解如何使用此小部件。

您還可以觀看 Single Product 小部件的演示視頻。

準備好創建您的單一產品頁面

有必要有一個設計良好的單品頁面，以確保在網上購物時有更好的用戶體驗。

在本博客中，我們討論瞭如何使用預製的 Elementor 模板編輯 WooCommerce 產品頁面。 此外，我們還展示瞭如何使用 Elementor 創建您自己的自定義單個產品頁面。

如果您對該博客仍有任何疑問，請隨時在下面的評論部分對我們發表評論。 如果您喜歡本指南，請在您的社交渠道上分享。

不要忘記訂閱我們的時事通訊，以獲得更多關於 WordPress、Elementor、WooCommerce 等的有趣文章。