犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、講座教學等 .. 」,歡迎 聯絡我
預約網站設計 :WordPress 線上預約系統+模板套用(自架寶典)

預約網站設計 :WordPress 線上預約系統+模板套用(自架寶典)

這是一篇完整的「 預約網站設計 」步驟流程,讀完之後,相信站長們一定可以建置出優質的預約網站。

不論你是餐飲業、健身 / 美容業、或是任何提供專業服務的行業,文章內都有針對不同行業需求的製作方法。

讓你能實現訪客表單預約、預約訂單管理、員工管理設定、客製化預約表單、線上或現場付款、通知信件設定、角色權限設定、包裝預約功能等 ..。

架設網站(網域購買、主機選擇) > 基本主題 / 外掛安裝 > 預約外掛操作 > 網站上線,讓你全面掌握架設預約網站技巧 。

★☆ — 重要資訊 — ☆★

犬哥網站與 A2 Hosting 主機有長期合作關係,點擊網站上任一個 A2 Hosting 連結 前往官網(包含點擊此連結),最高可享有 70% 的讀者折扣,請一定要把握:)

因為這篇文章內容滿多的,建議可分批學習,也希望大家都能順利架站成功:)

章節如下:

預約網站設計 :WordPress 線上預約系統+模板套用影片學習:

預約網站設計 :WordPress 線上預約系統+模板套用教學影片

1. 如何自架網站?

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

網站能正常運作,就需有「 個人網域 」+「 虛擬主機 」,這是基本配備。

這也是每個網站主都需負擔的小投資,沒有例外。

差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)

網域如何取名呢?

網域是什麼?「 網域 」是網站組成的第一步,就像家的門牌一樣,讓人可以順利找到你的網站。

  • 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。例:蘋果 – https://www.apple.com/
  • 品牌名稱:網域名稱以品牌為名,打算發展品牌的公司,可用這個方式。例:愛迪達 – https://www.adidas.com/
  • 與服務 or 產品有關:與服務或產品有關聯。例:博客來 – https://www.books.com.tw/
  • 去除 www:目前大部分新網址都不太會在前面加上 www,這是比較舊式的用法。
  • .com 優先:.com 是大多數人的直覺印象,主要方便好記,增加搜尋率。
  • 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

網域取名完成後,接下來可以看一下網域後綴部分(或稱為頂級域名),要如何選擇呢?

一般最常選擇的就是 .com 類型的頂級域名,它適用於任何場合或服務,通常也是最熱門的選擇(會建議優先選擇)。

但有時候喜歡的網域名字,剛好偏偏被註冊走了,就能用更換頂級域名的方法,還是有機會註冊到自己喜愛的名字。

有關於網域後綴名(頂級域名),有哪些常見的類型呢?下面僅列出一些分享。

  • tw / cn / jp:代表不同國家,如台灣、中國、日本等 ..(選擇這類型的網域,可挑選網站主要訪客的居住地)。
  • co:可解讀為公司或企業的英文縮寫,但基本上適用於任何情況,可當作 com 申請不到的替代方案(簡單好記)。
  • net:網路相關行業可使用,但無明確限制。
  • info:資訊性類型網站可使用,但無明確限制。
  • org:organization(組織)縮寫,適合非營利組織、基金會、人文組織、宗教組織等 ..,但無明確限制。

虛擬主機是什麼?

「 虛擬主機 」是主機公司在自管的實體主機上,切分成多個虛擬空間,並把這些空間,租給一般使用者使用。

這樣可大幅降低使用者的費用,因為養實體主機是很貴的,所以絕大部分的網站主,通常都是租用現成的。

另一個比喻,如果把網址比喻成「 門牌 」,那虛擬主機就是「 家 」的角色。

如果網頁製作完成了,就需放置在優質的虛擬主機,才能確保網站不會受到攻擊,和速度穩定。

如何挑選虛擬主機?

  • 公司規模:國外知名虛擬主機公司,都是全球性服務,不論公司規模、營運歷史、主機性能、規格服務,通常優於國內主機。
  • 主機性能&功能性:主機穩定度&安全性是重要的,網站才會安全有保障。還有主機的方案規格是否理想。
  • 方案價位:通常國外的價格,會比國內便宜,但建議不要都價格取向,如果主機因此性能不好,之後你也會選擇離開的。

WordPress 是什麼?

WordPress 它是全球知名的網頁設計軟體,全球有 30 % 以上的網站,都來自於 WordPress。

WordPress 網站使用人數
WordPress 網站使用人數

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。

或許你不知道怎麼選,請參考 優質佈景主題優質外掛推薦,會給你應該的幫助。

WordPress 可完成多種網頁設計,如:部落格架設個人品牌或公司企業官網購物網站架設 等 ..

最大好處是,它是免費開源的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。

因為你就是網站的擁有者。


2. 虛擬主機推薦

A2 Hosting 是一家全球知名的虛擬主機和網域託管服務商,它從 2001 年就開始提供相關服務,由於創辦人就有程式相關背景,所以主機速度優化上,一直是它們的服務重點。

它在虛擬主機上提供多種服務項目,像是共享主機、WordPress 專業主機、VPS 主機、獨立主機,隨著你的網站規模越大(流量越多)可同步升級服務,滿足不同時期的需求。

搭配 24 / 7 / 365 全年無休的線上客服,遇到任何問題能在第一時間幫助解決。

不需擔心語言不通問題,因為 A2 Hosting 客群來自世界各地,用簡單的英文程度(Google 翻譯),他們都聽得懂唷。

A2 Hosting 正常運行時間和安全性

根據過去 24 個月的數據,A2 全年有 99.9% 以上的正常運行時間(沒任何一家能保證 100%),這代表你網站幾乎不會異常斷線,都是穩定的在線上運作。

這使它成為主機穩定度、安全性的有力競爭者。

A2 hosting :主機正常運行時間
A2 hosting :主機正常運行時間

A2 Hosting 網站速度表現好嗎?

A2 Hosting 在全球各地有多個數據基地台,滿足不同地點的主機連線速度,像是台灣用戶就可到連線最近的新加坡基地

這是我之前主機放置在 A2 Hosting 所做的記錄(評測紀錄是 A+),網站加載速度大約 83 毫秒,是優質的主機速度。

A2 hosting :虛擬主機響應速度
虛擬主機響應速度(來自 bitcatcha 評測)

Google 建議的響應時間是 200 毫秒(越短越好)。所以低於 180 毫秒的網站內容會被評為A +。

A2 Hosting 的 Turbo Boost 以上方案,有針對主機速度做特別優化,官方表示會比一般常規站點最多快上 20 倍,這是它的特別優勢。

配上 A2 Hosting 任一個共享主機方案,全部皆使用 SSD 存儲,這確實有助於其快速加載速度(SSD的速度比普通硬碟快 30%)。

每降低一秒的網站速度,這代表能保留更多訪客留存,進而轉化成網站訂單。


3. A2 Hosting 方案選擇

這章節會進行「 A2 Hosting 」的主機方案選擇,帶你選擇適合自己的方案。

首先,點擊前往 A2 Hosting 官網,會直接來到 Web Hosting 主機頁面,或是點選 Hosting > Web Hosting 前往也可以。

前往 WordPress Hosting 主機

接著往下滑,會看到不同的主機方案,如果你正猶豫如何選擇,下面我會給你一些選擇建議。

A2 Hosting教學 :WordPress 主機方案選擇

小備註:方案價格會隨著主機廠商有所調整,以 A2 Hosting 官網呈現價格為主。

要選擇哪種 A2 Hosting 主機方案?

A2 Hosting 共享主機提供 4 種方案選擇,分別是 StartUp(入門)、Drive(行駛)、Turbo Boost(渦輪)、Turbo Max(增大渦輪)

它的任一種方案,全都享有 WordPress 一鍵安裝、大量網路 SSD 儲存空間、不計網站流量、 SSL 免費憑證、A2 速度優化軟體 、免費網站搬家、CloudFlare CDN 服務、CPanel 多功能介面、數據中心選擇等 ..,這是超值的功能服務。

隨著方案提升又提供更多進階功能,這邊我簡單的統整,方便你找到適合自己的方案。

  • 只需架設一個網站,且有預算考量:StartUp 方案
  • 需架設多個網站,且有預算考量:Drive 方案
  • 需架設多個網站,且預算還算足夠,對主機速度有進一步追求者:Turbo Boost 方案

如果是 WordPress 新手入門,會建議選擇 StartUp 或是 Drive 方案,能讓你用最少預算開始,也不會一開始負擔就太多。

Drive 方案以上,都能架設無限網站、無限網路儲存空間,所以整體會比 StartUp 划算一點(但還是要看你的預算)。

不管選擇的是哪種主機方案,A2 Hosting 本身賣點就是注重主機速度,所以表現基本都會在水準之上(不會因為你是否選擇 Turbo Boost 方案)。

如果你有現成或是較多的穩定流量,會建議直接選擇 Turbo Boost 方案。此方案大幅優化了主機速度,它們表示 Turbo Boost 方案以上的主機速度,比一般常規站點快上 20 倍,比較不會遇到速度上的問題。

至於 Turbo Max 方案我不建議使用,因為這個費用太貴了(同樣費用有更好的選擇),且和 Turbo Boost 方案功能差不多。

如果 A2 Hosting 整個共享主機方案都還是無法滿足你,有關於更高規格的主機,會比較推薦 Cloudways 雲端主機

A2 Hosting 費用了解

A2 Hosting 通常費用是,網址 $14.95 美元 / 年(一年約 450 台幣),和主機 $10.99 美元 / 月(一年約 3960 台幣)。

值得開心的是,A2 Hosting 官方同意為我們網站讀者,提供最高可享有 70% 的主機折扣,一次購買越多年折扣越多(這裡需特別留意, A2 Hosting 只有年租方案才享有優惠價格)。

下表是用台幣計算,美元台幣匯率用經常的 1:30 換算(P.S 當前匯率更低, 換算下來更優惠)。

StartUp 方案Drive 方案Turbo 方案
買一年:特價約 2520 元買一年:特價約 3600 元買一年:特價約 3960 元
買二年:特價約 3160 元買二年:特價約 5760 元買二年:特價約 7190 元
買三年:特價約 3230 元買三年:特價約 6450 元買三年:特價約 7550 元

小提醒:新手可購買 1 年的 StartUp 或是 Drive 方案,用最少預算入門:)

這等於說,在 A2 Hosting 申請個人網域和主機,最少可用大約 3000 台幣(網域+主機費用),就能開始啟動你的網路事業,並享有完整的主機規格服務。

不論你購買的是哪種主機方案,只要點擊本站 A2 Hosting 連結,讀者們都享有優惠價格。

購買 A2 Hosting 完畢後,剩下的流程可以參考 A2 Hosting 教學,完成後續的 WhoIs 信件認證、WordPress 網站建置、SSL 憑證申請、主機相關設定等 ..。

安裝主題+網站外掛

購買完主機+網域後,我們還需要安裝主題+基礎外掛,才能有一個完整的 WordPress 網站。

如何安裝主題,主題是什麼,怎麼找到最優質的 WordPress 主題,可以觀看教學文章 10 個最推薦的 WordPress 主題

也可以參考我們最推薦的 Astra 免費主題 介紹。

WooCommerce外掛推薦 :多款網路開店平台,外掛推薦
不知道如何找到最佳主題+外掛?我們已經幫你整理了最佳推薦清單!

外掛部分,WordPress 必備外掛有非常多款,可以看看我們的 WordPress 推薦外掛清單 來進行挑選:)

別忘記 SEO 優化外掛網站防護安全外掛 ,這兩款功能外掛也是 WordPress 網站必備唷!

安裝主題+外掛後,我們趕快來學習,如何使用最佳 WordPress 預約外掛,完成預約網站的建置吧!


4. Amelia 是什麼?

Amelia 預約系統外掛

Amelia 是一個 WordPress 預約功能外掛,對於想尋找穩定預約流程的小型企業和個人網站來說​​,非常好用、方便。更多 Amelia 架設預約網站教學

Amelia 確保流暢的用戶體驗,設有預約及活動面板的小區塊工具,可採用一頁式設計,不必再經由跳轉其他頁面完成預約。

同時區塊小工具也設有客戶和員工專屬面板,可預約、取消、重新安排服務,並且有即時的電子郵件提醒,還提供多種信件模板可供修改。

運用 Amelia 外掛,可幫助客戶選擇合適的預約服務、日期時間、員工,並且更方便地進行付款。

豐富的後台管理面板,讓站長可以更好的追蹤預約訂單成長、管理員工動向、隨時查看及變更預約狀態、客戶付款情況等 ·· 。

Amelia 總儀表板可管理預約狀態、客戶及員工資訊

除此之外, Amelia 還可更改預約表單、服務項目的外觀樣式、添加多種預約表格、與第三方翻譯外掛、日曆外掛關聯等 .. 功能。

Amelia 自定義預約表格樣式

適合 Amelia 預約外掛的網站類型很豐富多元,像是:健身房、醫療診所、美容美髮、維修機械、傢俱組裝、餐廳等 .. 網站都非常適合。

適合 Amelia 預約外掛的網站類型

Amelia 可結合 WooCommerce 付款系統,在 Elementor 也設有區塊小工具,方便站長們使用。更多 WooCommerce 教學Elementor 教學

方案評論

Amelia 是目前最推薦使用的預約外掛,原因在於預約功能完整,適用於不同專業服務、企業服務、顧客服務等 ..,並可依照商家的成長規模,逐步調整使用設定。

進階版功能包含,如預約搜索、行程表、定期預約、優惠券、服務地點添加、自定義模板樣式等 ..,當然還有很多功能,是這裡沒提到的。

更具體描述像是,從簡單的一頁式預約、可指定時間日期、攜帶人數、客製額外選項(像是是否有攜帶小孩、攜帶寵物、是否加購服務等 ..)、是否現場付款、是否先付訂金等 ..。

到專家、教練之類的員工新增編輯、當月已預約日曆清單呈現、顧客預約成功後發送系統信件通知、簡訊通知、客製化預約表單、與 WooCommerce 金流付款串接等 ..,這些都是 Amelia 強大的功能範圍。

如果你正在考慮使用哪款 WordPress 預約外掛,那 Amelia 應該會是最優質的選擇之一。


5. Amelia 方案如何選擇?

在了解什麼是 Amelia 之後,相信大家一定都會疑惑該如何購買,下面就帶大夥兒操作啦!

首先,前往 Amelia 官網,點選下圖右上角「 Buy Amelia(購買 Amelia)」,進入方案選擇畫面。

預約網站設計:購買 Amelia 線上預約系統
購買 Amelia 線上預約系統

下圖,可選擇年租制 or 買斷制(只需付款一次,就可享有終身使用、升級)。

如果只有 1 個網站要用可選擇「 BASIC 」方案,3 個網站選擇「 PRO 」方案,無限多個可選「 DEVELOPER 」方案。

Amelia 預約網站設計外掛:年租 / 買斷方案一覽

我選擇的是年租制的 PRO 方案,可適用於 3 個網站,而且有 Packages of Services(包裝服務的功能,文章中也會介紹到)。

這邊站長依照自己的需求選擇即可。

小備註:上圖的「 買斷制 」也是不錯的選擇,如果有長期使用預約系統的站長,也可以考慮一次買斷,之後就不用每年付款了。

選擇好方案後,就會彈出填寫資訊的彈跳視窗, Amelia 有中文翻譯,因此可以直接輸入中文。

第一步,填寫你的 Email 。第二步,選擇所在地區。

Amelia 填寫電子郵件 / 選擇所在地區

最後一步,輸入你的信用卡資訊,確認購買方案後,選擇即可。

Amelia 填寫付款資訊

如此一來,我們就順利購買了要製作「 預約網站設計 」,最重要的 WordPress 外掛(Amelia)。

接著,我們繼續往下學習:)


6. Amelia 安裝+啟用憑證

WordPress 預約外掛購買完成後, Amelia 會寄送兩封郵件到你的信箱,一封是購買收據,另一封則是購買憑證。

我們先開啟憑證信件,並依續完成 Amelia 安裝。

Step 1:安裝 Amelia 外掛

到信箱開啟憑證信件,點擊連結前往 Amelia 後台,並輸入下圖的 Username(使用者名稱)、Password(密碼),進行後台登入。

Amelia 預約網站設計外掛憑證信件

進入 Amelia 後台之後,選擇「 Download 」下載主程式。

登入儀表板進行 Amelia 安裝

前往 WordPress 後台,找到外掛 > 安裝外掛 > 上傳外掛,把剛下載的 Amelia 外掛上傳安裝+啟用。

在 WordPress 後台下載 Amelia 預約網站設計外掛
在 WordPress 後台下載 Amelia 預約網站設計外掛

這樣 Amelia 外掛就安裝+啟用成功囉!

Step 2:啟用憑證

安裝完成後,接著我們便來輸入 Amelia 憑證以激活使用。

前往 Amelia 儀表板,找到「 Purchase Code 」,複製數值( 購買憑證代碼 )。

Amelia 儀表板複製購買憑證

小備註:「 Mange Domains 」可管理已填入憑證的網域。

複製好憑證後,回到後台 > Amelia 設定 > Activation 區塊 > 按下「 VIEW ACTIVATION SETTINGS 」。

預約網站設計 :前往 Amelia 「 Activation 」設定
前往 Amelia 「 Activation 」設定

在「 Purchase code 」貼上剛剛複製的代碼,按下「 Activate 」。

Amelia 憑證連線成功

憑證輸入完成,這樣就成功激活 Amelia 啦!可以開始使用所有的 Amelia 功能囉!恭喜大家!

接下來,將會開始 Amelia 外掛的完整使用教學,學完後相信你的線上預約網站,應該也會更完整了。


基礎設定

安裝+啟用 Amelia 後,我們需要先進行一些在預約網站設計前,重要的基礎設定,包括:一般設定、公司設定、營業時間 / 休假日設定、付款方式等 ·· 。

這些設定都會影響到後續預約系統的設置,非常的重要,可以說是蓋好預約系統的地基,所以大家要專注學習唷:)

準備好的話,就趕快開始吧!

一般設定

到 WordPress 後台 > Amelia > 設定,按下「 一般 」區塊的「 VIEW GENERAL SETTINGS 」。

「 一般設定 」主要是在調整預約系統的時間區間設定、預設的預約確認狀態、緩衝時間等 ·· 基本設定項目。

Amelia 教學:一般設定頁面

跳出設定彈跳視窗,我們依序看以下設定。

Amelia 教學:一般設定時間段修改
  • Default Time Slot Step:調整預約服務時可設置的最短時間段。例如: 30 分鐘為一區間,前台顯示: 12:00~12:30 為一個預約。
  • Default Appointment Status:默認預約後狀態。
  • Use service duration for booking a time slot:想要服務時長跟預約顯示的時間一樣長,可啟用此選項。
  • Include service buffer time in time slots:在預約時間裡加進緩衝時間。
  • Minimum time required before booking:到設置時間之前,客戶無法預約。例如:設置為 1 小時,現在時間 12:00 ,客戶只能預約 13:00 以後的服務。
  • Minimum time required before canceling:客戶取消預約前須等待的時間。
  • Minimum time required before rescheduling:客戶重新設定該預約前須等待的時間。
  • Period available for booking in advance:客戶可提前預約的時間。例如:設定 30 天,今天 8 / 25 ,可預約 8/ 25~9 / 24 的服務。

依照需求填好設置,電話國家設置台灣,這樣消費者在前台填入資料時會更加方便。

往下滑還有其他變更項目,我們將圖中標註項目全開啟,這些是預約成功的系統通知信設定,通知功能會在之後的章節詳細教學。

預約網站設計 :一般設定時間段修改
一般設定時間段修改

全部設定完成,記得選擇「保存」。

小備註:如果希望開啟 Google reCAPTCHA ,可先前往官方網站註冊獲取 ID ,開啟一般設定中的「 Enable Google reCAPTCHA 」填入獲取 ID 即可使用。

公司設定

關於預約的基礎項目調整好之後,我們就來設定公司的基本資料吧~

回到 Amelia 設定 > 「 Company 」區塊 > 選擇「 VIEW COMPANY SETTINGS(公司設定)」。

Amelia 教學:開啟「 Company 公司 」設定
Amelia 教學:開啟「 Company 公司 」設定

跳出公司設定,依照順序填入公司相關資訊,點選「 保存 」即可。

Amelia 教學:公司資訊設定

填完資料選擇保存,我們就完成公司資料的鍵入囉~

營業時間 / 休息日設定

此項目為設置公司的「 營業時間 / 休息日 」,會直接套用到全部員工的時間安排上。

Amelia 設定頁面 > 「 Working Hours & Days Off 」區塊 > 選擇「 VIEW WORKING HOURS & DAYS OFF SETTINGS 」。

Amelia 教學:開啟 工作時間 / 休息日設定

營業時間

可調整一週的營業 / 休息時間,以 30 分鐘為一個時間單位。

按鈕「 + 」可新增 營業 / 休息 時間段,按鈕「 - 」可刪除時間段。

星期一旁邊的「 適用於全天 」按鈕,非常好用,可將星期一的時間設定一次套用至其他日子:)

Amelia 教學: 工作 / 休息時間 設定

時間段設定完成,選擇區塊內的「 保存 」即可。

小備註:營業時間會作用在新增的員工,但已存在的員工營業時間不會被調整,在已有員工的情況下更改營業時間,也要到個別員工頁面調整唷!

休息日

設定全公司的休假日,顯示在前台,讓顧客不會預約到休假日期。

切換「 休息日 」區塊 > 增加休息時間 > 輸入名稱日期 > 選擇是否「 每年重複一次 」> 按下「 增加休息時間 」按鈕 ,即可新增休假日。

Amelia 教學: 休假日 設定

付款方式

預約完成之後,如果沒有一個好的付款管道,對於客戶跟站長來說都是有些尷尬的事情吧 > <

所以讓顧客有一個方便的付款方式是很重要的。

回到 Amelia 設定頁面 > 「 付款方式 」區塊 > 選擇「 VIEW PAYMENTS SETTINGS 」。

預約網站設計 :開啟付款方式設定

進入付款設定頁面,有一項重要的設定,就是選擇幣種,這邊我們選擇 新台幣,因應新台幣的使用習慣,我們將數字後顯示小數點設為 0 ,方便客戶閱讀金額。

其餘設定項可依照自己需求進行調整,下面會講解不同類型的網路電商可選擇的付款方式。

預約網站設計 :設定新台幣、開啟 WooCommerce 付款

我們簡單說明第三點紅框中的付款方式:

  • 在現場:客戶到現場時進行支付。適合店家類型:餐廳、咖啡廳等 ·· 現場即時消費類型。
  • WooCommerce:串連 WooCommerce 金物流系統進行多種付款方式。例如:銀行轉帳、線上刷卡等 ·· 。適合店家類型:健身房、律師服務、室內設計等 ·· 販售專業知識者。

兩者只能擇一唷。因為其他付款方式較不適用台灣消費者,便不多做介紹。

選擇在現場支付,客戶在前台不需進入結帳即可預約,較沒有金流上的問題,因此這邊我以串接 WooComerce 作為教學示範。

勾選串接 WooCommerce 付款服務之後, Amelia 會自動連線到 WooCommerce 的付款頁面,不過在那之前,要先下載 WooCommerce 並完成相關設定唷。更多 WooCommerce 基礎教學

小備註:可以在 WooCommerce 安裝第三方金物流外掛,新增貼近台灣消費者習慣的付帳方式。相關外掛教學: WooCommerce綠界外掛教學RY WooCommerce Tools 外掛教學

綠界金流的多種付款方式(依照不同 WordPress 主題,顯示方式會有所不同)
串接第三方金流外掛可擁有多種付款方式(更接近台灣消費習慣)

完成付款方式的設定之後,我們就繼續前往下個步驟吧!

Labels 標籤

「 Labels 標籤 」設定可更改在網站上顯示的文本。

回到設定頁面 >「 Labels 」區塊 > 選擇「 VIEW LABELS SETTINGS 」。

Amelia 教學:開啟 Labels 標籤設定

將文本都填入中文,按下「 保存 」即可。

Amelia 教學: Labels 標籤填入中文

這邊可將前台的系統字進行翻譯,如下圖:

Amelia 教學: Labels 標籤部分系統翻譯字

如果在之後發現有未翻譯完全的系統字,可以參考 Loco Translate 翻譯外掛教學

Roles Settings 權限設定

這個區塊主要功能是設置「 員工、客戶使用面板權限 」,Amelia 有員工以及客戶面板功能,可讓員工、客戶查看預約情況。

在此流程,我們會先新增員工、顧客的管理頁面+權限設定,詳細的新增員工流程,會在之後的章節教學。

新增員工、顧客管理頁面

前往 WordPress 後台 > 新增頁面 。

選擇區塊小工具(Employee Panel 顧客面板)> 輸入頁面標題 > 網址代稱填寫「 employee 」> 發布。

Amelia 教學:新增員工專區頁面

到前台網頁檢查,發現成功新增「 員工專區 」頁面!

這邊先將前台的「員工面板」網址複製下來(下面會用到)。

Amelia 教學:員工專區頁面顯示成功!

接著,我們需要在選單放上「員工專區」頁面,這樣員工才點的到。

進入外觀 > 選單 > 勾選「 員工專區 」頁面 > 新增至選單 > 拖曳順序,記得儲存選單。更多 WordPress 選單 教學。

預約網站設計 :新增員工專區主選單

到前台網站檢查,順利成功新增「 員工專區 」到主選單上囉~

這樣一來,員工就可以透過該連結登入「員工專區」,檢查自己相關的預約紀錄。

Amelia 教學:顯示員工專區主選單成功!

員工權限相關設定

Amelia 設定 > 「 Roles Settings 」區塊 > 選擇「 VIEW ROLES SETTINGS 」。

Amelia 教學:開啟 Roles Settings 權限設定

先勾選啟用員工面板功能,輸入員工頁面的網址(剛上面有請大家進行複製)。

設定員工權限的部分,這邊我們都先暫時不將功能開啟給員工,細節說明如下:

Amelia 教學:員工 Roles Settings 權限設定
  • Configure their services:員工可分配他們能夠被預約的服務項目。
  • Configure their schedule:編輯營業時間權限。
  • Configure their days off:自行添加休假日。
  • Configure their special days:增加特殊營業時間 / 休息時間權限。
  • Manage their appointments:可管理被預約的服務細節。
  • Manage their events:可管理被預約的活動細節。

你可以自由選擇要將哪些權限開啟給員工使用:)

全部設定好選「 保存 」即可。

客戶權限相關設定

切換至「 顧客 」面板,調整顧客查看預約權限。

我們先開啟紅框中的選項:檢查預約者是否為現有客戶、自動創建新客戶資料、啟用客戶面板

其他具體設定項目如下圖:

Amelia 教學:顧客 Roles Settings 權限設定
  • Check customer’s name for existing email when booking:透過電子郵件檢查預約者是否已是現有客戶。
  • Automatically create Amelia Customer user: 新預約者下單後,Amelia 會自動創建 WordPress 使用者以及客戶帳號資料。
  • Allow customers to reschedule their own appointments:允許客戶修改自己的預約項目。
  • Require password for login:不使用密碼,用電子郵箱即可登入客戶面板,一些非隱秘性資訊的電商平台適合這種形式。
  • Allow customers to delete their profile:允許客戶刪除他們的資料,通常不建議開啟,可能會遇到有電子郵箱卻沒有客戶姓名記錄的情況。

依照站長需求設置完成,填入客戶面板的網址,便可以按下保存,繼續下一章教學:)

小備註:「 客戶專區 」頁面,跟上面的「 員工專區 」頁面,兩者的新增&設定方式是差不多的,可以參考上面的教學。


通知信件設定

這一章節,我們會進行「 通知信件 」的設定教學。

通知信件的作用在於,發送預約訂單的相關資訊給員工、客戶,比如說:是否預約成功、付費狀態等 ·· 。也可以發送員工 / 顧客會員資料。

準備好的話,我們就開始來設置吧:)

Notifications 基本設定

在 Amelia 設定頁面有「 Notifications 」區塊可供調整,這區塊主要設定發送信件的操作機制、連結 URL等 ·· 項目。

Amelia 設定 > 「 Notifications 」區塊 > 選擇「 VIEW NOTIFICATIONS SETTINGS 」便會跳出操控面板。

選擇「 WP Mail 」> 輸入信件相關資訊 > 開啟自動發信面板 。我們就完成通知信件的後台設置。

預約網站設計 :Notifications 通知設定

URL 的相關設定,我們可以新增感謝預約、取消預約成功、無法取消該預約等 ·· 頁面的連結。

在顧客 / 員工權限設定有開啟相關功能(例如:允許客戶取消預約等 ·· ),可在通知設定這裡填入對應的 URL ,系統信件便可以關聯此連結。

Notifications 信件面板

設定系統通知信件之後,我們可以更改信件內容,以及新增發送信模板。

前往 Amelia > Notifications 頁籤 > 進入 Notifications 面板。

Amelia > Notifications 頁籤

我們以修改寄給客戶的預約成功信為範例,找到「 Appointment Approved 」預約成功模板 > 語言選擇中文(台灣) > 輸入信件內容 > 保存。

Amelia 教學:新增 / 修改 Notifications 通知信內容

Amelia 也有整理不同類別的短代碼,方便站長嵌入信件內。

設置成功之後,我們嘗試在前端預約並且發信,信件內容修改成功~

Amelia 教學:Notifications 通知信發送成功!

Locations 地點設定

在公司設定中我們已經設置了公司地址,不過這邊需要設置的是預約服務地點。

像是:室內設計的公司地址,與諮詢辦公室可能不在同一個位置、健身房有好幾個分中心、餐廳也有所多分店可訂位等 ·· 情況。

這種時候,我們就需要透過 Amelia 新增不同的地點,顯示在前台的預約服務中,讓顧客可選擇前往何處享受服務:)

前往 Amelia > Locations 面板 >「 Add Location 」新增地點。

預約網站設計 :新增「 Locations 」地點

填入地點資訊,這邊我們可以設置地標,客戶在預約時,就可以使用其他地圖軟體,前往該地點。

如果地標定位不到地址,可能就需要使用經緯度來幫助地圖定位。

全部設定完成,保存即可新增地點。

預約網站設計 :設定「 Locations 」地點

員工新增+設定

接著我們要來帶大家新增員工以及介紹設定員工的面板功能:)

新增員工

先到「 使用者列表 > 全部使用者 > 新增使用者 」來新增員工在後台的使用者權限。

Amelia 教學:新增使用者

進入新增使用者頁面,依序填入員工資料,在「 使用者角色 」選擇「 Amelia Employee 」> 新增使用者。

Amelia 教學:設定「 Amelia Employee 」使用者

新增使用者之後,我們到員工頁面新增員工: Amelia > Employees 面板 > Add Employee 。

Amelia 教學:到「 Employee 」面板新增使用者

依序輸入員工資料,在「 WordPress User 」選擇剛新增的「 Amelia Employee 」使用者,鍵入員工專區密碼,並確認是否有勾選「 將帳號密碼信件發送給員工 」

確認無誤,按下保存即可新增員工。

Amelia 教學:「 Add Employee 」新增員工設定

地點的部分,在上一個章節我們調整過不同辦公室的地點,這邊可對員工進行所在地點的分配。

客戶在前台選擇地點時,便可以選擇在該地點服務的員工。

小備註:如果一開始沒有新增使用者,也可以在新增員工時,選擇「 創建新的 」按鈕, Amelia 會自動在 WordPress 後台新增一個「 Amelia Employee 」使用者。

員工調整面板

新增完員工之後,我們來看可以怎麼調整個別員工的設定吧:)

選擇一名員工,進入設定面板,我們可以看見前兩項可調整項目為:修改該員工預約項目、調整營業時間。

修改預約服務可依照該員工的能力進行勾選;營業時間若沒有特別需求,可以不用調整。

Amelia 教學:調整個別員工預約項目、營業時間

接著我們看「 休息日 」區塊,如果員工請假,可以在「 休息日 」區塊新增日期。該員工在特定日期不能被預約,而且不會影響到其他員工的可預約時間。

預約網站設計 :調整個別員工休假 / 請假日期

再切換到「 特別的日子 」區塊,這裡可以新增員工的特殊上班時間,與其他員工的正常營業時間區分開。

Amelia 教學:調整個別員工特殊預約日期

以上就是可在個別員工面板調整的項目,讓站長更方便管理員工的動向,非常的重要唷,都學會了嗎:)


預約系統設定

在 Amelia 有 2 個前台的功能可以讓客戶先行選擇服務,一個是預約系統,另一個則是活動(課程)系統。

這個章節,我們會教大家如何新增 / 設定最重要的預約系統。

準備好的話,就開始囉;)

新增預約服務

第一步,我們先來新增預約服務的項目,這邊我會教大家一步一步慢慢建立預約項目~

Step1:新增分類

首先: Amelia 後台 > 服務頁籤 > 進入服務設定面板 。

在新增預約服務前,我們必須先新增一個分類,才能夠安排預約服務。

在 分類目錄 > 「 Add Category 」> 輸入分類名稱 > 點選藍勾圖鈕 。即可新增一個分類項目。

Amelia 教學:新增預約分類

Step2:新增預約服務

在新增分類項目以後,我們便可以在該分類裡新增預約服務的內容。

選擇要新增預約服務的分類 > 上方「 Add Service 」或下方「 + 」按鈕都可新增預約項目。

Amelia 教學:新增預約服務

Step3:預約服務設定

新增預約設定,會跳出設定細項,我們先在「 Service Details 」區塊填入預約服務的基本資訊。可參考圖片中說明功能:調整標籤顏色、訂金支付等 ·· 。

訂金設定可以讓客戶在預約時須先預付一筆金額。有 2 種計費方式:「 Fixed amount 」固定金額、「 Percentage 」百分比(依照全額的百分比決定訂金金額)。

Amelia 教學:預約服務訂金設定
  • Category :選擇該預約服務的分類項目。
  • 持續時間:預約服務的全部時間。
  • Enable deposit payment :開啟訂金服務。選擇「 Fixed amount 」可設定固定金額;「 Percentage 」依照全額百分比調整訂金。

接著往下滑,還有許多重要的設定項目,例如:設定同行人數、設定員工執行該預約服務等 ·· 。具體如下:

Amelia 教學:預約服務後續重要設定
  • Buffer Time Before:為預約前準備時間,同一位員工的預約時間會自動間隔出設定時間。
  • Buffer Time After:為預約後休息時間,同樣預約時會自動間隔出設定時間。
  • Minimum Capacity:客戶預約時的最少人數。
  • Maximum Capacity:客戶預約時的最多人數。
  • Show “Bringing anyone with you” option:是否在前台顯示「 攜帶更多人前往 」按鈕。
  • The price will multiply by the number of people:客戶攜帶人也必須付費。
  • Show service on site:將此項服務顯示於前台。
  • Set recurring appointment:是否設定週期循環,於前台主動顯示詢問客戶。例如:一週一次、一月一次等 ·· 。
  • Employees:設定執行該預約服務的員工。

接著我們切換到不同的區塊,進行單項預約項目的設定。

「 Gallery 」區塊,可新增預約服務相關照片,讓客戶於前台預覽,進一步了解預約服務的內容。

Amelia 教學:新增預約服務相關照片

「 額外 」區塊,可新增額外的預約項目,附加於此預約之下,讓客戶可決定是否加選別種服務(類似購物商城的加購功能)。

這項服務可以運用在餐廳等 ·· 類似服務的網站上,新增例如:求婚佈置、浪漫燭光晚餐佈置等 ·· 別種涵蓋在訂位服務之下的額外需求。

Amelia 教學:額外預約服務功能

「 設定 」區塊,可對單項目的預約服務進行:預約狀態、預約前須等待最短時間等 ·· 設定。對應 Amelia 一般設定的項目。

也可個別調整付款方式,關聯的第三方日曆外掛等 ·· 。

Amelia 教學:個別預約服務設定

「 在預定後重定向 URL 」選項,可以新增感謝頁面填入 URL ,或是填入客戶面板 URL 。客戶在預約完成後會自動導向到設定的路徑。

那麼以上就是新增+設定預約服務的教學啦~

大家都學會了嗎?

Package 包裝預約功能

預約服務還有一個「 包裝 」功能,將多項相似功能的預約服務配套,讓客戶可以自由選擇是否一次預約。

很適合販售的服務為長期性質的站長,例如:教學課程、健身房、室內設計、建築工程等 ·· 網站的站長使用。

我們先在「 服務 」區塊,新增想放進包裝裡的預約服務之後,切換「 Packages 」區塊 > 「 Add Package 」或「 + 」鈕。新增一個包裝設定。

Amelia 教學:新增配套預約服務

新增之後,我們會到「 Package Details 」區塊,輸入資料,設定持續時間,我們就可以進行下一步。

Amelia 教學:配套預約服務「 Package Details 」設定

切換「 服務 」區塊,這裡是設定配套裡的服務項目,我們可藉由下拉選單,將想加入的預約服務都加入。

加入預約之後,可以對個別預約服務進行調整,詳細如下圖:

預約網站設計 :配套預約服務「 服務 」設定
配套預約服務「 服務 」設定
  • Number of appointments:此套餐中該項預約服務包含的次數。
  • Minimum bookings required:最低須預定次數。
  • Maximum bookings required:最高可預訂次數(非強制)。

我們依序更改選擇的預約服務設定即可。

設定完成,接著切換「 價格 」區塊,這裡有 2 種價格計算方式:「 Calculated price 」原服務疊加價格、「 Custom price 」自訂配套價格。

這兩項價格設定都可以啟用訂金功能。

Amelia 教學:配套預約服務「 服務 」設定

「 Gallery 」區塊可增加該配套服務的相片;「 設定 」區塊可以變更付款方式,一般來說不會動到此項區塊的設定。

Amelia 教學:配套預約服務「 Gallery 」、「 設定 」設定

都確定沒問題之後,按下保存新增包裝,配套包裝的項目就完成囉!


預約系統上線

設定完後台的預約模板,就可以讓預約系統在前台網站上線啦!

這個章節,我會帶領大家完成兩件事:新增 / 設計預約頁面、讓預約網站於主選單上呈現。

建立預約頁面

預約系統面板

我們先到頁面面板,選擇新增頁面,進入之後,更改網址代稱,接著點選「 使用 Elementor 編輯 」。

Amelia 教學:使用 Elementor 新增頁面

進入 Elementor 編輯頁面之後,我們可以運用 Elementor 排版,讓頁面變得更精美。更多 Elementor Pro 教學

排版完成,新增 Amelia 預約區塊小工具。

在左邊區塊小工具列表,找到「 AMELIA 」分類 > 選擇拖曳「 Amelia – Booking view 」小工具。

Amelia 教學:新增「 Amelia – Booking view 」按鈕

放進小工具之後,我們可以再做預設預約選項、調整背景樣式等 ·· 設定。

完成之後,選擇發布頁面,就可以到前台檢查預約頁面囉~

Amelia 教學:前台網站順利顯示「 預約 」模板!
Amelia 教學:前台網站順利顯示「 預約 」模板!

小備註:除了將「 預約 」區塊小工具放在單一頁面,也可以直接將「 預約 」區塊嵌入不同的已上線頁面,例如:首頁等 ·· 。

目錄預約面板

目錄預約是另一種預約形式,可以讓客戶藉由分類,更好找到他們想要的服務。

在原有的預約頁面編輯,左邊區塊小工具列表,找到「 AMELIA 」分類 > 選擇拖曳「 Amelia – Booking view 」小工具。

Amelia 教學:新增「 Amelia – Catalog view 」按鈕

前台顯示效果如下:

Amelia 教學:前台網站順利顯示「 目錄預約 」模板!

前台網站上線

新增完頁面之後,我們需要讓客戶可以在前台網站找到路徑訪問我們的預約頁面。

我們一樣使用前面教學過的方式,使用主選單。

進入外觀 > 選單 > 勾選「 預約 」頁面 > 新增至選單 > 拖曳順序 ,結束後儲存選單。

預約網站設計 :主選單加入「 預約 」頁面
主選單加入「 預約 」頁面

成功顯示選單按鈕~

預約網站設計 :主選單成功顯示「 預約 」按鈕
主選單成功顯示「 預約 」按鈕

活動 / 課程新增+上線

我們在前面章節有提到, Amelia 有 2 個可供客戶選擇的服務功能:預約、活動。這一個章節,我們要介紹的,就是活動(課程)系統。

活動系統是由主辦方發起一項服務,讓該時段有空的客戶可報名參與。因此很適用講座、課程等 ·· 類型的網站。

Step1:新增活動+設定

Amelia > 活動 > 「 新的活動 」或「+」鈕,新增活動。

預約網站設計 :新增活動

進入「 活動詳情 」區塊,我們可以在這邊設定活動的基本資訊以及設定。

還可以設定是否有重複日期、訂金、分類標籤等 ·· 功能。

預約網站設計 :「 活動詳情 」設定
  • This is a recurring event:勾選可讓該活動重複。
  • Enable deposit payment:開啟訂金功能。
  • Allow the same customer to book more than once:允許同為客戶多次進行該項目的預約。

活動詳情設定完成,切換至「 定制 」區塊,這邊可訂製活動在前台顯示的樣式:活動照片、按鈕顏色等 ·· 。

預約網站設計 :活動樣式「 定制 」設定

「 設定 」區塊,可以對活動進行後續設定,例如:取消預約前所需的時間、預定後重新定向 URL 等 ·· 。

付款方式若沒有特別需求,維持原本設定即可。

預約網站設計 :取消預訂之前所需時間設定

設定完活動細節,按下「 保存 」即可。

Step2:新增活動區塊小工具

我們必須將「 活動 」區塊小工具,新增到前台網站上,才能夠顯示活動預定系統。

可以參考「 員工專區 」、「 預約 」頁面新增及上線方法,使用 WordPress 內建頁面編輯器或 Elementor 新增頁面,拉入名為「 Amelia – Events 」的元素按鈕進頁面。更多 頁面編輯器外掛分享

也可以使用選單系統,將活動頁面單獨放在主選單(或子選單),也可附加在其他頁面裡。更多 如何添加 WordPress 子選單

完成之後成品如下:

Amelia 教學:活動模板成果預覽

自定義預約系統模板

在模板上線之前,我們可以先行調整模板的樣式以及色彩,讓預約、活動、員工、會員等 ·· 模板上的視覺設計更貼近於品牌 / 電商網站的設計風格~

前往 Amelia > 定制 > 進入自訂表格模板。

Amelia > 定制 頁籤
Amelia > 定制 頁籤

接著,我們先介紹面板:

預約網站設計 :訂製面板介紹
預約網站設計 :訂製面板介紹

功能面板區域介紹:

① 全域變更區:變更所有模板整體的視覺顏色、文字字體。

② 視覺呈現區:立即呈現變更模板後的視覺效果,可直接在此處編輯元素、顏色。

③ 列表控制區:選擇現在變更的模板、以及細部的每頁編輯。

在知道面板劃分之後,我們到列表區,這邊可以選擇調整全部的面板,先以變更分步預約系統模版為範例。

「 Form 」列表選擇「 Step By Step Booking Form 」模板 > 「 Form Flow 」選擇「 Service 」 > 語言選擇中文(台灣)。

Amelia 教學:開啟「 Step By Step Booking Form 」模板

選擇面板之後,我們先來到全域變更區,對全域顏色先進行一次調整,細節如下:

預約網站設計 :全域色彩、文本設定
全域色彩、文本設定
  • Primary Color:基礎顏色,一些按鈕與文本顏色會呈現此色調。
  • Primary Gradient:主要修改員工 / 客戶面板的漸層背景色。
  • Text Color:全域文本顏色。
  • Text Color on Background:文本在其他有顏色的背景上會呈現的色彩。

調整完之後直接保存即可。接著我們要直接在視覺呈現區調整模板細節。

來到視覺呈現區,這邊是直覺式的視覺編輯器,可以直接在模板上變更及實時預覽效果。

左邊是文本、區塊相關,右邊則是視覺呈現;點選鉛筆圖案,可以對文本進行翻譯字輸入,前台便會顯示翻譯字。

Amelia 教學:全域色彩、文本設定

我們切換每個步驟一一進行調整,便可以按下保存,接著就可以前往前台觀看變更效果~

Amelia 教學:預約模板變更成功!

其他類型模板,例如:活動、分類目錄、「 包裝 」預約等 ·· 模板都可以在這裡參考以上教學進行調整~


顧客 / 員工登入設定

在前面的「 Roles Settings 權限設定 」小章節,我們學習到如何新增「 員工 / 顧客登入面板 」。

不過具體該如何操作,讓員工、顧客擁有進入專區的權限?

這個章節會有詳細的教學~

員工登入設定

Amelia 在通知功能中,預設有發送登入資訊信件給員工、顧客的功能,我們只需要透過發送信件設定,便可以將登入資訊傳送給員工跟顧客。

下面會有具體的操作教學唷:)

Step1:修改員工登入通知信模板

因為預設信件都是英文,所以我們需要先將模版內容修改成中文。

如何修改信件內容: Amelia > Notifications 頁籤 > Notifications 面板 > To Employee 區塊 > 找到 Employee Panel Access 模板進行修改。

Amelia 教學:修改員工登入通知信件模板

Step2:員工設定(寄送信件)

在「 新增員工 」小章節,我們便提醒過大家,需要在設定員工時勾選「 帳號以及密碼確認信寄送 」選項。

如果忘記勾選:Amelia > Employees 頁籤,找到對應員工,再次輸入密碼,並勾選「 自動發送員工專區密碼 」。

預約網站設計 :勾選「 自動發送員工專區帳密 」選項
勾選「 自動發送員工專區帳密 」選項

在新增員工、編輯員工時輸入密碼,勾選該選項並保存,系統便會自動派發帳號以及密碼信件給員工,員工便可經由這些資訊登入員工專區。

Amelia 教學:員工收到登入通知信件

Step3:登入員工專區

我們使用信件提供的資訊,登入員工專區頁面。

成功登入~員工可以查看自己負責的預約以及活動項目~

預約網站設計 :檢視員工專區

因為後台設定員工沒有任何修改權限,所以只能夠觀看目前預約、活動情況。

小備註:員工 / 客戶專區權限設定、新增專區頁面,請參考本文「 Roles Settings 權限設定 」小章節。

顧客登入設定

顧客專區的登入設定相較員工專區會比較複雜一點,我們會設定在客戶下第一筆預約時,自動建立 Amelia、WordPress 、 WooCommerce 這三個不同的帳號。

Amelia 帳號可讓客戶瀏覽會員專區面版、修改預約內容; WordPress 使用者是賦予客戶權限; WooCommerce 帳號則可以讓客戶運用查看預約訂單詳情。

我們一樣會一步步帶領大家操作唷!

Step1:修改顧客登入通知信模板

使用 Amelia 內建結帳系統(現場付)的站長,在後續設定會由 WordPress 後台發送信件,因此不必更改 Amelia 、 WooCommerce 的信件模板。

使用 WooCommerce 結帳的站長,因為 WooCommerce 的會員與 Amelia 的會員關聯,登入通知信會由 WooCommerce 寄送,所以我們需要到 WooCOmmerce 進行修改。

WooCommerce 設定 > 電子郵件 > 「 新帳號 」模板 > 管理。

Amelia 教學:進入 WooCommerce 顧客通知信件模板設定

進入模板,即可修改信件內容,修改完畢選擇「 儲存設定 」即可。

Amelia 教學:修改 WooCommerce 顧客通知信件模板設定

小備註:WooCommerce 信件模板可使用外掛客製化修改。更多 WooCommerce 信件模板外掛

Step2:顧客設定(寄送信件)

在「 Roles Settings 權限設定 」小章節,設定顧客面板權限時,需要將「 自動創建新客戶資料 」選項開啟。

如果忘記開啟:Amelia > 設定 > Roles Settings 權限設定 > 「 顧客 」區塊,開啟「 自動創建新客戶資料」。

當有新顧客下預約訂單時, Amelia 會在 WordPress 後台創建新的使用者,並且顧客資料也會保留在 Amelia 後台中。

Amelia 教學:顧客 Roles Settings 權限設定
Amelia 教學:開啟「 自動創建新客戶資料 」

接著為了確保顧客會創建會員帳號,我們在 WooCommerce 後台也需要做設定,若是選擇「 現場付 」的站長可忽略這一步驟。

WooCommerce 設定 > 帳號及隱私權 > 勾選「 允許顧客在結帳過程登入現有帳號 」、「 允許客戶在結帳過程中建立帳號 」、「 允許客戶在我的帳號建立帳號 」。

Amelia 教學:WooCommerce 帳號及隱私權設定

使用 Amelia 內建「 現場付 」的網站,顧客會收到的信件:

Amelia 教學:WordPress 後台帳號通知頁面

點擊連結,客戶可變更密碼,就可以憑藉這組帳密,登入會員面板。

使用 WooCommerce 付款方式的網站,顧客會收到由 WooCommerce 發送的帳號信件,可藉由信件提供資訊登入 WooCommerce 及 Amelia 帳號。

Amelia 教學:WooCommerce 帳號通知頁面

Step3:登入顧客專區

我們使用信件提供的資訊,登入顧客專區頁面測試。

跟員工專區一樣,顧客可以在專區查看已有的預約以及活動~


預約及客戶面板管理

我們要如何管理客戶資料、付款詳情、預約資訊(分配員工、預約日期時間等 ·· )呢?

Amelia 有分配許多功能面板來讓站長可方便管理這些重要資訊。

這個章節,我會一一介紹這些面板的功能,讓站長可快速上手,輕鬆管理唷;)

Dashboard 總儀表板

Amelia >「 Dashboard 」面板,這邊包含:員工、預約服務、活動、行程表、付款資訊等 ·· 細節的內容。

也有彙整:總預約數、預約佔用時間、收入等 ·· 多種內容的表格。

方便站長對於網站的預約、收入情況作一個大方向的歸納跟總覽。

預約網站設計 :Dashboard 總儀表面板

在總儀表面板下的「 + 」按鈕可新增預約、客戶資料。

在後續會有如何新增預約、客戶教學。

小備註:若是發現無法刪除會員資料、預約資訊,可能是總儀表板還留有舊資料,需前往「 Dashboard 」總儀表板進行刪除。

Calendar 日曆

Amelia >「 Calendar 」面板,我們可以在這裡查看所有員工的預約時間表、選擇查看的時間週期、點擊預約可編輯預約細節、新增預約等 ·· 。

預約網站設計 :Calendar 日曆面板

在 Calendar 日曆面板,站長也可手動在這邊分配新的預約、活動。

預約網站設計 :Calendar 日曆可手動新增新預約活動
Calendar 日曆可手動新增新預約活動

預約時間

Amelia > 「 預約時間 」面板,這邊我們可查看每筆預約的詳細資訊,可以在這裡修改預約狀態、內容,或是手動新增一筆新預約。

Amelia 教學:「 預約時間 」面板

顧客多位

Amelia > 「 顧客多位 」面板,這邊可以管理會員的資訊、新增會員等 ·· 。

預約網站設計 :「 顧客多位 」面板

可編輯會員資訊:姓名、性別、電子郵箱、WordPress 使用者、電話、性別、出生日期。

新增會員時,可輸入的資訊也相同。

Amelia 教學:變更、新增顧客

Finance 付款管理

Amelia > 「 Finance 」面板,主要可在此管理並查看預約付款情況,也可以新增優惠券功能。

先切換「 付款方式 」區塊,查看、編輯訂單的付款資訊。

Amelia 教學:「 Finance 」面板查看付款資訊

「 細節 」按鈕可對單筆預約付款進行編輯:

預約網站設計 :修改單筆預約訂單付款資訊
預約網站設計 :修改單筆預約訂單付款資訊

接著我們示範如何使用優換券功能:切換「 Coupons 」區塊 > 「 New Coupons 」或「 + 」按鈕 。

預約網站設計 :「 Coupons 」區塊查看優惠券
「 Coupons 」區塊查看優惠券

接著就可以編輯優惠券細節:

預約網站設計 :新增優惠券細節
  • Code:新增優惠券編號。
  • Discount (%):按照總額百分比優惠。
  • Deduction (NT$):固定金額優惠。
  • Usage Limit:全部使用上限。
  • Maximum Usage Per Customer:單一客戶使用上限。
  • Notification interval:發送通知信件數量。
  • Recurring notification:啟用發送通知信件。

全部資訊輸入完成,按下保存,即可使用新增的優惠券~


常見問題

自架網站需要準備什麼?

網站能正常運作,就需有「 個人網域 」+「 虛擬主機 」,這是基本配備。

這也是每個網站主都需負擔的小投資,沒有例外。

差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)

Amelia 是什麼?

Amelia 是一個 WordPress 預約網站設計外掛,可以確保流暢的用戶體驗,設有預約及活動面板的小區塊工具,採用一頁式設計,不必再經由跳轉其他頁面完成預約。

對於想尋找穩定預約流程的小型企業和個人網站來說​​,非常好用、方便。

網站上也有整理 預約外掛推薦清單 可供大家參考:)

Amelia 適合哪些店家使用?

適合 Amelia 外掛的預約網站類型很豐富多元,像是:健身房、醫療診所、美容美髮、維修機械、傢俱組裝、餐廳等 ·· 網站都非常適合。更多 多種網站架設方法

Amelia 有付費功能嗎?

Amelia 本身有內建的現場付費設置,非美國區域的網站站長,可以選擇 WooCommerce 付款方式,連結 WooCommerce 進行付款。更多 WooCommerce 是什麼WooCommerce 基礎教學指南

台灣的站長可以選擇在 WooCoomerce 連結 綠界官方外掛 或是 RY WooCommerce Tools 外掛 ,讓付款變得更加方便。


WordPress 學習資源

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

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

8 thoughts on “預約網站設計 :WordPress 線上預約系統+模板套用(自架寶典)”

    1. 小犬網站 - Luna

      嗨,Almee,

      在 Amelia > 設定 > 一般設定,找到「 Default Time Slot Step 」選項,

      設定為 15 分鐘即可。

    1. 小犬網站 - Luna

      嗨,Almee,

      Amelia 預設狀態下使用員工來預設同一時段的預約次數。

      將每次預約服務(約會)默認狀態設置為「 已批准 」。

      這樣其中一位員工被預約時,他被預約的該時段就不會顯示在前台上,但其他員工的同時段仍可以被預約。

      目前 Amelia 的設置大略是這樣,如果還有比較詳細的設定希望被解答,也可以再留言補充唷:)

  1. 謝謝小犬的分享,請問有可能結合點數制度嗎?? 預約完成後是用點數去扣點預約課程的概念,謝謝~!!

  2. 您好:

    想請問若我的網站並不想特別開啟會員功能,一律以訪客身份預約的話,是否也適用這款預約外掛呢?謝謝分享!

    1. 犬哥網站 - Luna

      嗨,TIDYMAN,

      可以的唷,那就是不用特別去做會員面板等 .. 相關的設定,訪客就可以直接在前台下預約訂單囉:)

Leave a Comment

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

回到頂端