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

如何用ACF給產品詳情和產品列表添加自定義字段(實例)

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

正版分銷:

90元/1個網站/2年

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

使用ACF(advanced custom fields)外掛程式可以為woocommerce的產品分類、產品增加自定義字段,譬如視頻、QA等等,疊加運用Elementor Pro的範本功能,就可以製作進階的產品列表頁、產品詳情頁了。

給產品詳情頁增加自定義字段

首先,請安裝ACF(advanced custom fields)外掛,並啟用,按照下述步驟添加字段。

  1. 進入 字段 》 新建
  2. 添加字段組名稱,如產品
  3. 設置位置為:內容類型等於產品,這樣能實現所有產品頁面都會新增這個字段
  4. 點擊添加字段
如何用ACF給產品詳情和產品列表添加自定義字段(實例)

依次輸入字段標籤,譬如QA;字段名稱系統會根據字段標籤自動生成,建議都用英文,選擇字段類型為可視化編輯器,然後保存即可。

如何用ACF給產品詳情和產品列表添加自定義字段(實例)

接下來進入產品列表,編輯任一產品,會發現在頁面下方新增了QA字段,請填充內容,你也可以參照上述辦法再增加其他字段,譬如brochure、why choose us等等,

elementor與acf自定義產品欄位教學-6-1

然後,你需要用Elementor Pro製作single product範本,即產品詳情頁的範本,製作完成後,繼續用elementor編輯產品詳情頁範本,在heading下方再加入一個text editor元素,點擊dynamic tag如何用ACF給產品詳情和產品列表添加自定義字段(實例),選中acf field

elementor與acf自定義產品欄位教學-4

選中acf field後,在key中選擇剛才添加的字段 QA

elementor與acf自定義產品欄位教學-3

若你剛才添加了qa的產品並非當前預覽的產品,則你需要點擊左下角的齒輪setting一下預覽的產品,點擊apply&preview按鈕後即可看到qa已經添加成功了。

如何用ACF給產品詳情和產品列表添加自定義字段(實例)

這裡是我做的產品詳情示例頁面供參考:https://b2bdemo.loyseo.com/product/product-name/

給產品列表頁增加自定義字段

用ACF給產品分類增加的視頻字段

acf-woocommerce-2

添加完acf視頻字段後,在添加產品分類時,就能看到視頻字段了~

acf-woocommerce-3

用Elementor Pro製作的Product archive模板頁,然後:

  1. 向模板中添加video元素
  2. 將video元素的link設置為acf field,並選擇剛才添加的ACF視頻字段,只要在編輯產品分類信息時錄入視頻鏈接,那在查看這個產品分類頁面時,就會展示對應視頻
acf-woocommerce

這裡是我做的產品列表示例頁面供參考:https://b2bdemo.b2bdatastudio.com/product-category/product-category-name/

点赞

0 / 5 0

Your page rank:

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

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

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