WooCommerce 詢價表單：如何在商品頁新增「請求報價」按鈕？（YITH Request a Quote 外掛教學）

Q: 為何要新增「 請求報價 」按鈕？

有些需要客製化商品（木地板、磁磚、布料等 .. ）、或者販售多單位產品（批發、代購等 .. ）的 電商平台 ，可能會需要新增報價功能。 這樣顧客挑選完商品後，按下「 請求報價 / 詢價 」按鈕，即可透過報價單表格，與商家開始詢價＋報價流程，客製化訂單。

這是一篇完整的「 WooCommerce 詢價表單」設計教學，我們將使用 YITH WooCommerce Request a Quote 外掛，在商品頁添加詢價表單功能，製作詢價系統。

架設購物網站，有些客製化商品（木地板、磁磚、布料等 .. ）、多單位產品（批發、代購等 .. ），或者價格會持續變動的商品等..，就可能會需要將訂購方式，從「固定價格」變更為「報價」，方便站長管理。

將價格隱藏，並將購物車按鈕轉變為「詢價」按鈕，這樣顧客挑選完商品後，即可透過報價單表格，將自己的基本資料、與所想購買的商品和數量傳給站長，與站長進行詢價流程，開始下一步的客製化訂單。

文章會教大家：建立詢價表單、設定詢價按鈕、將購物車按鈕替換成詢價車，建立完整 WooCommerce 詢價系統。話不多說，趕快往下學習吧：）

建立網路商店需準備？
1. YITH WooCommerce Request a Quote 是什麼？
2. 購買安裝＋憑證激活
3. 新增＋設計「詢價」按鈕
4. 製作詢價表單欄位＆頁面＋正式上線
5. 管理詢價單＋傳送報價結果
6. 客戶查看詢價結果（面板設置）
常見問題
WordPress 學習資源

如何製作 WordPress 詢價 / 報價表單功能？（影片學習）

如何製作 WordPress 詢價 / 報價表單功能？（影片學習）

建立網路商店需準備？

架設購物網站和建立形象網站一樣，都需具備網站架設 3 要素，如下。

架設網站 3 要素
1. 網域申請（申請門牌）	2. 主機租用（租一塊地）	3. 網頁設計（搭建房子）

個人網域：就如同家裡門牌一樣，可以讓訪客順利搜尋到網站。
主機租用：網站需有一個放置的家，而主機就是網站的家，可依照個人需求挑選適合的主機。
網頁設計：有了個人網域＋虛擬主機，接下來就是做網頁設計，打造網站品牌風格。

對於新手來說，假如不知道如何一次完成上面 3 要素，Bluehost 是 WordPress 官方推薦的主機，能一次幫你處理完畢，費用便宜＋使用者體驗良好，很適合第一次入手。

新手入門，請參考 Bluehost 教學有完整架站流程（網域＋主機＋網頁設計）。

如果有更大的主機需求，擔心主機負擔不了網站流量，可參考 Cloudways 教學，它的主機性能更好，但費用會稍微多一點。

優質主機推薦有更完整的比較，這是我用了 10 幾家國內外主機所整理出來的，應該會減少你花費時間尋找的成本。

網頁設計部分，參考最棒電商佈景主題或搭配頁面編輯器，可做出客製化的網站風格。

至於系統操作熟練度，可參考 WordPress 後台教學、WooCommerce 完整教學，會幫助你打通任度二脈。

以上的教學文，包含完整的網域申請、主機租用、網頁設計、系統學習的全部流程，如果都具備好個人或公司網站了，就跟著我繼續學習吧：）

1. YITH WooCommerce Request a Quote 是什麼？

*YITH WooCommerce Request a Quote 詢價表單外掛*

YITH WooCommerce Request a Quote 是一款製作 WooCommerce 詢價表單功能外掛，可在商品頁隱藏價格和購物車按鈕，替換成詢價按鈕，讓客戶填寫詢價表單。學習如何使用可看這篇。

如果是客製化商品、虛擬服務、多單位商品等 .. 價格難以用單一定價販售的商品，就可能需要使用詢價功能，才更方便站長去販售自家商品。

YITH WooCommerce Request a Quote 可在前台商品頁面，顯示「詢價」按鈕，讓顧客連結至站長自定義的詢價表單，填寫需求並送出表單，還可自由決定是否隱藏商品價格、購物車按鈕。

除此之外，它還擁有更多報價功能，包含：自定義文本＆按鈕顏色、支持可變商品報價、缺貨時自動顯示「詢價」按鈕等 .. 。

可自定義詢價表單頁面＆欄位，若想額外串接表單，還可串接 Contact Form 7、Gravity Forms、WPForms 等 .. 多款 WordPress 表單外掛。更多 Contact Form 7 外掛教學。

*YITH WooCommerce Request a Quote 可自定義詢價表單頁面＆欄位*

客戶送出詢價表單後，站長可在後台檢視訂單資訊，並使用外掛生成的 PDF 模版，填寫報價結果（最後定價），將報價結果傳送 Email 給客戶。更多 WooCommerce 變更信件模版外掛。

客戶除了收取報價信件外，也可在帳戶頁面查看詢價流程，以及最後結果，並自由決定是否接受最後定價。

最後，還有更多方便站長管理的功能，像是：可後台手動新增訂單、將報價結果輸出檔案、設定報價截止日期等 .. 。

YITH WooCommerce Request a Quote 有免費以及付費版本，若要了解更多功能，站長可前往官方網站，評比功能差異，自行決定是否購買唷：）

立即取得 YITH WooCommerce Request a Quote

2. 購買安裝＋憑證激活

這章節，我們會使用 YITH 的其他款外掛，分別示範如何購買外掛＋激活憑證流程。

我們需要購買 YITH WooCommerce Request a Quote（可點此連結前往），並激活軟體憑證，才可開始使用此功能。

Step 1：購買 YITH 外掛（下面流程是使用不同 YITH 外掛做範例，其他外掛流程均相同）

前往 YITH 的外掛頁面，點擊「加進購物車」按鈕，進行外掛購買。

*將 YITH WooCommerce Request a Quote 加進購物車，進行下一步購買*

確認購買外掛名稱和數量後，點擊「 Check out 」。依序輸入會員資料，付款後點擊購買。

購買流程結束，可以在 YITH 後台下載外掛檔案包，接著就可以前往 WordPress 上傳外掛啦！

Step 2：上傳外掛

前往 WordPress 外掛 > 安裝外掛 > 上傳外掛，將檔案包上傳＋啟用。更多 WordPress 外掛安裝教學。

wordpress外掛安裝：上傳 wordpress 外掛（zip 的檔案格式） — *上傳 YITH WooCommerce Points And Rewards 外掛（zip 的檔案格式）*

Step 3：輸入憑證，激活外掛

安裝完成後，我們還需激活憑證，才可使用外掛。

前往 YITH，登入會員後進入後台，選擇 Licences ＆ Downloads，找到 Licence Key，點擊複製憑證。

WooCommerce購物金：進入 YITH 會員後台，複製憑證 — *進入 YITH 會員後台，找到並複製憑證*

複製好憑證後，我們前往 WordPress，在左側欄點擊「 YITH 」> Licenses Activation，分別填寫憑證 Email，以及貼上剛複製的憑證，進行激活。

WooCommerce購物金：分別填寫憑證 Email，以及貼上剛複製的憑證，進行激活。 — *分別填寫憑證 Email，以及貼上剛複製的憑證，進行激活。*

恭喜大家成功購買外掛＋憑證激活啦，那麼，接下來就進行使用教學吧：）

3. 新增＋設計「詢價」按鈕

購買安裝＋啟用完成後，事不宜遲，我們就來設定，在商品頁新增「詢價」按鈕、設計按鈕文本＋顏色，並且移除購物車按鈕和商品價格的設定吧！

新增詢價按鈕

在 WordPress 後台，找到 YITH > Requests a Quote，前往 General Options > General Options，選擇詢價按鈕顯示對象，這邊我勾選「 All users 所有用戶」，接著選擇要顯示「詢價」按鈕的商品頁面。

如果有需要排除的商品，選擇「 Product in the Exclusion List only 」並填入想要排除商品即可。

接著往下，繼續設定詢價按鈕的顯示設置。

勾選「 Show “Add to quote” on single product pages 在單一產品頁面顯示詢價按鈕」確保顯示按鈕。

接著勾選「 Hide “Add to cart” buttons 隱藏購物車按鈕」、「 Hide prices 隱藏價格」、「 Show “Add to quote” in other WooCommerce pages 在其他商品頁顯示詢價按鈕」。

以上選項，可依站長意思自行勾選。

接著選擇「 After click on “Add to quote” the user 客戶點擊詢價後動作」，最後儲存選項即可。

這樣我們就成功新增詢價按鈕囉！

設計詢價按鈕

前往 General Options > Button & Labels，這邊可設置按鈕的顏色以及文本。

這邊先分別選擇「添加到詢價單」、「請求詢價」按鈕樣式及顏色。

往下滑，可設置多個標籤文本，這邊先輸入「添加到詢價單」、「請求詢價」按鈕文本，進行儲存。

底下的標籤，站長也可依需求，先行進行填寫翻譯。

前台檢視詢價按鈕

完成新增＋設計按鈕後，我們到前台檢視成效。

前往商品列表頁，發現成功顯示「添加到詢價單」按鈕。

單一商品頁面也成功新增 WooCommerce 詢價按鈕囉：）

4. 製作詢價表單欄位＆頁面＋正式上線

按鈕上線後，接著需要繼續設置 WooCommerce 詢價表單欄位＆頁面設計。

YITH WooCommerce Request a Quote 可使用內建功能，製作詢價表單欄位，也客串接其他 WordPress 表單外掛，像是：Contact Form 7、Gravity Form、Ninja forms、WPForms 等 .. 。

我們會示範如何使用外掛內建功能，製作 WooCommerce 詢價表單，並將詢價表單和頁面上線。

Step1：製作詢價表單欄位

前往 Requests Quote Page > Form Options，若要串接其他表單外掛，可選擇「 Choose the form to show in “Request quote” page 」。

點擊「 Add fields 」，新增表單欄位。

這邊缺少讓客戶填寫詢價訂單請求的欄位，所以這邊示範新增「訂單需求」寬幅文字欄位。

依序填寫表單欄位資訊，這邊需要注意的選項有：「 Type 欄位類型」選擇「 Textarea 」、「 Label 前台顯示標籤」輸入欄位標題，這邊我填入「訂單需求」、「 Position 欄位寬度」選擇「 Wide 全寬」。

Name：後台顯示名稱。
Type：表單欄位類型。
Label：前台顯示標籤（欄位標題文本）。
Placeholder：該表單欄位的佔位符。
Position：欄位寬度選項。
Connect to：連接至 WooCommerce 客戶資料。
Validation：驗證。檢驗數字、英文組成，確認客戶填寫格式無誤。
Required：是否為必填選項。

底下還有其他詢價表單設定，像是：是否啟用註冊選項、Google reCAPTCHA 功能、串接 WooCommerce 客戶資料、日期 / 時間顯示方式等 .. 。

站長可依照自身需求進行設置，設置完成後點擊儲存，這樣就完成 WooCoommerce 詢價表單欄位新增囉！

Step2：設計 WooCommerce 詢價表單頁面

前往 Requests Quote Page > Page Options，需要先在「 “Request a quote” page 」指派頁面，在安裝好 YITH WooCommerce Request a Quote 後，外掛會自動指派，所以站長可不需特別新增頁面。

備註：若想自行新增＋設計詢價列表頁面，可新增頁面後，插入短代碼「 [yith_ywraq_request_quote] 」，再到「 “Request a quote” page 」選項進行指派。

然後選擇「 Page Layout 頁面佈局」，可選擇「左產品，右表單」或「上產品，下表單」兩種佈局樣式。

接著往下繼續設定詢價頁面設置，文章僅列出站長需要設置的選項，其餘選項站長可參考下圖翻譯，自行決定如何調整。

填寫「 Title before form 詢價表單標題」，在「 In product table, show 產品列表顯示信息」，勾選想讓客戶得知的產品資訊。

往下滑，選擇「 After request sending, show 送出表單後，進行動作」，有 3 種選項：「 A simple text message 跳出簡單訊息」、「 A detail page of quote request 顯示訂單資訊」、「 A specific “Thank you” page 跳轉感謝頁面」可供站長選擇。