這是一篇完整的「 WooCommerce 商品輪播 」設計教學，我們將使用 Product Slider for WooCommerce 外掛，電商網站中加上商品輪播功能。
架設購物網站，站長可能會想讓網頁擁有輪播商品展示的功能，運用這些動態效果，讓購物頁面的視覺呈現更精美，從而增加購買率。
有些頁面編輯器的滑塊功能，可能不是太完整，或是無法顯示站長想呈現的樣式，因此，使用外掛也是不錯的選擇。更多 Elementor 基礎教學。
這款外掛，擁有 3 種設計樣式、可調整輪播速度、展示商品數量、顏色調整等 .. ，多種功能可以設定，整體操作起來也非常簡單。
文章會教大家如何使用外掛，做出簡單的 WooCommerce 商品輪播功能。話不多說，趕快往下學習吧：）
- 建立網路商店需準備？
- 1. Product Slider for WooCommerce 是什麼？
- 2. 安裝＋啟用 Product Slider for WooCommerce
- 3. 新增＋設計 WooCommerce 商品輪播滑塊
- 4. 商品輪播，正式上線
- 常見問題
- 聯絡犬哥網站
如何在 WooCommerce 加上商品輪播功能，讓商品更容易吸引目光？
網路商店需準備？
不論是架設購物網站或是形象網站，都需具備網站架設 3 要素，如下。
| 架設網站 3 要素 | |||
|---|---|---|---|
| 1. 網域申請 （申請門牌） |
2. 主機租用 （租一塊地） |
3. 網頁設計 （搭建房子） |
|
- 個人網域：就如同家裡門牌一樣，可以讓訪客順利搜尋到網站。
- 主機租用：網站需有一個放置的家，而主機就是網站的家，可依照個人需求挑選適合的主機。
- 網頁設計：有了個人網域＋虛擬主機，接下來就是做網頁設計，打造網站品牌風格。
如果還沒有個人網站怎麼辦？
對於新手來說，假如不知道如何一次完成上面 3 要素，可以使用 hosting.com 主機。
hosting.com 是由 World Host Group 於 2025 年收購並整合 A2 Hosting 後推出的虛擬主機。它繼承了 A2 Hosting 的 Turbo Server 高速架構與 NVMe SSD 儲存技術。
它從 2001 年就開始提供相關服務，由於創辦人本身有程式相關背景，所以主機速度優化上，一直是它們的服務重點。
它在虛擬主機上提供多種服務項目，像是共享主機、WordPress 專業主機、VPS 主機、獨立主機，隨著你的網站規模越大（流量越多）可同步升級服務，滿足不同時期的需求。
搭配 24 / 7 / 365 全年無休的線上客服，遇到任何問題能在第一時間幫助解決。
不需擔心語言不通問題，因為 hosting.com 客群來自世界各地，用簡單的英文程度（Google 翻譯），他們都聽得懂唷。
hosting.com 網站速度表現好嗎？
hosting.com 在全球各地有多個數據基地台，滿足不同地點的主機連線速度，像是台灣用戶就可到連線最近的新加坡基地。
這是我之前主機放置在 hosting.com 所做的記錄（評測紀錄是 A+），網站加載速度大約 83 毫秒，是優質的主機速度。
如果要評估主機與網站速度，建議 不要只看單一「 毫秒數 」或單一第三方分數，而是 一起看 Core Web Vitals 與伺服器回應表現。
以 Google 與 Chrome 文件來看，網站體驗常參考 LCP、INP、CLS 等指標；若看 TTFB，通常可把 0.8 秒內視為較理想的參考值。
這裡展示的是第三方測速工具的實測結果，可作為參考；但 實際網站速度仍會受到主題、外掛、圖片大小、快取、CDN 與頁面內容影響。
hosting.com 主機任一主機方案，均採用業內高等級 Lightspeed Performance 速度表現（比一般 SSD 硬碟還更快），讓用戶擺脫主機緩慢的惡夢。
每降低一秒的網站速度，這代表能保留更多訪客留存，進而轉化成網站訂單。
hosting.com 正常運行時間和安全性
根據過去 24 個月的數據，hosting.com 全年有 99.9% 以上的正常運行時間（沒任何一家能保證 100%），這代表你網站幾乎不會異常斷線，都是穩定的在線上運作。
這使它成為主機穩定度、安全性的有力競爭者。
加上不同方案均有贈送免費的一年網域，就能夠在同一家一次完成網域＋主機租用，非常方便划算！
有完整的網域 / 主機租用＋網站架設教學嗎？這邊都幫你整理好了！
- 如果想學習網站架設，從網域、主機挑選 / 申請、WordPress 完整架站流程，都整理在這篇《hosting.com 主機教學：新手必看！完整租用流程（含方案評價）》。
- 帶你使用 hosting.com 知名國外主機製作網站，注重速度表現＆價格同樣親民，用起來非常不錯！
- 搭配文章內的專屬連結，官方均免費贈送一年網域。
- 我們已經幫助上千位讀者，順利擁有自已的形象網站，希望也對你有幫助！
1. Product Slider for WooCommerce 是什麼？
Product Slider for WooCommerce 是一款製作 WooCommerce 商品輪播功能外掛，可設定商品輪播滑塊，呈現在頁面上，添加商品頁面的視覺效果。
在商品滑塊中，通常都帶有「 加入購物車 」按鈕，非常方便使用者選購商品，並且有多達 3 種樣式可供選擇。
除此之外，也可以調整商品照片尺寸、商品數量、等 .. 多項區塊細節。
進階版本則可以調整顯示「 商品類別 」，以及擁有更多可調整樣式選擇，若站長有需求，可再前往 官方網站 查看更多功能唷：）
2. 安裝＋啟用 Product Slider for WooCommerce
這個章節，我們就來安裝＋啟用 Product Slider for WooCommerce 。
前往 WordPress 後台，外掛 > 安裝外掛，搜尋 Product Slider for WooCommerce 安裝＋啟用。
3. 新增＋設計 WooCommerce 商品輪播滑塊
Product Slider for WooCommerce 安裝＋啟用完成後，我們就可以開始新增＋設計 WooCommerce 商品滑塊囉！
新增商品滑塊＋一般設計
前往 Product Slider > Add New，新增商品滑塊，輸入名稱，因為使用免費版，這邊我們只能鎖定在「 滑塊模式 」。接著選擇滑塊樣式，有 3 種主題樣式，可供站長選擇。
接著往下滑，站長可依據圖片指示，設置滑塊樣式。
這邊我調整了欄位顯示數量、頁數限制，最後，可以點擊下方的「 Show Perview 」預覽滑塊樣式。
滑塊控制選項
接著我們點擊上方「 Slider Controls 」滑塊控制選項。
「 滑塊控制選項 」區塊可調整滑塊的動畫樣式、是否自動播放、播放速度、播放方向等 .. 動畫效果。
顯示設置
接著切換「 Display Options 」顯示選項區域，這裡可調整滑塊想顯示＆隱藏的選項，像是：商品標題、價格、評分等 .. WooCommerce 商品相關項目。
圖片設置
「 Image Settings 」圖片設定區域，這裡可調整 WooCommerce 商品輪播的圖片設計、尺寸等 .. 相關設計。
文字排版
「 Typography 」文字排版設計區域，可調整商品展示滑塊的字體設計，像是：商品滑塊標題、商品名稱字體、價格字體等 .. 多種區域的字體設計。
以上就是 Product Slider for WooCommerce 外掛設計區域的介紹。
站長可參考以上說明，完成客製化商品滑塊樣式後，點擊「 發佈 」或「 更新 」儲存滑塊選項，接著就可以讓商品滑塊正式上線。
4. 商品輪播，正式上線
設置好 WooCommerce 商品輪播滑塊，我們就可以讓它上線囉！
進入 Product Slider，上滑找到 Shortcode，複製短代碼。
前往編輯頁面，這邊我們使用的是 Elementor 作為示範。更多 Elementor 基礎教學。
進入 Elementor 編輯頁面，找到「 短碼 」小工具，拖曳進頁面。
並且貼上剛剛複製好的 WooCommerce 短碼。完成後，點擊儲存。
接著我們前往前台頁面，發現 WooCommerce 商品輪播滑塊，成功上線囉！
常見問題
如何在 WooCommerce 新增商品輪播滑塊？
可安裝 Product Slider for WooCom 外掛，幫助我們在頁面上新增商品輪播滑塊。
Product Slider for WooCom 有 3 種樣式可供站長選擇調整，能夠在頁面上添加視覺效果，豐富頁面設計，吸引顧客注意力，提升購買率：）
還有其他方法，可增加 WooCommerce 頁面設計效果嗎？
可以使用 優質頁面編輯器，選擇適合的頁面編輯器，客製化頁面設計唷！
其中我們最推薦大家使用 Elementor。更多 Elementor 基礎教學。
Elementor 是全球知名的 WordPress 頁面編輯器，有免費版本可使用，且和 WordPress 知名佈景主題 有完美兼容性。
不需會任何程式基礎，只要用區塊拖曳方式，就能客製化形象網站設計。
使用 WordPress 頁面編輯器，可以做什麼事呢？
大部分頁面編輯器，都會提供多種模板 or 區塊樣式，可直接點擊套用，就能馬上完成頁面設計，就不用從零製作，非常方便。
而且有提供多種元素功能，可簡單拖曳元素＆視覺化排版，能完成絕大部分的網頁製作。
聯絡犬哥網站
在網頁設計＋AI SEO 行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。
資源一：犬哥網站（專業 WordPress 網頁設計＆ AI SEO 行銷公司）
如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想，或是沒有被 AI 提及你的品牌。歡迎洽詢 犬哥網站（WordPress 網頁設計＆ AI SEO 行銷公司），請專家協助你會更容易！
我們有多年網頁設計、AI SEO 行銷經驗，加上上百個實戰案例，絕對能滿足您的需求！
資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）
如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？
可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！
- WordPress 高手架站課：
從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！ - SEO 排名飆升課：
教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
