專注於架設企業網站,分享WordPress教學和Elementor教學

如何使用WooCommerce的12個小工具(Widgets)

更新日期:2024-06-17
本系列教學
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我

WooCommerce小工具可以讓你在WordPress架設企業網站時,添加不同產品功能到頁面上,譬如展示最新產品、產品分類、搜索產品、產品價格篩選等等。

如下圖所示,這些小工具位於WordPress後台的外觀》小工具頁面中,你可以將它們添加到網站主題設定的區域中。 下圖中右側的主側邊欄、頁面小工具區域1等便是區域,網站主題是指你安裝並啟用的WordPress主題,不同主題提供的區域有所不同,並且不同主題的小工具設計樣式也不同。

WooCommerce小工具

如何添加WooCommerce小工具到頁面中

在WordPress後台的外觀》小工具頁面中,找到產品相關的小工具,如下圖所示,點擊小工具的右側三角箭頭,在下拉選項中找到你想要添加它們的區域名稱,選中區域后,點擊添加,即可將這個小工具添加到對應的區域中。 一般我們用的比較多的區域是:Woocommerce側邊欄和產品側邊欄。

WooCommerce小工具

然後,通常在網站主題的設置中,如果你需要為頁面添加側邊欄,以Astra主題為例,你想在產品分類和產品頁面添加側邊欄,請查看教學:《 Astra主題教學:免費架設企業網站》。

如果你使用Elementor Pro製作產品列表頁範本,可以使用Elementor的sidebar元素來將小工具所在區域加入到頁面中。

WooCommerce小工具介紹

啟用的產品篩檢程式

顯示已啟用的產品過濾器的列表,如下圖所示,我在產品列表中添加了兩個產品篩檢程式,分別是按價格篩選和按顏色篩選,當你調整篩選內容時,在啟用過濾器一欄中,會展示你選擇的篩選項。

WooCommerce小工具 - 啟用的產品過濾器

購物車

當客戶把商品加入購物車時,在這個小工具裡會展示購物車內容與結帳按鈕。

image 83

按屬性篩選產品

當你給產品設置了屬性時,譬如顏色、尺碼等等,這個小工具能讓客戶按照屬性進行篩選,譬如篩選出藍色的產品。

WooCommerce小工具-按屬性篩選產品

下圖是這個小工具的配置項,你可以設置標題,選擇進行篩選的屬性,屬性值展示的形式(列表和下拉),還能設置查詢類型,即:當客戶選中多個屬性值時,屬性值之間是和的關係,還是或的關係,譬如:紅和黑,還是紅或黑。 如果選擇「和」,表示既要是紅的,也要是黑的; 如果選擇“或”,表示紅的、或黑的、或者紅黑的都可以。

image 98

按價格篩選產品

WooCommerce小工具

按評分篩選產品

根據商品的客戶評分來篩選,當商品沒有評分時,就不會展示。

WooCommerce小工具

產品類別

不同主題的產品類別樣式會有所區別,譬如下圖是Astra主題的產品類別樣式,父子分類是展開的,但有些主題是伸縮式的。

WooCommerce小工具

如下圖所示,你也可以在產品類別小工具中配置分類的排序、顯示分類下的產品數量、體現層級關係、隱藏無產品的空的分類等。

WooCommerce小工具

譬如下圖中,我隱藏了空分類、顯示了產品數量。

WooCommerce小工具

如果你想使用伸縮式的產品分類,而主題又不提供這種效果的話,你可以查看這篇教學:WordPress如何製作產品分類伸縮菜單

產品

按照你設置的條件(譬如數量、順序)展示產品,譬如展示最新產品、推薦產品等等。

下圖是這個小工具的配置項,其中woocommerce自帶翻譯有點不準確,訂單其實是排序的意思(Order)。

WooCommerce小工具

好評產品

官方翻譯叫做產品按評級,其實就是按照評價從高到低選取前幾名的產品。

WooCommerce小工具

小工具效果如下

WooCommerce小工具

產品搜索

這是一個產品搜索框工具,如下所示

WooCommerce小工具

產品標籤雲

你可以在編輯產品時,給產品打標籤,每個產品可以有多個標籤

WooCommerce小工具

在產品列表頁添加產品標籤小工具后,如下圖所示,可以讓使用者快速的找出具有相同標籤的產品。

WooCommerce小工具

最新產品評價

展示你的商品收到的最新的評價,你可以控制顯示的評價數量。

WooCommerce小工具

最近流覽過的產品

展示流覽者最近看的產品,所以展示內容是因人而異的。

WooCommerce小工具

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我