WooCommerce 小技巧 – 2 種方式做出懸浮購物車、迅速結帳

WordPress 架站除了能夠經營部落格、發表文章之外，更可以透過強大的外掛社群中數萬種外掛組合出各式各樣的功能，說是像樂高積木一樣能夠帶來無窮的樂趣與可能性也不為過。

在這些可能性之中，最吸引人的就是可以利用 WooCommerce 等商店、購物車外掛直接架設購物網站販售商品、課程、服務了。

如果單純使用 WooCommerce 外掛，商店、購物車的頁面、功能稍嫌呆板且流程繁複，容易讓顧客在購物的過程中分心尋找需要的功能，或是分心看到許多其他資訊。

在電子商務的領域中，也有購物流程最佳化的研究，我們今天就來介紹 2 種新增懸浮購物車的方式，以及加快結帳流程的小技巧。

方法 1 – Blocksy 佈景主題編輯器

Blocksy 是最近快速崛起、頗受網頁設計社群青睞的輕量佈景主題編輯器，除了彈性、美觀的 UI、UX 設計之外，Blocksy 還提供了 14 種不同主題的 Starter Sites 範本 (陸續增加中) 讓大家可以快速建立網站。

目前提供的網站範本主題有：

• Justice – 專業服務
• Wedding – 婚禮主題
• Web Agency – 網路服務 (Saas、WordPress 外掛等) 創業、開發主題
• Persona – 個人網站
• Yogi – 瑜珈工作室
• Homi – 生活風格、居家選物
• Tasty – 食譜分享
• Business – 商業服務
• Product Reviews – 產品推薦、評論
• Charity – 慈善、NGO
• Travel – 旅遊風格
• App – 應用程式、網路服務
• Modern Shop – 線上購物 ☆
• Blocksy News – 新聞

可以到官網看看這些 Starter Sites 範本的實際樣貌，做為網站設計的參考唷。

而我們今天要介紹的就是透過 Modern Shop 範本，快速建立線上購物網站並透過簡單的設定功能做出懸浮購物車、側邊滑出購物車功能，並且搭配簡單的 CSS 加快結帳流程。

安裝 Blocksy 與 Blocksy Companion

首先，到 WordPress 後台的外觀 > 佈景主題，點選「安裝佈景主題」後搜尋 Blocksy。

並點擊「安裝」。

因為接下來介紹的購物車功能是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能，所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

如果想先使用免費版的人，可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

提醒：如果有購買付費版，只需要安裝 Blocksy Companion (Premium) 即可，不需安裝免費版的外掛。

安裝 Modern Shop 範本

Blocksy 安裝完成之後，從後台進入 Blocksy 的控制面板，點選 Starter Sites 後找到 Modern Shop。

點擊「Import」開始安裝步驟。

Step 1 – 安裝 Child Theme

透過安裝 Child Theme，未來可以直接新增自訂 CSS 代碼，不會因為 Blocksy 升級新版本而受到影響。

Step 2 – 選擇頁面編輯器

這個範本目前提供兩種頁面編輯器 Brizy、Elementor 可供選擇。(不同範本使用的頁面編輯器不盡相同)

Step 3 – 安裝必要的外掛

Modern Shop 範本中還有使用到 Contact Form 7 的功能。

Step 4 – 匯入範本內容

實際上後續編輯頁面時如果拿掉了頁面中使用的 Contact Form，是可以將 Contact Form 7 外掛移除的。

懸浮購物車 – 單一商品頁

要使用單一商品頁的懸浮購物車功能，需要啟用 WooCommerce Extra。

從後台進入 Blocksy 的控制面板，點選 Extensions > Pro Extensions 後找到 WooCommerce Extra。並點擊「Activate」。

接著到 WordPress 後台的外觀 > 自訂，可以在 WooCommerce 下找到單一商品功能。

從頁面元件下，可以啟用 Floating Cart 功能，並進行設定。(需要啟用 WooCommerce Extra 後才會出現)

單一商品頁的懸浮購物車 (Floating Cart) 可以選擇：

• 捲動頁面時的固定位置 – 最上方或最下方
• 是否要顯示商品名稱
• 不同裝置上的顯示

一旦向下捲動超過單一商品頁面中的「加入購物車」按紐，就會出現懸浮購物車了。

懸浮購物車 – 全站

要使用全站的懸浮購物車功能，需要啟用 Shortcuts Bar。

從後台進入 Blocksy 的控制面板，點選 Extensions > Pro Extensions 後找到 Shortcuts Bar。並點擊「Activate」。

接著到 WordPress 後台的外觀 > 自訂，就可以在擴充模組下找到 Shortcuts Bar 功能了。

在 Shortcuts Bar 的設定頁面中可以設定懸浮捷徑條，在捷徑 Shortcuts 中將 Cart 加入就可以有懸浮購物車的功能了。

除了可以設定桌面、平板、手機三種不同裝置的設計、顯示偏好之外，也可以在捲動頁面時隱藏懸浮捷徑條。

此外，還可以按照頁面種類、訪客角色、登入狀態等條件決定是否顯示此懸浮捷徑條。

側邊滑出購物車

那麼要如何讓顧客按下購物車圖示或將商品加入購物車後，能夠立即從側邊滑出購物車內容呢？

到 WordPress 後台的外觀 > 自訂，可以在一般選項下的頁首中找到 Cart 功能。接著用滑鼠拖放的方式決定 mini cart 在頁首的顯示位置。

進入 Cart 的設定頁面後，提供的功能相當豐富：

• 選擇按下購物車圖示時顯示的購物車抽屜形式 – 下拉式選單或滑動
• 選擇滑出方向 – 從左邊或右邊出現
• 在不同頁面 (商店彙整頁面、單一商品頁面) 下將商品加入購物車時，也可以決定加入後是否要立即從側邊滑出購物車內容
• 在側邊滑出購物車中可以直接修改商品購買數量

迅速結帳、移除「查看購物車」- CSS 代碼

如上述所說的，可以在側邊滑出購物車中直接查看商品、購買數量以及總金額，如此一來就不需要提供讓訪客前往「購物車」頁面的選項了，所有的操作都可以讓顧客透過懸浮購物車，點開側邊滑出購物車快速查看、修改購買資訊後，就能立刻前往結帳了。

為了移除側邊滑出購物車中的「查看購物車」按紐，我們使用 Code Snippets 工具 WPCodeBox 加入下述 CSS 代碼。

.woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
    display:none;
}

.woocommerce-mini-cart__buttons .button.wc-forward {
    --gridColumn: span 2;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

第一段將「查看購物車」按鈕隱藏。要特別注意的是，因為「查看購物車」、「結帳」兩個按鈕都在同一個 class 下，所以透過排除的方式把「非」結帳按鈕隱藏。

第二段則是將「結帳」按紐的寬度重設，並且修改按鈕為圓角較不死板。大家可以與上圖比較按紐的差異。

索取 WPCodeBox 超優惠折扣

WPCodeBox 是相當好用的 Code Snippet 外掛，對於擁有、管理多個網站的人來說，可以將常用的 PHP、CSS、SCSS、LESS、JavaScript 等程式碼上傳到雲端，並直接於網站中下載需要使用的程式碼。

此外，WPCodeBox 也提供條件編輯器功能 (Condition Builder)，可以自由的指定執行代碼的條件。

WPCodeBox 提供給 Quants Note 讀者「超優惠」折扣，歡迎訂閱取得優惠碼唷！

索取優惠碼

Subscriber Only!

成功訂閱電子報之後，我們後續會將 WPCodeBox 的優惠碼寄給您！

I agree to receive newsletter and accept the data privacy statement

【訂閱說明】

輸入 Email 且按下訂閱電子報之後，請至電子郵箱搜尋「Quants Note 電子報訂閱確認信」，完成訂閱流程。

成功訂閱電子報之後，系統就會自動將 WPCodeBox 的優惠碼寄給您！搜尋「WPCodeBox 優惠碼」信件，優惠碼就在郵件內容中唷！

方法 2 – Orderable 外掛

由於上述提到的 Blocksy 購物車功能是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能，這邊我們也介紹一款特別的購物車外掛，一樣可以提供懸浮購物車功能，並且在側邊滑出購物車中也沒有「查看購物車」按紐。這些功能在 Orderable 免費版外掛就有提供。

關於 WordPress 官方外掛頁面 – Online Ordering System For Restaurants & Local Retail by Orderable。

安裝 Orderable 免費版

啟用後可以先跳過導引的初始設定流程。

簡單設定

接著，從後台可以找到 Orderable 選單，進到 Settings 頁面可以看到以下三個分頁。

Store Settings

從 Store Settings 下的設定我們可以看出來這個外掛的主要用途是針對實體店面銷售實體商品 (如：餐飲行業) 的，提供的設定功能包含：

• 店面營業時間
• 時區
• 可提供送貨或到店自取服務選擇
• 可允許提前 N 日購買
• 店休日期

因為我們只需要懸浮購物車的功能，所以完全不需要修改這個分頁下的設定。

Tip Settings

Pro 付費版可以提供顧客在結帳頁面中給「小費」的功能。

Style*

我們需要的簡單設定主要是在 General 與 Mini Cart Settings 中的設定。

General 下的 Brand Color 可以決定側邊滑出購物車中按紐的顏色，Button Style 則可以選擇按鈕樣式為方形或圓形的。

Mini Cart Settings 下的 Cart Icon Position 可以決定懸浮購物車的位置，固定在螢幕的哪個角落。如果想要微調位置，還可以透過 Fine-Tune Position 調整懸浮購物車與螢幕邊界的距離。

懸浮購物車 – 全站

完成設定後，可以發現當購物車中沒有商品時，畫面上是不會出現懸浮購物車的。

一旦將商品加入購物車之後，會立即出現懸浮購物車並且顯示購物車中的商品數量。

點擊展開懸浮購物車，可以直接調整商品的購買數量或將商品移除、取消購買，並且直接前往結帳，相當迅速、方便。

結語

透過 Orderable 與 Blocksy 我們可以輕鬆做出懸浮購物車功能，並將線上購物網站的流程加速，轉換為「購買商品」>「懸浮購物車」>「結帳」，簡化消費者的購物體驗。

其中，使用 Orderable 是相當方便、簡易可以快速達到目的的解決方案，然而使用者還是需要注意外掛之間可能出現的相互衝突問題，當遇到這類問題時最好的方式還是直接與外掛官方團隊聯繫，請官方協助解決。

而按照前面所介紹的方式我們也可以用 Blocksy 做出同樣的功能與購物流程 (可以少安裝一個外掛)，雖然 Pro Extensions 是付費功能，但在少少的費用下能帶來的功能卻相當豐富、彈性，並且是超輕量的編輯器，能夠取得相當好的網頁速度評分。

有興趣的朋友可以參考 Blocksy Pro 目前的定價 (以下價格為美金)：

並透過以下推薦連結直接到 Blocksy 官網購買，記得使用優惠碼取得折扣唷！

未來我們也會持續介紹 WooCommerce 購物車的其他小技巧，敬請期待。

延伸閱讀 – 「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」。