商品詳細資訊 : 使用Single Product 展示商品

以下是範例呈現

商品套版-主題建構器

以下工具只能使用於套版工具主題建構器

1.新增Single product :
請到主題建構器->Single product  ->Add New

2.新增商品資訊:
拖曳商品相關按鈕,本篇為商品工具相關介紹。相關教學: 購物車商品價格

3.套用版型於所有商品頁:
點選左側工具欄箭頭按鈕(發佈右邊的箭頭)->Display Condition,設置條件。

Product Title

以下是範例呈現

Product Title
  1. 拖放Product Title小工具:在元素庫中拖放「Product Title」小工具到頁面。
  2. 設置產品標題:選擇要顯示的產品標題。
  3. 自定義樣式:調整標題的顯示樣式和字體。
  4. 保存並預覽:保存更改並預覽頁面。

Product Meta

以下是範例呈現

Product Meta
  1. 拖放Product Meta小工具:從元素庫中將「Product Meta」小工具拖放到頁面。
  2. 設置元數據:配置要顯示的產品元數據,如SKU、分類等。
  3. 自定義樣式:調整元數據的顯示樣式。
  4. 保存並預覽:保存更改並預覽頁面。

Product Stock

以下是範例呈現

Product Stock

  1. 拖放Product Stock小工具:從元素庫中將「Product Stock」小工具拖放到頁面。
    (添加資料:後台->商品->商品資料->庫存,勾選追蹤數量並添加數量)
  2. 設置庫存顯示:選擇要顯示的產品庫存狀態。
  3. 自定義樣式:調整庫存顯示的樣式和佈局。
  4. 保存並預覽:保存更改並預覽頁面。

評分

以下是範例呈現

評分

  1. 拖放評分小工具:從元素庫中將「評分」小工具拖放到頁面。
  2. 設置評分顯示:選擇要顯示的產品評分。
  3. 自定義樣式:調整評分星星的顏色和大小。
  4. 保存並預覽:保存更改並預覽頁面。

Product Rating

以下是範例呈現

Elelmentor 元件庫

Product Rating

  1. 拖放Product Rating小工具:從元素庫中將「Product Rating」小工具拖放到頁面。
  2. 設置評分顯示:選擇要顯示的產品評分。
  3. 自定義樣式:調整評分星星的顏色和大小。
  4. 保存並預覽:保存更改並預覽頁面。

Additional Information

以下是範例呈現

Additional Information
  1. 拖放Additional Information小工具:從元素庫中將「Additional Information」小工具拖放到產品頁面。
  2. 設置顯示內容:選擇要顯示的產品額外信息。
  3. 自定義樣式:調整顯示樣式和佈局。
  4. 保存並預覽:保存更改並預覽頁面。

Product Data Tabs

以下是範例呈現

Product Data Tabs
  1. 拖放Product Data Tabs小工具:從元素庫中將「Product Data Tabs」小工具拖放到頁面。
  2. 設置數據標籤:配置要顯示的產品數據標籤。
  3. 自定義樣式:調整標籤的顯示樣式和佈局。
  4. 保存並預覽:保存更改並預覽頁面。

Product Images

以下是範例呈現

Product Images
  1. 拖放Product Images小工具:在元素庫中拖放「Product Images」小工具到頁面。
  2. 選擇產品圖像:設置要顯示的產品圖像。
  3. 自定義樣式:調整圖像的尺寸和顯示方式。
  4. 保存並預覽:保存更改並預覽頁面。

Product Related

以下是範例呈現

Elementor 的安裝與更新

Product Related

  1. 拖放Product Related小工具:在元素庫中拖放「Product Related」小工具到頁面。(僅能在loop item中使用)
  2. 設置相關產品:選擇要顯示的相關產品。
  3. 自定義樣式:調整產品顯示的佈局和樣式。
  4. 保存並預覽:保存更改並預覽頁面。

Upsells

Upsells

  1. 拖放Upsells小工具:在元素庫中拖放「Upsells」小工具到頁面。
    (添加資料:後台->商品->商品資料->連結資料->追加銷售,加入其他商品名稱)
  2. 設置追加銷售產品:選擇要顯示的追加銷售產品。
  3. 自定義樣式:調整顯示樣式和佈局。
  4. 保存並預覽:保存更改並預覽頁面。