專注於架設企業網站,分享WordPress教學和Elementor教學

如何用Elementor製作woocommerce產品詳情頁(視頻實例)

更新日期:2024-06-15
本系列教學

正版分銷:

90元/1個網站/2年

最先進的WordPress頁面編輯器,能夠快速創建高端的、完美的網站。 適合任何主題,任何頁面,任何設計。
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我

本文將逐步介紹如何使用Elementor pro製作woocommerce產品詳情頁模板,下面進入正題。

2021/5更新詳細的視頻教學

下方是2021年寫的簡單版圖文教學

  1. 點擊菜單:範本》添加新範本,選擇範本類型為single product,輸入範本名稱,譬如single product
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 9
  1. 點擊“創建模板”按鈕,可進入下圖所示的library頁面:
    • 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    • 選擇喜歡的模板,點擊insert按鈕即可導入;
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 8

導入後,系統會自動選擇一個產品數據嵌入,以便我們直觀看到效果,但依然有一些看不到內容的元素,譬如價格、加入購物車,那是因為我們上傳產品時沒有填寫對應內容

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 7

對不需要的元素可以使用右鍵刪除功能。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 6

如果你想更換一個產品以預覽效果,那麼按照下圖的數字順序操作,以更換產品。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 5

最後,點擊publish,點擊add condition為include:products,保存即可,然後我們就可以去預覽一下效果了。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 4

現在打開一個產品頁面預覽一下效果。

elementor single product 12

接下來你還可以對模板進行樣式調整、或者添加自定義的產品字段

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我