如何自定義WooCommerce產品頁面

您是否使用WooCommerce來設計您的線上商店？那麼你應該知道超過300萬個網站也在這樣做。

那麼這是否意味著它們看起來都一樣？

好吧，如果您的網站有預設的WooCommerce模板，那麼可以。您的線上商店將看起來像成千上萬的其他商店。

您的獨特產品值得擁有獨特的定製WooCommerce產品頁面。不僅是產品頁面，您還需要自定義WooCommerce商店和其他頁面以獲得更好的使用者體驗。幸運的是，這不需要任何複雜的程式碼或過程。您可以通過編輯您的WooCommerce單一產品頁面來執行簡單的調整以改進您的頁面設計以補充您的產品。

在本文中，即使您沒有編碼知識，我也將解釋如何自定義WooCommerce產品頁面。

您需要什麼來自定義WooCommerce產品頁面？

您一定想知道為線上業務定製WooCommerce單一產品頁面需要什麼。好吧，我將展示的產品定製WooCommerce的過程不需要您購買數十個付費外掛或擴充套件。

除了安裝和啟用WooCommerce之外，您還需要在 WordPress 網站上啟用以下兩個外掛才能漂亮地編輯您的WooCommerce產品頁面：：

這兩個外掛都可以與WooCommerce外掛順利配合使用，並幫助您開始為所有新產品和舊產品設計和自定義單個產品頁面。使用ShopEngine可以更輕鬆地更改WooCommerce產品頁面或單個產品頁面佈局。因為您將在ShopEngine中獲得WooCommerce商店頁面模板，您可以在幾分鐘內建立和編輯WooCommerce商店頁面。

逐步自定義WooCommerce產品頁面

預設產品頁面的定製和調整沒有止境。不同型別的產品需要不同型別的定製。但是，在這個分步指南中，我將解釋您可以對WooCommerce產品頁面進行的關鍵自定義，以便您從所有產品頁面獲得更多銷售額。

安裝Elementor和ShopEngine

由於我們將使用Elementor和ShopEngine自定義預設WooCommerce產品頁面，因此第一步是從WordPress安裝外掛。在這裡瞭解如何安裝Elementor和ShopEngine以更改WooCommerce產品頁面或列表佈局。

Elementor安裝過程	ShopEngine 安裝過程
1. 轉到您的WordPress儀表盤。點選外掛➜ 安裝外掛 2. 在搜尋框中，輸入Elementor，然後選擇要安裝的Elementor Website Builder外掛。 3. 安裝後，點選啟用。	1. 轉到您的WordPress儀表盤。點選外掛➜ 安裝外掛 2. 在搜尋框中，輸入ShopEngine，然後選擇ShopEngine外掛進行安裝。 3. 安裝後，點選啟用。

建立Woocommerce單一產品頁面模板

轉到ShopEngine ➜ 模板➜Add New
為模板Name
選擇型別：Single
將模板設定為預設（YES）
單擊使用Elementor編輯

建立Woocommerce單一產品頁面模板

在這個產品定製WooCommerce教學中，我將展示如何從頭開始構建WooCommerce產品頁面。這就是我選擇空白模板的原因。但是，ShopEngine提供了9 種以上專業外觀的預建單品模板，您可以匯入和使用這些模板。

選擇結構以更改您的WooCommerce單一產品頁面佈局

從Elementor中選擇您喜歡的結構，開始製作您商店的單個Elementor WooCommerce產品頁面。

WooCommerce產品頁面結構

選擇結構後，您可以根據自己的喜好以任意順序拖放任何小工具。建立自定義WooCommerce產品頁面ShopEngine提供了20多個小工具，包括產品圖片、產品標題、產品價格、產品庫存、產品標籤等。

注意：在開始構建產品頁面之前，請確保您要使用的小工具已啟用。您可以從ShopEngine ⇒ Widgets ⇒ Single中執行此操作，開啟您需要的小工具並單擊save changes。

在這裡，我將向您展示如何使用一些單品小工具。您可以按照相同的步驟使用相同的小工具或一組不同的小工具。

自定義產品價格

在Elementor上搜尋“Product Price”小工具。從“ShopEngine Single Product”區塊拖放產品價格小工具以製作WooCommerce自定義產品頁面。

自定義WooCommerce產品價格

此價格區塊小工具將幫助您：

將產品價格對齊設定為左、中和右
更改主要、次要、文字、強調色
使用顏色選擇器選項以您喜歡的顏色設計產品標籤
更改排版系列、排版大小和重量、裝飾、行高、字母間距和其他與排版相關的設定。

自定義WooCommerce產品標題

在Elementor上搜尋“Product Title”小工具。從“ShopEngine Single Product”區塊拖放產品標題小工具以製作和自定義您的WooCommerce產品頁面。這些對WooCommerce單一產品頁面的簡單編輯可以通過提供更好的使用者體驗來實現巨大的轉換。

從產品標題欄的樣式設定中，您可以進行以下自定義：

將您的產品標題HTML標記從H1設定為H6。
將產品標題對齊設定為向右、向左或居中。
更改產品標題顏色
設定排版的所有方面

新增麵包屑

使用ShopEngine新增麵包屑

麵包屑會讓購物者知道他們在您網站上的位置。將麵包屑新增到您的產品頁面是一個明智的決定。新增麵包屑的方法如下：

在Elementor上搜尋“Breadcrumbs”小工具。將麵包屑小工具從“ShopEngine Single Product”區塊拖放到Elementor內容區域。

在樣式設定選項卡中，您可以：

設定麵包屑的文字顏色、連結顏色、連結懸停顏色
選擇允許您更改WooCommerce產品或類別頁面佈局的麵包屑的排版、對齊方式、圖示、圖示大小和值之間的空間。

自定義產品附加資訊

簡短的描述可能不適合您的產品。當簡短的描述不夠時，額外的產品資訊將增加更多銷售的可能性。

在Elementor上搜尋“Product Additional Information”小工具以編輯WooCommerce產品頁面。將小工具從“ShopEngine Single Product”塊拖放到內容區域以更改WooCommerce產品頁面佈局。

以下是您可以利用小工具控制的內容的列表：

更改標題的對齊方式、顏色、版式和邊距
更改標籤的顏色、版式、背景和寬度
更改值的顏色、背景和版式
重置表格對齊和填充
設定您喜歡的排版系列

利用產品追加銷售

自定義產品加售

產品追加銷售小工具將幫助您向買家推薦更多產品。追加銷售產品將激發您的買家從您的商店購買更多產品，從而有助於增加利潤。

在Elementor上搜尋“Product Upsells”小工具。從“ShopEngine Single Product”區塊中拖放小工具。這個經過編輯的WooCommerce產品頁面佈局將大大提高您的轉化率。

在內容和樣式選項卡中，您可以：

設定要顯示的產品圖片的數量
啟用/禁用滑塊、迴圈和自動播放
顯示/隱藏標題、促銷快訊、正常價格、箭頭、圓點和購物車按鈕
設定滑塊列、速度和箭頭大小
定義點大小或活動點大小
按選項設定順序
設定列間距
更改背景顏色、文字對齊方式等。

通過更改您的WooCommerce產品或類別頁面佈局，這些所有自定義項將使您的產品頁面對您的客戶更具吸引力。

自定義產品評級

在您的產品頁面上顯示產品評分將幫助您的訪問者根據使用者評分找到最佳產品。

利用ShopEngine中的Show Product Rating小工具並進行以下任何更改：

選擇評級星顏色和空星顏色
設定星形大小和間隙
檢視連結顏色、連結懸停顏色和排版
定義左側間距和對齊方式

自定義產品元

自定義WooCommerce產品元

只需將產品元小工具拖放到Elementor內容區域即可開始自定義您的產品元設定。

使用產品元小工具，您可以顯示或隱藏產品SKU、類別和標籤。最重要的是，您還可以在幾分鐘內更改佈局、對齊方式、填充、排版、連結懸停顏色和內容顏色。

更新產品描述樣式

拖放ShopEngine的產品描述小工具，對描述的顏色、排版和對齊方式進行任何您喜歡的更改。

自定義新增到購物車按鈕

確保您的產品頁面具有出色的新增到購物車按鈕。這肯定會在很大程度上提高轉化率。

使用Elementor上ShopEngine的新增到購物車小工具，您可以更改數量圖示、按鈕位置等。

此外，您可以使用樣式設定執行A/B測試，以找出最適合您更改後的WooCommerce產品頁面佈局的方法。

新增產品分享選項

在您的WooCommerce產品頁面上新增產品共享按鈕是您現在可以實施的好主意。當購物者與他們的親朋好友分享產品資料時，您將獲得更多來自新使用者的銷售，而無需任何付費廣告。

利用ShopEngine的產品分享小工具將可自定義的產品共享選項新增到您的WooCommerce產品頁面。但是，您必須使用像WP Social這樣的社交分享外掛才能享受此選項。

自定義產品評論小工具

將產品評論小工具放在產品頁面的正確位置，以便產品使用者可以留下他們的評分和評論。它還可以完美地推廣您的品牌。

使用Elementor區塊中的ShopEngine“Product Review”小工具，您可以對產品評論部分進行以下更改：

更改產品評論標題的顏色和排版
設定單個評論邊框型別、寬度、顏色和填充
設定作者頭像寬度、作者姓名顏色、排版、稽覈日期顏色、排版
與排版一起檢視內容顏色
更改預設星形顏色和空星形顏色
自定義評論表單
選擇您喜歡的字型大小和字型系列等。

自定義產品庫存狀態

使用ShopEngine的“Product Stock”小工具，您可以自定義庫存或現有產品文字和圖示以及WooCommerce產品頁面的顏色、排版和對齊方式。

最重要的是，您可以完全自由地設定“缺貨”和“可用於延期交貨狀態”的圖示、對齊方式、顏色和排版。

新增和自定義產品選項卡

新增產品選項卡可讓您的客戶提供有關您在WooCommerce商店銷售的產品的更多資訊。使用ShopEngine，您可以新增自定義選項卡並對其進行自定義以滿足您的需求。

只需從Elementor上的ShopEngine單一產品區塊拖放“Product Tabs”小工具，您編輯的WooCommerce產品頁面就可以使用了。您可以使用小工具控制產品選項卡的以下方面：

導航樣式：排版、選單顏色、活動選單顏色、導航指示器顏色和邊框、選單間距、框陰影、邊框型別、線寬、顏色和填充。
選項卡內容：顯示或隱藏選項卡內容標題，更改選項卡內容標題顏色和排版，設定選項卡內容換行填充。
資訊列表：自定義屬性顏色、值顏色和表格資料排版。
平均評分：嘗試評分標題、評分總數和評分計數排版和顏色。
評論風格：自定義評分顏色、空評分顏色、日期、許可權和描述顏色、日期排版和描述排版。
稽覈表單：更改表單標籤顏色、標籤排版、輸入邊框顏色、輸入焦點邊框顏色、輸入排版、訊息顏色和所需顏色。
提交按鈕：設定填充、邊框半徑、按鈕排版、框陰影、顏色和背景。

顯示相關產品

顯示相關產品供您的客戶購買是您可以在您的電子商務網站上實施的一個了不起的想法。WooCommerce產品頁面的ShopEngine“Related Product”小工具將幫助您顯示具有以下設定的相關產品：

設定要顯示的產品數量
啟用/禁用滑塊
顯示/隱藏標題、促銷快訊、正常價格和購物車按鈕。
設定滑塊列數
更改背景顏色
設定滑塊速度等。

預覽響應模式的設定或更改

響應模式下的預覽設定

由於現在大多數客戶都使用移動裝置從線上商店購買，因此請確保您商店的產品頁面可以無縫地為移動裝置和平板電腦檢視器工作。

利用Elementor標記為響應模式的按鈕來檢視全寬產品頁面的更改在移動和桌面裝置上的外觀。

如果您發現移動裝置和平板電腦檢視存在一些不一致或問題，請修復這些問題以供移動裝置檢視。

完成為WooCommerce產品頁面新增和自定義所需的小工具並預覽裝置的產品頁面佈局後，單擊Elementor的“更新”按鈕。

而已！按照我在此產品定製WooCommerce教學中分享的步驟進行操作。

答對了！您編輯的WooCommerce產品頁面現在已針對移動裝置進行了優化並準備上線。

優化產品頁面以提高轉化率的5種方法

自定義WooCommerce產品頁面後，就該優化頁面了。優化良好的產品頁面可以立即促進銷售。

為了獲得良好的轉化率，重要的是通過更改WooCommerce產品頁面佈局來優化產品頁面。以下是您可以遵循的 5 種方法，以最大限度地提高線上商店的轉化率和收入。

維護資訊層次結構

WooCommerce產品頁面中的資訊層次結構

確保您設計了維護資訊層次結構的WooCommerce單一產品頁面。

例如，將麵包屑放在所有資訊的頂部是一種常見的做法。麵包屑通常後跟產品標題和其他與產品相關的資訊，如評論或描述。在大多數線上商店中，您會在頁面左側看到帶有圖示以檢視放大檢視的影象。

此外，請確保您在新編輯的WooCommerce產品頁面上提供的資訊讓購物者對您要出售的產品有一個完整的瞭解。

使用高質量影象

使用高質量的產品圖片

除非您巧妙地將它們展示給您的客戶，否則只有擁有好的產品才能為您的口袋帶來更多的錢。產品圖片是在產品頁面和商店頁面內向目標受眾展示產品的絕佳方式。

但是，如果您的圖片平庸、晦澀或角度錯誤，您就不能對它們抱有太大期望。當您釋出產品圖片時，請確保它們清晰、以產品為中心並且從正確的角度拍攝。

新增上下文產品影象可以在適當的環境中展示您的產品。例如，捕捉廚房中廚房電器的圖片，向您的客戶展示這些電器與他們廚房的完美匹配程度。

聘請專業攝影師為產品相簿拍攝詳細的產品影象。如果是實物產品，最好從各個角度捕捉同一產品。它將幫助客戶更清楚地看到產品零件。最重要的是，它使客戶對購買充滿信心。

最後但並非最不重要的一點是，我建議使用高解析度的產品相簿圖片。儘管影象可能會使您的WooCommerce產品頁面變慢一點，但您可以使用任何免費的影象優化外掛（如Smush ）將影響降到最低。

WordPress的影象優化外掛

寫一個殺手級產品描述

令人信服且適當的產品細節或描述在線上銷售中起著重要作用。確保產品描述提及關鍵產品資訊。順便說一句，這還不夠。這些資訊也應該易於閱讀和切中要害。您可以使用專案符號格式來一一顯示資訊。

記住，你不需要一直很正式。如果它適合產品類別，您可以使用有趣、平易近人且令人愉快的另類聲音來編輯產品頁面WooCommerce。

這是來自Picky Bars的早餐熱狗套餐的吸引人的描述：

殺手級產品描述示例

最後的建議是，在您編寫產品描述時，請注意產品的各種使用選項。它將幫助潛在客戶瞭解產品是否能滿足他們的需求，或者他們是否需要其他東西。

以正確的方式定價

無論您銷售什麼型別的產品，價格始終是您客戶的一個重要因素。定價以及將其放置在自定義WooCommerce產品頁面上的方式會影響他們的購買決定。

為了使您的定價易於檢視，您可以使用大字型。使定價文字加粗或使用對比色也可能適合您。

突出顯示折扣並顯示正常價格，然後顯示新價格。這種定製和更改的WooCommerce產品頁面佈局將提供易於檢視的使用者體驗。

以下是Picky Bars如何做到這一點的示例：

如何在您的WooCommerce產品頁面上定價

如果您的客戶無法清楚地看到價格，您應該重新考慮您為編輯WooCommerce產品頁面所做的設計定製。

使用頁面SEO優化WooCommerce產品頁面

為了讓您的WooCommerce產品頁面獲得更多自然流量，使用頁面SEO技術非常重要。使用正確的標題標籤、元描述、產品圖片的替代標籤、關鍵字、描述和其他頁面SEO因素來獲得更多客戶，從而提高轉化率。

關鍵的頁面SEO因素

更多指南：

需要更多WooCommerce頁面定製指南？閱讀以下部落格以自定義和更改您的WooCommerce商店和其他頁面：

通過這些部落格，您將瞭解如何設定和更改WooCommerce自定義商店、購物車、我的帳戶、結帳頁面。

小結

無論您如何自定義線上商店的WooCommerce產品頁面。無論是Elementor WooCommerce產品頁面還是預設頁面，請確保您所做的更改是使用者友好且直觀的。在自定義和編輯產品頁面WooCommerce時，請確保遵循一致性、相關性和上下文。但是，您編輯和更改的WooCommerce產品頁面佈局需要針對裝置進行高度優化。

一開始，自定義您的WooCommerce單一產品頁面似乎是一項艱鉅的任務。但是，如果您有Elementor頁面構建器和ShopEngine，您應該沒有壓力。

ShopEngine教程 WooCommerce產品頁面 WooCommerce自定義

如何自定義WooCommerce產品頁面

您需要什麼來自定義WooCommerce產品頁面？