型錄網站怎麼做?不顯示加入購物車按鈕&價格的方法(YITH WooCommerce Catalog Mode 教學)

型錄網站怎麼做?不顯示加入購物車按鈕&價格的方法(YITH WooCommerce Catalog Mode 教學)

許多人都已開始使用 WordPress 自架電商網站,但你知道除了一般的購物網站外,還能製作型錄網站嗎?

型錄網站是一種不包含金流購物功能的商品頁面,主要用於商品展示,單純增加商家產品曝光的機會。

今天我們要推薦一款由知名外掛商 YITH 所推出的型錄模式外掛,使用這款外掛,就能輕鬆隱藏購物車按鈕和商品價格,製作型錄網站。更多 YITH 電商外掛推薦

那我們開始吧:)

型錄網站怎麼做?不想顯示加入購物車按鈕和價格的方法(YITH 外掛教學)

建立網路商店需準備?

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

架設網站 3 要素
1. 網域申請
(申請門牌)
2. 主機租用
(租一塊地)
3. 網頁設計
(搭建房子)
  • 個人網域:就如同家裡門牌一樣,可以讓訪客順利搜尋到網站。
  • 主機租用:網站需有一個放置的家,而主機就是網站的家,可依照個人需求挑選適合的主機。
  • 網頁設計:有了個人網域+虛擬主機,接下來就是做網頁設計,打造網站品牌風格。

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

新手入門,請參考 Bluehost 教學 有完整架站流程(網域+主機+網頁設計)。

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

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

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

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

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


什麼是型錄網站 vs 購物模式差別?

什麼是型錄網站 vs 購物模式差別?

首先先帶各位了解什麼是型錄模式,以及它和一般的購物模式有什麼差別,好讓大家了解自己適合什麼樣的網站模式。

什麼是型錄網站?

型錄網站範例

型錄網站是一種商家展示商品的方式,在型錄模式下,網站主要只呈現商品照片及資訊(描述、材質、產地等..)。

與傳統包含購物車和結帳功能的電商網站不同,通常型錄模式只注重於讓用戶了解商品,但不直接在網上提供任何的購買功能。若是瀏覽者想要購買商品,需要利用其他方式進行訂購,例如私訊店家或填寫網站表單。

包含詢價表單的型錄網站

製作客製化商品的店家,因價格會根據顧客需求有所不同,需要透過討論才能報價,這時候就可以使用型錄模式,隱藏商品價格欄位。

或是新商品即將推出,還沒有開放訂購,只是想先釋出商品預告,也可以使用型錄模式展示商品,讓顧客搶先看,像百貨公司的週年慶雜誌一樣。

雖然型錄模式網站不提供直接的線上結帳功能,但它提供了完整的商品展示,因此通常還是會促使顧客聯絡商家,進行交易。

型錄模式 vs 購物模式差別

不論是型錄模式或一般的購物模式,都有各自的優點特色,以下列出型錄模式與購物模式各自的特點及適合使用的狀況。

型錄模式:

  • 主要向顧客展示商品,提供商品資訊
  • 不提供購物車功能
  • 無法結帳購買商品
  • 商品報價型態較為複雜,或是需要客服說明等 .. 商品類型

購物模式:

  • 提供購物車功能,顧客可以隨時查看選擇的商品、修改數量
  • 可以進行結帳功能,網上直接購買商品
  • 適合希望在網站上直接販售商品的店家

型錄模式與購物模式最大的差別就是,型錄模式通常不包含消費功能,購物模式則包含完整的購物車、金流交易結帳等..功能。

這邊再將型錄模式與購物模式的主要差異整理成表格,幫助你更清楚辨識這兩者有什麼不同:)

型錄模式購物模式
商品展示功能
購物車功能
結帳功能
適合使用的狀況商品報價型態較為複雜需搭配客服說明的商品希望直接促成線上交易的店家
型錄模式與購物模式的主要差異

總結來說,型錄模式重於商品的展示,購物模式強調直接完成線上購物結帳,該選擇哪種模式則取決於店家的業務需求、受眾目標及產品特性。

那麼接下來,我將帶大家使用 YITH WooCommerce Catalog Mode 外掛,製作型錄模式網站。


YITH WooCommerce Catalog Mode 是什麼?

YITH 型錄模式外掛

YITH WooCommerce Catalog Mode 是一款可以設定商品呈現「 型錄模式 」的外掛。

它可以把商品金額、購物車按鈕隱藏( 取消 WooCommerce 的購物流程 ),只展示商品本身。

型錄網站怎麼做?不想顯示加入購物車按鈕和價格的方法(YITH 外掛教學)

如果你的行業是銷售零組件、機械器材、食品行業等 ..,只要不打算有線上購物功能,只想要讓訪客可針對商品下需求單,那這款外掛會非常適合你。

YITH WooCommerce Catalog Mode 也可以讓你將「 加入購物車 」按鈕,替換為自定義區塊和簡易表單,幫你把商店變成型錄網站。

型錄模式外掛功能

如果你打算蒐集顧客姓名、電話、地址等資訊,你也可以使用 YITH WooCommerce Catalog Mode 內建的功能,進行表單製作。或是使用 Contact Form 7、Gravity Forms 等表單外掛處理。更多 CF7 外掛教學

編輯留言表單,蒐集訪客訊息

此外,你也可以透過 YITH WooCommerce Catalog Mode 隱藏所有商品或是僅選擇特定的產品,進行價格&購物車按鈕的隱藏。

若想了解更多 YITH WooCommerce Catalog Mode 的能力,站長也可前往官方網站,了解更多詳細功能。


外掛安裝(免費版)

YITH WooCommerce Catalog Mode 外掛(免費版)

接下來我們將利用 YITH WooCommerce Catalog Mode 免費版,實現型錄模式網站。

首先我們進到 WordPress 後台,點選左側工具列的「 外掛 」,搜尋「 YITH WooCommerce Catalog Mode 」,點選安裝和啟用。

安裝 YITH WooCommerce Catalog Mode 外掛(免費版)

啟用後就可以看到左手邊工具列多了 YITH 的選項列表,點選列表中第一個項目「 Catalog Mode 」,就可以開始進行型錄模式的設定。

成功啟用 YITH WooCommerce Catalog Mode 外掛(免費版)

外掛功能介紹

YITH WooCommerce Catalog Mode 外掛(免費版)功能比較簡單,基本上就只是設定隱藏購物車和結帳功能。

進到 YITH Catalog Mode 的設定介面後,可以看到有四個功能選項,包含「 網站管理員瀏覽模式 」、「 關閉購物功能 」、「 隱藏特定頁面的購物車 」和「 隱藏商品樣式選項 」。

YITH WooCommerce Catalog Mode 外掛(免費版)設定

「 網站管理員瀏覽模式 」可以決定網站管理者所瀏覽的商品介面是否要呈現為型錄模式,若是關閉此功能,網站管理者所看到的商品頁就不會是型錄模式,只有一般使用者會顯示型錄模式。

「 關閉購物功能 」則是可以一次隱藏店家所有商品的購物車及結帳功能,若你只想隱藏特定商品頁的購物功能,則可以在下方的「 隱藏特定頁面的購物車 」選項,選擇要隱藏購物功能的頁面。

成功隱藏購物車按鈕的商品頁

此外,當一件商品有多種樣式選項時,例如同一款設計的上衣,會有粉色、米色、黑色等樣式,若你不想顯示這些樣式選項,就可以使用「 隱藏商品樣式選項 」功能。

YITH WooCommerce Catalog Mode 外掛(免費版)功能雖然不多,但還是可以簡單達成型錄網站製作,推薦給大家:)


外掛安裝(付費版)&憑證激活

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

我們需要購買 YITH WooCommerce Catalog Mode 進階外掛(可點此連結前往),並激活軟體憑證,才可開始使用此功能。

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,以及貼上剛複製的憑證,進行激活。

恭喜大家成功購買外掛+憑證激活啦,那麼,接下來就進行使用教學吧:)


進階版功能介紹

購買安裝+啟用完成後,我們就可以來設定型錄模式呈現的方式囉!

首先回到 WordPress 後台,在左側工具列找到 YITH > Catalog Mode,就會進到型錄模式設定頁面。

YITH WooCommerce Catalog Mode 型錄模式(付費版)設定分兩步驟,比免費版多了許多功能。

Step 1:設定規則

YITH WooCommerce Catalog Mode 付費版設定介面

首先第一步驟要先做簡單的規則設定,像是型錄模式啟用的對象、國家等等..,可以設定多種條件。

「 Enable Catalog Mode For 型錄模式啟用對象 」可以選擇套用在所有使用者,或是僅限套用在未登入的訪客使用者。若是選擇後者,就可以限定沒有登入的訪客無法進行購物,有登入帳號的使用者才可以購物。

此外,YITH WooCommerce Catalog Mode 付費版還能針對特定國家啟用型錄模式,假設你的商品不開放歐美地區的使用者購買,就可以開啟這個設定,之後指定國家的使用者就只會看到型錄模式,無法購買。

Step 2:設定型錄模式選項

YITH WooCommerce Catalog Mode 付費版設定介面

接著下一步就要來設定型錄模式項目,你可以選擇要關閉全站的購物車、結帳功能,或是只隱藏特定商品頁面的購物車功能及樣式選項。

YITH WooCommerce Catalog Mode 付費版 還有更進階的功能,就是可以將原本為購物車的按鈕隱藏、替換為其他按鈕。

要替換成什麼按鈕都可以再自行定義按鈕名稱、顏色等樣式,例如「私訊店家」、「詢價按鈕」等,只要前往 Buttons & Labels 分頁,就能輕鬆設定。

YITH WooCommerce Catalog Mode 客製按鈕設定

YITH WooCommerce Catalog Mode 付費版還有一個強大的功能,就是可以隱藏商品價格,且還能針對特定頁面隱藏!

除了可以一次隱藏所有頁面的價格,你也能選擇隱藏某分類標籤的商品價格,例如隱藏所有「 飾品 」分類商品的價格。

YITH WooCommerce Catalog Mode(付費版)排除項目設定

你可以在「 Exclusion List 排除清單 」分頁中設定,指定排除的商品分類就會隱藏價格,其他的商品則會維持顯示價格。

詢價表單設定

YITH WooCommerce Catalog Mode(付費版)詢價表單設定

接著我們要來介紹 YITH WooCommerce Catalog Mode 付費版 的詢價表單功能,因為型錄模式通常不包含顯示價格、購物等功能,因此建議可以設立一個詢價表單,方便有興趣的顧客詢問下單。

同樣在 YITH 設定介面,點選 Inquiry Form 分頁,開始設定詢價表單內容、樣式。

YITH WooCommerce Catalog Mode 支援第三方表單,像是 Contact Form 7、WPForms 等..,或是選擇直接使用 YITH WooCommerce Catalog Mode 內建的預設表單。

YITH WooCommerce Catalog Mode(付費版)詢價表單欄位設定

預設表單就有滿多欄位選項,可以自行設定「 Name 問題名稱 」、「 Type 表格類型 」、「 Required 是否為必填欄位 」等..。

也可以設定表單要顯示在所有產品頁或是特定頁面,以及表單的擺放位置、排版、問題內容都可以自由決定唷!

完成設定後,切換到前台,就可以看見設定的表單出現在商品頁面囉!

完成詢價表單設定

好啦!以上就是 YITH WooCommerce Catalog Mode 免費、付費版製作型錄網站的教學,希望有幫助到你唷:)


常見問題

免費版型錄模式可以隱藏商品價格嗎?

目前免費版型錄模式並沒有包含隱藏商品價格的功能,有些商家會直接將價格設定為最高價,如 $99999,若你覺得不好看的話,可能還是要考慮 YITH WooCommerce Catalog Mode 付費版。

YITH WooCommerce Catalog Mode 可搭配其他表單外掛一起使用嗎?

可以,YITH WooCommerce Catalog Mode 支援第三方表單,像是 Contact Form 7、WPForms 等..,若是站長已經有這類的表單外掛,可以直接套用唷!

可以只隱藏單一商品的購物車功能嗎?

沒問題,你可以設定全部或單一商品頁隱藏購物車功能,付費版還能設定分類,隱藏所有同分類下商品頁的購物車功能。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端