如何使用 Elementor 建立 WooCommerce 單一商品頁?圖文步驟教學

Elementor WooCommerce 教學

歡迎回到鵠學苑 — 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 WooCommerce 教學

第二步:為版型加入容易識別的名稱,點建立版型。

Elementor WooCommerce 教學

第三步: 一開始會先出現 Elementor 版型庫,可以選擇有的版型直接套用後再做微調,而不用自己建立每一個區塊,端看個人選擇,

Elementor WooCommerce 教學

第四步:在左側 Elementor 工具欄置頂會直接出現與單一產品頁相關的所有小工具,可以直接拖曳至空白區域。

Elementor WooCommerce 教學

加入 Product 小工具建構產品內容

第一步:進剛剛筆者加入的是 WooCommerce 網站導航小工具,點選後可以在樣式中找到文字、排版等選項做修改,如果說本來網站就有套用網站導航麵包屑,其實可以不需要加入。

Elementor WooCommerce 教學

第二步: 接下來開始建立產品內容區域,筆者以左圖右文的方式呈現,所以選擇兩區域的架構。

Elementor WooCommerce 教學

第三步: 左邊首先放入 Product Images ,這個小工具具有將商品圖片局部放大的效果,可以讓顧客看到產品細節,另外如果想要加入邊框、顯示折價標籤等都是可以的。如果說產品有設定商品圖庫的照片,也會以縮圖的方式顯示讓使用者自由切換不同的產品照片。

Elementor WooCommerce 教學

第四步:快速將需要的產品資訊拉到右邊的框架中,包含標題、價位、產品資訊、產品描述等。價位的部分如果是可變商品,且不同規格的價位都不同,價錢的部分就會變成顯示價格區間,可參考:WooCommerce 商品設定 – 資料欄位說明與可變商品建立

Elementor WooCommerce 教學

第五步:樣在產品資訊的部分,預設會顯示英文,在編輯小工具中的樣式下方的 Captions 可以設定資料的前置字元所顯示的內容,可參考下圖。

Elementor WooCommerce 教學

第六步:點選 Add To Cart 建立加入購物車的按鈕,這裡會根據簡單商品與可變商品的選擇不同,建立對應的購物車按鈕。

Elementor WooCommerce 教學

可以看到圖中可變商品的下拉選單有一點跑版,是因為自動套用到主題的預設設定的關係,同樣在小工具設定的樣式中,可以分別針對加入購物車按鈕的每一個部分做細節調整。

Elementor WooCommerce 教學

第七步:最下方可以加入描述與額外資訊的產品資料切換頁籤,描述文字的來源是單一產品編輯時,最大的文字編輯框,額外資訊則是會顯示可變商品給定的屬性,比如尺寸、顏色等,比較可惜的是這兩個欄位是固定的,需要額外安裝外掛才能夠來做客製化,可參考:WooCommerce 自訂商品頁籤 教學 ,加入更多商品詳細資訊

Elementor WooCommerce 教學

第八步:相關商品的小工具預設是顯示同樣分類的產品,如果說想要以不同的來源顯示就要使用別種文章列表類的小工具,以後有機會再介紹。

Elementor WooCommerce 教學

第九步:相關商品列表同樣可以設定細節,比如折扣的小圖,可以設定是否顯示、背景顏色、圓角弧度等。

Elementor WooCommerce 教學

指定模板顯示條件為單一商品

第一步:產品內容全部建立完成後,點選發布按鈕右方的箭頭小選單,選擇 Display Conditions (顯示條件)。

Elementor WooCommerce 教學

第二步: 在條件中選擇商品,其實他預設就是商品了,除非要指定分類下的商品才要套用此模板,才有需要做變更,完成後點選右下角的存擋。

Elementor WooCommerce 教學

第三步: 這是完成微調後的產品頁示意,筆者是按照 WooCommerce 預設版型來製作,當然你也可以按照自己喜歡的樣式來做客製。

Elementor WooCommerce 教學

結語:

除了本篇文章,我們也有說明如何使用 Elementor 建立商品列表頁的文章:Elementor WooCommerce 教學 – 使用小工具建立產品列表頁說明 ,相信看完這兩篇文章,應該可以幫助到有需求客制 WooCommerce 頁面朋友!

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

Elementor 及 WooCommerce 相關教學文章:

網站架設知識推薦閱讀:

新冠肺炎大流行 – 企業線上數位轉型網站架設重點與優勢分析

RWD 網頁設計 對 Google 行動優先索引的影響全面解析

網頁設計公司挑選參考?架設網站時應該具備的基礎功能分析

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

回到頂端