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

Elementor WooCommerce 教學

使用 Elementor 建立 WooCommerce 單頁商品 內容綱要:

1. Elementor Templates 建立商品模板頁

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

3. 指定產品模板顯示條件

使用 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 行動優先索引的影響全面解析

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

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
分享在 twitter
Twitter
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top