iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

WordPress 初探 -- 據說是最經典 Avada 主題可以做些什麼呢?系列 第 29

29 - Avada + WooCommerce - 新增商品並放在頁面上

  • 分享至 

  • xImage
  •  
  1. 在左欄商品新增如下
    img-29-1

Img-29-2

  1. 預覽 / 發佈即可看到商品(內容)頁,頁面下方也有支援社群分享 ( FB / 推特 / pinterest / mail ),和相關(同分類商品)的快連。
    img-29-3

製作商品列表頁

  1. 跟 27 - 用 Avada 做一頁式網站也很可以 同樣步驟,不過這次是選一個商品列表頁的版 ( 同樣也可自己生成 )
    img-29-5

  2. 頁面本身已有一個預設的 “Woo Shortcodes”,下拉選單有

  • Order tracking (預設)
  • Product price / cart button
  • Product by SKU/ID
  • Products by SKU/ID
  • Product category slug
  • Recent products
  • Featured products
  • Shop Message
    可供選擇,選好後下方 Shortcode content 會自動跳出。
    img-29-6
    img-29-7
  1. 預設頁面長醬
    Img-29-8

  2. 另外新增一個用”類別"新增的方式,+Element 後 快速查找 Woo 選擇 Woo Product Carousel
    Img-29-9

  3. 選擇你要顯示的分類,調整完想要調整的設定後,按 SAVE
    (截圖顯示類別0可能是資料寫入時間太近也沒自動更新,不過不影響結果呈現)
    Img-29-10

  4. 稍微移動一下位置,把預設的往下挪,方便看到差別
    Img-29-11

  5. 結果頁(已捲動);自己是設定兩個單位做一列,四個為一列的是預設的編排,可以觀察到圖片最好在上傳之前就已經把長寬都固定好,以免會有對不齊的狀態
    Img-29-12


上一篇
28 - 電商的起始 - WooCommerce 設定精靈
下一篇
30 - 未完後記:還沒學完就這樣默默到了 30 天
系列文
WordPress 初探 -- 據說是最經典 Avada 主題可以做些什麼呢?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言