在B2B 或跨境電商的場景裡，產品詳情頁往往是顧客留下或離開的分水嶺。頁面夠專業，訪客才會相信你具備交付能力；視覺層次清晰、資訊組織得當，詢盤轉換曲線自然向上。可惜WooCommerce自帶的模板千篇一律，想微調排版、分割模組、加入額外字段，一不小心就陷入程式碼泥沼。
Elementor剛好補上這塊短板。它把排版變成拖曳遊戲：從圖庫到參數表再到詢價按鈕，每個區塊都是可移動、可替換的積木，你不必懂PHP 或CSS，就能把“加入購物車”改成“獲取報價”，把單調的文字區域升級為圖文並茂的技術規格。換句話說，只要熟悉滑鼠，就能把預設模板打造成契合品牌調性的「線上樣本冊」。
接下來的這篇Elementor教學，會帶你逐步完成這一升級：先建立整體框架，再填充專屬字段，最後優化UI讓產品詳情頁面看上去既輕快又可信。
在開始本教學之前，你需要安裝並啟動Elementor Pro。你得掌握如何使用Elementor容器來進行頁面佈局。
1. 使用Elementor建立Single Product模板
我們可以在Templates > Add New > 選擇Single Product模板，為要建立的Single Product模板命名，然後點擊」Create Template」。
然後Elementor會帶我們進入到產品模板的編輯頁面，此處可以讓我們選擇模板。
我們可以選擇匯入模板，或關閉模板選擇頁面自行搭建。
不管怎樣，我們需要在編輯區域保留四個核心小工具：
- Product Images
- Product Title
- Short Description
- Button。價格小工具可以不用、加入購物車使用普通的button製作「聯絡我們」按鈕，點擊按鈕後跳到詢盤聯絡表單頁面。
使用Elementor的容器，依照自己的喜好進行排版。排版完成後，依照品牌視覺微調字體、間距與配色，一套簡潔的產品詳情頁模板就成型了。
你也可以跟著我這個結構來設計排版（這裡的產品內容需要進入到後台設定才會有，下面會講）：
接著我們要給單一產品填充訊息，才能夠在前端將產品資訊展示出來。
我們點選「Exit to WordPress」回到WordPress後台。
然後找到單一產品，透過Products > All Products中找到單一產品，點選“Edit”，進入單一產品的編輯頁面。
在這裡，我們需要完善我們的產品標題、產品描述、產品圖片以及其他產品信息，如下圖所示：
Post Content你看到的介面可能跟我上圖的不一樣，需要等到我們完成下面的第四步驟操作才行。
我們將這些內容完善以後，點擊保存，那麼下圖就是一個粗略的展示（還沒有給它的UI進行優化）：
想展示更多資訊時，隨時拖入其他小部件：技術參數可用文字編輯器或ACF 字段，類似產品用Products 組件，追加銷售放Up-sell，小常見問答可插入FAQ 手風琴。Product Content 小部件先暫留空，它將在步驟4 單獨做客製化。
2. 展示產品參數
我們在上一步搭建了產品詳情的模板。我們希望產品中展示產品主圖（Product Images）、產品名稱（Product Title）、產品描述（Short Description）聯絡我們按鈕（Button）等。
我們的B端產品如果要展示產品參數，那麼可以使用Additional Information或Product Data Tab這兩個小部件來展示這塊的內容:
- 將上述兩個小工具中的任一個這個小工具加入到產品詳情頁範本中。 Additional Information小工具可以展示產品Attributes裡面的屬性。 Product Data Tab則可以展示Product Description、Attributes、以及Review這三個部分的內容，可以依照自己的需求來選擇。
- 進入到特定的產品編輯後台，找到Attribute這個選項，加入我們想要的產品屬性。
設定完成以後我們回到單一產品的前端展示頁面，可以看到產品的屬性已經展現出來了。
我們使用了上面說的兩個小部件後，應用了該範本的每個產品都會展示它們對應的產品屬性。
這是Additional Information小工具的展示形式：
這是Product Data Tab小部件的展示形式：
當然，這兩個小部件給我們的樣式設定比較少，如果我們對這邊的樣式不滿意，那麼我們可以：
- 新增自訂CSS最佳化介面，需要前端HTML和CSS知識
- 使用表格外掛程式（如TablePress）來優化這部分的資訊展示形式。我們將在下面第四個章節（產品詳情個人化）中講解，需要用到Post Content小工具。
這兩個方法都能夠優化產品屬性的展示形式。但差異在於新增自訂CSS是所有應用了此範本的產品都能生效的；而在Post Content小工具中新增表格只針對單一產品詳情頁有效。
它們的作用範圍不同。
我個人是偏向使用Additional Information小部件+自訂CSS來優化產品屬性的展示的，會更加靈活；Product Data Tab小部件展示了三個部分的內容（Product Description – 產品描述、Attributes – 產品屬性、以及Review – 產品評論），如果想用這個小部件而且只想要展示產品屬性（Attributes），如果我想用這個小部件而且只想要展示方法來實現。
3. 發布產品詳情頁模板
我們對產品詳情頁進行樣式和內容調整，達到預期的效果以後，即可發布產品詳情頁模板，應用在特定的產品及分類中。
點選右上角「Publish」按鈕旁的下箭頭。
選擇“Display Conditions”，設定展示條件。
如果想要在所有產品中使用該模板，我們直接選擇「Products」即可。如果只是想應用在特定的分類下的產品，我們就選擇“In Category”，然後選擇特定分類。
設定完展示條件，點選右下角的Save & Close，然後點選「Publish」按鈕發布即可。
4. 個人化產品詳情頁
我們在第三步驟中已經將產品詳情頁的模板發布了，但是在現實情況中，每個產品都有不同的特性需要來重點展示，我們在使用產品詳情模板的時候是沒有辦法將這些「特性」展示出來的（除了產品參數我們可以用上面提到的小部件來展示），例如：適用的解決方案、產品特性介紹、產品著色頁和說明書下載等。
所以我們需要針對單一產品來進行個人化展示，才能充分突顯我們的產品賣點和體現出我們的產品優勢。
如果我們想要對產品詳情進行個人化設置，我們需要：
第一步：回到我們的產品詳情頁模板，將Post Content小工具拖曳放置在模板當中。
第二步：進入Elementor > Settings > General > Post Types中，將Products類型勾選上，點選Save Changes儲存Elementor的設定。
我們就可以使用Elementor編輯器對單一產品進行個人化編輯了。
第三步：開啟單一產品的後台編輯頁面
這時候我們就可以看到有「Edit with Elementor」這個選項了。
點擊進入到Elementor視覺化編輯頁面，對單一產品的進行個人化編輯。
*在此處使用Elementor編輯後的內容會展示在Post Content小工具裡面。
這裡說一下Product Content跟Short Description這兩個小工具的不同。
Short Description小工具所展示的內容對應產品的Product short description部分：
而Product Content小部件展示的是這下面的內容：
那我們點擊「Edit with Elementor」後就可以進入到視覺化編輯頁面，此紅框處能夠讓我們使用Elementor來突顯產品的個人化內容：
我們可以在此處新增包括但不限於以下內容：
- 產品的相關文件下載
- 產品的相關視頻
- 產品對應的解決方案
- 特性（Features）介紹
關於如何使用Elementor的容器和小工具來建立產品的個人化內容，可以看這篇Elementor容器和佈局教程。
比較容易混淆的一點是，Post Content小工具這裡面新增的內容是針對目前產品的，並且不會作用與其他使用該詳情頁範本的產品。
經過進一步微調介面設計，我們能夠將頁面呈現出清新而協調的視覺效果：
