SureCart 小技巧 – 輕鬆快速建立 WordPress 商品目錄網站 + 詢價功能

在架設電商網站時，有時我們只需要陳列商品，讓訪客清楚的知道提供的服務內容種類，讓有興趣的客戶進一步聯繫之後再提供服務與報價。

例如一些傳統產業的店家，因為產品的售價是跟著「時價」走的，會受到國際運費、原產地價格波動的影響而需要時常調整。這類店家需要網站作為形象、宣傳與行銷的管道，但為了避免同業比價、價格競爭的影響，適合的是「商品目錄」類型的網站。

這篇文章與大家分享如何建立具備詢價功能的 WordPress 商品目錄網站，基本上只需要免費版外掛就能輕鬆、快速地完成設定，這是完全不需要寫程式碼的方式。

• 使用免費版 SureCart 電子商務外掛，運用其高彈性的客製功能移除商品頁面的價格、購買功能。
• 使用免費版 Fluent Forms 表單外掛，當訪客送出詢價表單時，能即時抓到商品名稱與商品網址，方便店家管理。
• (非必要) 使用 Kadence Blocks Pro 付費版外掛，利用 Modal 區塊，將 Fluent Forms 設計的表單嵌入。

話不多說，我們直接開始！

SureCart 電子商務外掛

關於 SureCart 的安裝與設定，可以參考我們之前的文章。

延伸閱讀：「SureCart – 不會拖慢網站效能的 WordPress 電子商務、購物車方案」

新增商品 (無標價)

在新增、設定商品的時候，可以選擇不要輸入任何售價資訊在 Pricing 區域，這樣一來即使在商店 (商品列表) 頁面、單一商品頁面都不會顯示價格。

如果設定了價格，也可以按照後面的步驟將相關頁面中的價格資訊移除、不顯示。

商店、商品列表頁面

SureCart 除了商店 (Shop) 頁面之外，可以利用 Product List 區塊自行嵌入到任何頁面中作為商品列表 (Product Collection) 的展示之用。

如果在新增商品時沒有設定價格，這邊即使不移除「產品 項目 價格」也沒關係。如果有設定價格，就把「產品 項目 價格」移除即可。

這樣一來商店、商品列表頁面就不會顯示商品價格了。

單一商品頁面

SureCart 的商品設定中，提供了相當的彈性讓站長可以自由的決定商品在單一商品頁面中呈現的外觀、樣式，可以透過自訂單一商品頁面的範本來達成。

新增新的範本 (Template) 或以目前的範本進行修改。

單一商品頁面範本

打開範本設計頁面之後，可以看到預設的設計中包含了左右兩塊部分，分別是：

• 左 – 商品照片
• 右 – 商品的相關資訊

預設的設計可以預覽包含了多款式 (Variants)、定價方案、加入購物車按鈕、直接購買按鈕等功能。

可以透過區塊的清單檢視功能，選取不需要的區塊直接移除。

移除後就有乾淨無售價、無購買按鈕的單一商品頁面了！

如果在新增商品時沒有設定價格，這邊即使不移除 Product Price 也沒關係。如果有設定價格，就把 Product Price 移除即可。

Fluent Forms 表單外掛

接下來就是詢價表單了。

安裝並啟用 Fluent Forms 表單外掛之後，我們直接建立一個簡單的聯絡表單。

詢價表單

從表單範本中選擇 Basic Contact Form 之後，進入表單的編輯畫面。

接著修改表單內容：

• 移除 Subject，簡化表單設計 (當然留著也沒問題)
• 新增兩個隱藏欄位，自動抓取商品名稱與商品頁面網址：
  • 商品名稱 – embed_post.post_title
  • 商品頁面網址 – embed_post.permalink

Fluent Forms 是相當強大的表單外掛，在 Settings & Integrations 頁籤中可以設定電子郵件通知，以及表單送出之後的顯示訊息。

值得一提的是，即使不使用電子郵件通知功能，都能在 Fluent Forms 外掛的 Entries 頁面，直接看到訪客填寫送出的表單內容，對單純經營商品目錄的站長來說相當易於管理。

可以清楚的看到訪客詢問的：

• 商品名稱
• 商品連結
• 詢問內容

當然，還有訪客的一些基本資訊也都能一清二楚。

Kadence Blocks 區塊編輯器

接著我們使用 Kadence Blocks Pro 付費版外掛中的 Modal 區塊功能，將詢價按鈕嵌入到 SureCart 的單一商品頁面範本中，讓訪客按下 Modal 按鈕之後能在跳出的視窗中填寫詢問內容。

Modal 區塊

接續前面單一商品頁面範本的步驟，將 Kadence Blocks 的 Modal 區塊加入到想要的位置上。

修改按鈕描述，將 Fluent Forms 表單的短代碼嵌入到 Show Modal Content 的內容就完成了。

免花費方案

當然，如果不想要額外購買 Kadence Blocks 區塊編輯器外掛，可以選擇在指定的位置直接嵌入表單即可。

訪客可以直接填寫並送出表單，無須額外點擊按鈕叫出詢價表單。

商品目錄網站、詢價功能

完成上面說的簡單操作之後，我們就能在單一商品頁面看到乾淨、無售價、無購買按鈕，並且具備詢價表單功能的商品目錄網站了。

按下「詢問價格」按鈕之後，訪客就可以在表單中填寫並送出詢問內容。

填寫完成之後，也會有表單送出之後的顯示訊息。

結語

綜合以上的說明，我們知道了：

• 如何使用免費版 SureCart 電子商務外掛，運用其高彈性的客製功能移除商品頁面的價格、購買功能。
• 如何使用免費版 Fluent Forms 表單外掛，當訪客送出詢價表單時，能即時抓到商品名稱與商品網址，方便店家管理。
• 如何使用 Kadence Blocks Pro 付費版外掛，利用 Modal 區塊，將 Fluent Forms 設計的表單嵌入。

透過簡單的設定外掛功能就能輕鬆地完成具備詢價功能的 WordPress 商品目錄網站。

以往如果是使用 WooCommerce 製作商品目錄網站，為了嵌入詢價功能按鈕，都需要使用 Code Snippet 外掛加入 PHP 代碼才能完成，過程中也必須熟悉 WooCommerce 的 Hooks 勾點位置與名稱，才能將詢價功能按鈕嵌入到想要的位置。

希望這能對想要建立商品目錄網站卻又遲遲無法動手的站長們有些幫助。

如果有什麼心得、想法或建議，也歡迎大家加入社團一起討論唷！