找我們做網站
↑
Woocommerce · WooCommerce 外掛

WooCommerce 商品輪播教學:外掛短代碼與 Elementor 兩種做法

WooCommerce 外掛發布 2021.03.11更新 2026.10.02閱讀約 5 分鐘
WooCommerce 商品輪播教學:外掛短代碼與 Elementor 兩種做法

重點整理
在 WooCommerce 商店加入商品輪播有兩種做法:用 Product Slider for WooCommerce 外掛建立輪播並貼上短代碼,或在 Elementor 中使用 WooLentor 的商品小工具。本文分別示範設定步驟。

所有的WooCommerce外掛核心功能只有一個就是提高瀏覽者的使用體驗!為什麼這件這麼重要呢?原因很簡單瀏覽者從進入我們的電商平台開始我們就不斷的提供他們想要的內容,搭配上折扣優惠的宣傳吸引瀏覽者下單,最後能安全快速的結帳這樣一套下來就有效的提高轉換率。今天鵠學苑要分享的如何在電商首頁或尾頁加入產品輪放從而吸引瀏覽者的注意力!要利用的就是Product Slider for WooCommerce和 Elementor 這兩款外掛輕鬆製作商品輪放

Product Slider for WooCommerce

我們先從簡單的開始講解,他的操作比基礎只要網拍商店的商品數量足夠多就可以!

Product Slider
Product Slider

第一步:下載外掛
進入WordPress後台 – 在左邊的工具欄位 – 點擊外掛 -安裝外掛 – 在搜尋欄位中輸入Product Slider for WooCommerce – 點擊立即安裝即可

Product Slider
Product Slider

第二步:啟用外掛
在下載完成後還需要啟用外掛才能開始使用 – 一樣在WordPress後台 – 點擊外掛 – 已安裝外掛 – 找到剛剛下載的外掛 -點擊啟用

Product Slider
Product Slider

第三步:基礎設定
啟用完成後在左邊的工具欄位中就能找到ProductSlider點擊進入後就可以創建新的Slider

Product Slider
Product Slider

開始製作商品輪換連結時我們要先點選主題和一些基本參數(參數我們在這邊就不多做解釋了,你直接使用預設值也是完全沒有問題的。)我們重要來講解主題的部分!現在免費的版本中有三個主題可以選擇,我會把三個主題的Banner給大家看一下!至於要使用那種主題就是要看是否適合你的網站

Product Slider
Product Slider
Product Slider
Product Slider

第四步:添加到網站當中
在所有的設定完成後就只需要把短網址貼到網站上即可,短網址就在設定頁面的上方

Product Slider
Product Slider
Product Slider
Product Slider

WooLentor – WooCommerce Elementor Addon的使用方法

有了基礎的認知我們接著介紹第二種方法利用WooLentor來添加Product Slider 。

Product Slider
Product Slider

第一步:WooLentor的使用方法
一樣需要下載 WooLentor – WooCommerce Elementor Addon 下載外掛的方式和之前的一模一樣我們這邊就不在多說一次了。
我們直接來介紹他的使用方法,在左邊的工具欄位中點擊頁面 – 在產品頁面中點擊Elementor編輯

Product Slider
Product Slider

第二步:Product Layout設定
進入Elementor後在左邊就能看到所有的模板,拖放Product Layout到相應的位置

Product Slider
Product Slider

第三步:參數設定
接下來就根據自己的需求調整商品輪換連結。

Product Slider
Product Slider
Product Slider
Product Slider

一定要用輪播展示商品嗎?

輪播看起來活潑,但一次只露出幾項商品,後面的商品很多訪客不會滑到。可以依目的選擇:

  • 用輪播:版面空間有限、想在首頁展示「熱銷」「新品」等一小組商品時。
  • 用格狀列表:希望訪客一眼看到更多商品時,WooCommerce 內建的商品區塊就能以格狀顯示最新、特價或指定分類的商品,不必另外裝外掛。
  • 手機版:輪播在手機上要能用手指滑動,箭頭按鈕不要太小。

不確定哪種效果好時,可以用 GA4 比較首頁商品區塊的點擊情況,再決定要不要保留輪播。

常見問題

Product Slider for WooCommerce 免費版可以做什麼?

免費版可以建立商品輪播,選擇要顯示的商品與版型主題,再把產生的短代碼貼到頁面即可。外掛現名 Product Slider, Product Carousel and Product Grid Gallery for WooCommerce,進階版另有更多版型與篩選條件,差異以外掛頁為準。

商品輪播的短代碼可以放在哪裡?

可以放在頁面或文章的短代碼區塊、側邊欄的短代碼小工具,或 Elementor 的短碼元件中。同一個輪播可以放在多個位置,修改輪播設定後,所有放了這組短代碼的地方都會一起更新。

商品輪播會拖慢網站嗎?

會增加一些負擔,因為輪播需要載入額外的 JavaScript、CSS 與多張商品圖。建議一個頁面只放一到兩個輪播、每個輪播的商品數不要太多,並確認商品圖已經壓縮,放上去後用 PageSpeed Insights 測一次速度。

結語

以上就是製作Product Slider的兩種方式,讓瀏覽者看到更多的商品就是今天分享的重點,大家都可以嘗試添加到網站當中!

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。