內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略，使用 Elementor 建立 WooCommerce 單一商品頁 最主要的目的，是可以客製化我們想要顯示的單一商品頁，WooCommerce 預設的產品頁對於沒辦法自行加入程式碼的朋友來說，想要加入一段文字都會是滿困難的一件事情，但既然使用 WordPress 架站，就是要活用像 Elementor 這樣的頁面編輯器，透過簡單的拖拉方式就能為單頁產品加入更多更豐富的內容，而非單調的預設畫面。
在本篇文章中，將會說明如何使用 Elementor PRO 的單一產品頁模板及屬於 WooCommerce 的小工具來製作產品頁內容，從商品圖片、標題、商品描述、可變商品選項、加入購物車、價錢的顯示、相關商品、產品資訊都可以自由改變樣式，並且具有只需要改一組模板，所有商品都會套用的特點，即使之後商品多達上百件也不需要一個一個點開修改。在教學前建議可以先點擊官方影片查看基本操作方式，再看文章內容會更容易了解做法。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
下方是 Elementor PRO 建立 WooCommerce 單一商品頁的影片介紹，可以設定字幕自動翻譯為繁體中文。
Elementor Pro 建立單頁商品官方說明
https://elementor.com/blog/customize-woocommerce-product-page/
Elementor Page Builder 外掛下載點
https://wordpress.org/plugins/elementor/
Elementor Pro 官方網站
https://elementor.com/
(小提醒：必須要同時安裝 Elementor PRO 以及 WooCommerce 外掛才能會顯示 WooCommerce 小工具)
Elementor Templates 建立商品模板頁
第一步：確定 Elementor PRO 及 WooCommerce 外掛都有安裝並啟用，在 Theme Builder 選擇 Single Product ，再點選新增 Single Product 的按鈕。
第二步：為版型加入容易識別的名稱，點建立版型。
第三步： 一開始會先出現 Elementor 版型庫，可以選擇有的版型直接套用後再做微調，而不用自己建立每一個區塊，端看個人選擇，
第四步：在左側 Elementor 工具欄置頂會直接出現與單一產品頁相關的所有小工具，可以直接拖曳至空白區域。
加入 Product 小工具建構產品內容
第一步：進剛剛筆者加入的是 WooCommerce 網站導航小工具，點選後可以在樣式中找到文字、排版等選項做修改，如果說本來網站就有套用網站導航麵包屑，其實可以不需要加入。
第二步： 接下來開始建立產品內容區域，筆者以左圖右文的方式呈現，所以選擇兩區域的架構。
第三步： 左邊首先放入 Product Images ，這個小工具具有將商品圖片局部放大的效果，可以讓顧客看到產品細節，另外如果想要加入邊框、顯示折價標籤等都是可以的。如果說產品有設定商品圖庫的照片，也會以縮圖的方式顯示讓使用者自由切換不同的產品照片。
第四步：快速將需要的產品資訊拉到右邊的框架中，包含標題、價位、產品資訊、產品描述等。價位的部分如果是可變商品，且不同規格的價位都不同，價錢的部分就會變成顯示價格區間，可參考：WooCommerce 商品設定 – 資料欄位說明與可變商品建立。
第五步：樣在產品資訊的部分，預設會顯示英文，在編輯小工具中的樣式下方的 Captions 可以設定資料的前置字元所顯示的內容，可參考下圖。
第六步：點選 Add To Cart 建立加入購物車的按鈕，這裡會根據簡單商品與可變商品的選擇不同，建立對應的購物車按鈕。
可以看到圖中可變商品的下拉選單有一點跑版，是因為自動套用到主題的預設設定的關係，同樣在小工具設定的樣式中，可以分別針對加入購物車按鈕的每一個部分做細節調整。
第七步：最下方可以加入描述與額外資訊的產品資料切換頁籤，描述文字的來源是單一產品編輯時，最大的文字編輯框，額外資訊則是會顯示可變商品給定的屬性，比如尺寸、顏色等，比較可惜的是這兩個欄位是固定的，需要額外安裝外掛才能夠來做客製化，可參考：WooCommerce 自訂商品頁籤 教學 ，加入更多商品詳細資訊。
第八步：相關商品的小工具預設是顯示同樣分類的產品，如果說想要以不同的來源顯示就要使用別種文章列表類的小工具，以後有機會再介紹。
第九步：相關商品列表同樣可以設定細節，比如折扣的小圖，可以設定是否顯示、背景顏色、圓角弧度等。
指定模板顯示條件為單一商品
第一步：產品內容全部建立完成後，點選發布按鈕右方的箭頭小選單，選擇 Display Conditions （顯示條件）。
第二步： 在條件中選擇商品，其實他預設就是商品了，除非要指定分類下的商品才要套用此模板，才有需要做變更，完成後點選右下角的存擋。
第三步： 這是完成微調後的產品頁示意，筆者是按照 WooCommerce 預設版型來製作，當然你也可以按照自己喜歡的樣式來做客製。
結語：
除了本篇文章，我們也有說明如何使用 Elementor 建立商品列表頁的文章：Elementor WooCommerce 教學 – 使用小工具建立產品列表頁說明 ，相信看完這兩篇文章，應該可以幫助到有需求客制 WooCommerce 頁面朋友！
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
