如何自定義您的 WooCommerce 產品頁面

任何電子商務網站上的產品頁面都是最重要的部分。 因為它以有序的方式包含有關產品的所有詳細信息以及相關產品等附加信息。

默認的 WooCommerce 產品頁面適用於基本產品快速查看、添加到購物車和其他此類基本功能，但這在現代競爭激烈的電子商務環境中是不夠的。 作為最重要的頁面之一，產品頁面在任何 WooCommerce 構建的業務平台中都起著至關重要的作用。 但是，默認頁面並沒有剪切它。

定制產品頁面的重要性怎麼強調都不為過。

通過自定義您的產品頁面，您實際上是在為您的客戶提供獨特的購物體驗，這對於留住訪客和增加銷售數量也很重要。

在這篇文章中，我們將指導您完成如何使用 WooCommerce 產品頁面編輯器和自定義 WooCommerce 小部件來創建有吸引力的產品頁面等。

自定義 WooCommerce 產品頁面所需的工具？

首先，您需要在服務器上安裝最新版本的 WordPress ，最重要的是，必須安裝 WooCommerce 插件以適應所有商店/商店頁面功能。

您還需要一個功能驅動的電子商務 WordPress 主題，最後但同樣重要的是，您需要一個WooCommerce Elementor Shop Builder插件。 使用 Elementor 商店構建器插件，您將能夠完全控制和自定義各個商店頁面和市場產品網格、產品列表、產品比較塊等。

如何自定義 WooCommerce 產品頁面

我們希望您的服務器上已經安裝了 WordPress 的有效安裝和正常運行的電子商務主題。 現在，讓我們從所需的其他 WordPress 資源和工具開始逐步完成產品頁面定制的過程。

第 1 步：安裝 Elementor WooCommerce 附加插件

在這個使用各種元素和 WooCommerce 產品變體樣本自定義 WooCommerce 產品頁面的實時示例中，應該向客戶展示現代產品頁面，我們將使用類似於WooCommerce 產品頁面構建器可視化作曲家的東西 - 稱為 ShopReady。

ShopReady Elementor 商店構建器是一個令人驚嘆的包羅萬象的捆綁工具，用於創建強大的電子商務商店網站。 該插件附帶 105 多個專業製作的小部件，具有特定於用例的功能和工具。 例如，使用此電子商務插件，您可以創建一個功能性 WooCommerce 產品過濾器，該過濾器能夠過濾具有價格、尺寸、重量、顏色、評級、運輸等的產品。

要開始使用此 WooCommerce 插件插件，請先下載它。 為此，請登錄您的WordPress 儀表板，前往然後點擊安裝按鈕。

等到插件安裝成功，然後點擊激活。

ShopReady 菜單將出現在您的 WordPress 儀表板上。 從這裡，您可以訪問 Shop 頁面定制器插件提供的所有小部件、模塊和預設內容。

從這個簡單的菜單中，您可以啟用/禁用小部件、創建模板以及為各種功能插入 API 密鑰。

該插件的另一個重要功能是其用於 WooCommerce 功能的貨幣切換器。 要啟用此功能，您需要按照以下說明進行操作。

要添加由Exchangerate創建的貨幣 API 密鑰，請單擊 API 選項卡。

登錄您的 Exchangerate 帳戶儀表板並複制您的 API 密鑰以獲取它。 粘貼您的 API 密鑰後，轉到您的WordPress 儀表板 > ShopReady > API並單擊第 2 步：使用預設的產品頁面模板，或從頭開始創建一個

下一步是開始在產品頁面上工作，但在此之前，您需要將產品添加到您的 WooCommerce 網站。 如果您不知道如何操作，可以按照本指南 -如何 WooCommerce 快速添加產品。

現在開始為產品展示定制頁面，使用 ShopReady – WooCommerce Builder 通過轉到插件儀表板並單擊模板選項卡來創建一個簡單的產品頁面。 啟用產品模板類別並查找單一產品設置。 現在單擊編輯圖標。

您將被重定向到Elementor Editor屏幕。 現在開始自定義頁面，單擊加號以添加 Elementor 部分。 根據您希望頁面的外觀以及您希望使用的小部件，您可以將各種類型的 Elementor 部分添加到頁面中。

第 3 步：使用 Elementor 小部件自定義 WooCommerce 產品頁面

1. 添加產品標題

現在，由於您已經為 WooCommerce 產品頁面放置了基本的 Elementor 部分結構，您可以從添加產品標題開始。 為此，您需要在產品頁面上拖放產品標題小部件。

要顯示適當的產品標題，請單擊“內容”選項卡，在該選項卡下您將找到“編輯器刷新”選項。 從演示產品選項中選擇適當的產品名稱。

您必須從WooCommerce 產品儀表板添加或編輯適當的產品信息，以便此數據顯示適當的產品標題。

2. 將特色圖片添加到產品頁面

接下來，您將需要產品圖片庫和產品特色圖片。 為此，您可以使用多合一 Elementor電子商務插件提供的多個圖像小部件中的任何一個。

對於這個例子，我們將使用 ShopReady Thumbnail with Zoom 小部件，它的功能與標題所暗示的一樣。 使用此小部件，當客戶將鼠標懸停在您的產品圖片上時，您可以向他們展示您的產品圖片的 WooCommerce 產品懸停縮放版本。

和以前一樣，您可以從演示產品選項的內容選項卡中選擇正確的產品圖像。

3. 為定價小部件添加塊

電子商務產品頁面上的另一個重要項目是產品定價塊。 為此，您需要使用正確的更新來更新 WooCommerce 產品屬性，並使用 ShopReady價格小部件，該小部件必須放在產品標題下。

要顯示正確的價格，請從“內容”選項卡下的“演示產品”選項中選擇產品標題。

4. 添加產品描述

您還可以使用此 WooCommerce 產品附加組件產品描述小部件添加高度可定制的產品描述。 在樣式選項卡中，您可以選擇自定義產品描述對大眾的顯示方式。

5. 添加添加到購物車功能

添加到購物車是另一個非常重要的功能，允許您的客戶在進入結帳頁面之前在他們的購物車頁面上擁有多個產品。

要在您的電子商務商店頁面上擁有強大的添加到購物車功能，您可以使用 ShopReady 添加到購物車小部件。 使用此小部件，您可以讓您的客戶直接從“添加到購物車”塊中增加和減少他們的購物車產品數量。

您還可以從 WooCommerce 產品樣式Elementor Style選項卡排版、顏色、背景、邊距、填充等自定義 Elementor 添加到購物車按鈕。

6. 將元數據添加到產品頁面

為了為您的客戶提供更好的購物體驗，您應該使用您在向 WooCommerce 添加產品時添加的元數據和產品屬性實施 WooCommerce 產品過濾器。

要在您的產品頁面上展示這些數據，請搜索ShopReady Meta小部件並將其放在添加到購物車按鈕下。

當您從“內容”選項卡下的“演示產品”選項中選擇正確的產品標題時，您的產品標籤和元數據應該會正確顯示。

7. 將社交媒體分享按鈕添加到產品頁面

您的客戶還可以使用簡單的社交媒體分享按鈕塊直接從您的 WooCommerce 產品頁面在社交媒體上分享您的產品帖子。 您可以通過簡單地使用拖放 Elementor Social Share 小部件來創建它。

可以直接從“內容”選項卡使用任何社交媒體圖標、文本和可共享鏈接自定義該塊。 並且還可以自定義以從 Elementor Style選項卡更改社交分享塊的外觀。

你已經完成了 WooCommerce 產品頁面定制的基礎知識。

第 4 步：將相關產品添加到 WooCommerce 產品頁面

促進在線銷售的一個好方法是使用 WooCommerce 產品附加組件相關產品小部件在您的產品頁面上展示相關產品。 使用 ShopReady相關產品小部件，您可以分段創建令人驚嘆的產品滑塊塊。

要使用小部件，您只需將小部件拖放到單個產品塊下，然後分別選擇要在單個產品頁面下展示的每個產品。

綜上所述

我們希望這份內容豐富的指南能幫助您更廣泛地了解 WooCommerce 產品頁面模板定制以及如何利用這些出色的工具為您的電子商務網站增添更好的功能。

通過 WooCommerce 彈出產品詳細信息到產品比較表，電子商務市場所需的一切，ShopReady 都可以提供。 如果您對此主題有任何疑問，請隨時在下方的評論部分與我們聯繫。