WooCommerce 教學 (商品編輯) - 商品分類、標籤、屬性項目說明

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – WooCommerce 教學 (商品編輯) 主要是說明商品操作介面的項目,包含在商品眾多時如何大量修改商品內容以及運用商品分類、商品類型、商品庫存三個條件來快速篩選想要找到的商品,另外針對商品分類、標籤、屬性這三個項目的操作方法也將逐一說明。而在第二小節中,將會沿襲第一小節的內容,針對單一商品編輯時如何正確設定商品內容,並置重點於大部分朋友比較容易混淆的商品屬性部分。
本次教學對商品標題、網址、內容、簡短說明等區域不會有相關解說,因為這部分的編輯方式與頁面及文章大同小異,如果是想要多瞭解如何操作,可以參考:WordPress 教學 基礎介紹一(文章)中的第二小節。接下來跟著鵠學苑的腳步,讓我們開始學習吧!

WooCommerce 下載點
https://tw.wordpress.org/plugins/woocommerce/
WooCommerce 官方說明文件
https://docs.woocommerce.com/
WooCommerce WordPress 外掛技術支援論壇
https://wordpress.org/support/plugin/woocommerce/

商品介面操作與分類、標籤、屬性簡介

第一步:在 WooCommerce 項目下方可以找到商品所有子選項,點擊所有商品。

WooCommerce 教學 (商品編輯)

第二步:下圖的商品是匯入主題內建 demo 網站後所建立的範例商品,當需要變更多項商品數值時,必須先選取想編輯的商品,選擇左上角的批次操作中的編輯,再點選套用。

WooCommerce 教學 (商品編輯)

第三步:批次編輯中點選X是將商品移除,不會在此次編輯中生效,商品分類勾選後所有選中商品都會套用此分類,近況概述如果選擇草稿,可以讓選中的商品不要顯示在網站前台中。下圖中標示的商品資料區域,則可以對同一類型的商品資訊做統一變更。

WooCommerce 教學 (商品編輯)

第四步:以修改價格為例,可以看到該欄位點選後有三個選項,無論選擇指定價位、漲價或降價,都如圖二一樣需要輸入價格,只有計算單位不同而已。其他的選項操作方式大同小異,至於詳細的選項說明,會在之後的相關教學文章做解釋。

WooCommerce 教學 (商品編輯)

WooCommerce 教學 (商品編輯)

第五步:以分類作為篩選條件,可以快速找出同一分類的商品,在商品上架時可以善用此功能,避免編輯錯誤。

WooCommerce 教學 (商品編輯)

第六步:使用商品類型篩選通常用於找出可變商品或組合商品,這一類的商品會有較多的選項,也較為複雜,很容易頻繁的編輯,善用此篩選條件可以更好管理此類商品。

WooCommerce 教學 (商品編輯)

第七步:存貨狀態是銷售相當著要的一環,以此條件來篩選可以了解商品銷售狀態,並與報表做比對,進而決定哪些商品需要在下一季增加或減少數量。

WooCommerce 教學 (商品編輯)

(1) 建立商品分類

第一步:進入商品分類頁面,新增分類時有幾個欄位需填寫,以下介紹:

  1. 名稱:指定在網站前台此分類要顯示的名稱。
  2. 代稱:此分類的網址名稱,建議使用英文或英數混合。
  3. 上層分類:歸類在已建立的分類之下成為子分類,也可以不指定。

WooCommerce 教學 (商品編輯)

第二步:如果説新增的商品分類有指定上層分類,那麼在顯示類型中可以指定為子分類,也可以使用預設,這個選項對商品分類設定內容沒有太大影響,大部分的狀態下選擇預設即可。縮圖的部分也是依網站設計方式來決定是否要上傳,也不是必要選項。

WooCommerce 教學 (商品編輯)

第三步:筆者建立的範例中將男士夾克設定為夏季服裝的上層分類,可以看到在夏季服裝的名稱前方有一條橫線,代表夏季服裝是男士夾克的子分類。

WooCommerce 教學 (商品編輯)

第四步:進入編輯分類就可以重新修改此分類內容,內容說明這一欄位不一定會顯示在網站前台,要看本身安裝的佈景主題是否有支援顯示。

WooCommerce 教學 (商品編輯)

(2) 建立商品標籤

第一步:新增標籤方式只需要輸入名稱與代稱即可。有些朋友會來信詢問商品分類與標籤有什麼不同,用哪一個作為商品類別比較好?最大的不同在於商品分類可以指定階層,也就是上一步驟所提到的父分類與子分類,而標籤則是無法指定階層,只能將相同性質的商品做同一個標記。

筆者舉個例子,假設網站主要銷售商品是鞋類,那麼在運動鞋中會分為籃球鞋、田徑鞋、足球鞋等,這些就可以指定為運動鞋的子分類,並且在網站選單中顯示階層式連結,而標籤則會以商品特色做單一關鍵字來定義,比如籃球鞋的標籤就可以是 ” 2019 NBA 明星賽鞋款 ” 像這一類使用在搜尋時會使用的相關關鍵字來作為標籤。

WooCommerce 教學 (商品編輯)

第二步:在已建立的標籤中點選編輯,可以進入修改畫面。

WooCommerce 教學 (商品編輯)

第三步:與分類編輯方式相同。

WooCommerce 教學 (商品編輯)

(3) 商品屬性說明

第一步:商品屬性也是一個容易搞混的項目,但實際上並不難,因為屬性與分類標籤在用途上有很大的區別,如下圖所示,在屬性中筆者建立 color 及 size 兩個項目,所設定的是商品更為細節的區分,而在網站前台來說,屬性是讓顧客在購買商品時可以根據商品特點作為條件來做選擇,比如鞋子有區分尺寸與顏色,當我們為商品加入此兩種屬性,在一般商品上就會顯示所有此商品具有的顏色及尺寸,而在可變商品上則可以直接選擇。

WooCommerce 教學 (商品編輯)

筆者以 size 作為範例,點選編輯進入後,可以看到屬性介面多了啟用彙整預設排列順序兩個選項,啟用彙整是指當點選此屬性的網址時,只要具有此屬性的商品會顯示一個商品彙整頁面,比如點選 size 中的 XL 連結,就會顯示所有 XL 尺寸的商品頁面。

當商品眾多時可以利用此功能製作選單列表或篩選器,讓顧客可以根據屬性更快找出需要的商品。但在啟用商品屬性彙整頁面前,必須要在設定中的永久連結先指定商品屬性網址的起點,比如說這個網址:http://demo7.design-hu.tw/product-attribute/color/black/ 中 product-attribute 就是筆者所設定的網址起點,如果沒有設定永久連結,則商品屬性彙整頁面只會顯示 404 找不到頁面,這一點提醒大家。

預設排列順序是指在前台顯示商品屬性時使用怎樣的方式做排列,以下說明:

  1. 自訂排序:在屬性清單中以滑鼠拖曳項目決定順序。
  2. 名稱:按照英文字母或數字的順序排列。
  3. 名稱(數值):按照數值大小做由小至大的排列。
  4. 項目編號:按照屬性 ID 編號做排列。

WooCommerce 教學 (商品編輯)

第二步:規劃項目是指此屬性所具有的選項,以下圖為例, size 就會有 L、M、XL 等尺寸單位。下方圖二則是進入規劃項目後的編輯畫面,新增項目方式與商品標籤相同,而圖中右側標示三條線的圖示,就是上一步驟中提到的自訂排序,只要將游標移到項目圖示的位置點選滑鼠左鍵不放,就能以拖曳的方式變更項目順序。

WooCommerce 教學 (商品編輯)

WooCommerce 教學 (商品編輯)

第三步:屬性項目內容修改可以在名稱小選單中點選編輯,進入後如圖二所示,修改方式與商品標籤相同。

WooCommerce 教學 (商品編輯)

WooCommerce 教學 (商品編輯)

如何變更單一商品分類、標籤、屬性資料

第一步:在所有商品頁面中點選新增,筆者以新建商品作為範例。

WooCommerce 教學 (商品編輯)

第二步:在商品編輯頁面中的右側欄位,由上至下分別為商品分類(勾選)、商品標籤(輸入標籤名稱搜尋)、商品圖片(媒體庫單選圖片或上傳圖片)、商品圖庫(可以在媒體庫多選圖片或上傳圖片)。商品圖片只能設定一張,而商品圖庫則是用於 WooCommerce 商品頁面的圖片展示區塊。

WooCommerce 教學 (商品編輯)

第三步:設定商品屬性要先找到商品資料欄位,點選屬性後在自訂商品屬性欄位中選擇想要加入的屬性名稱,並點選新增按鈕。

WooCommerce 教學 (商品編輯)

第四步:筆者為此商品加入 size 的屬性,點擊全選按鈕後會將此屬性具有的項目全部加入到數值欄位中,接續點選新增並儲存屬性,如果說想要在前台商品頁面中顯示此屬性,在商品頁中可見這個選項必須要勾選。如果只想顯示特定屬性項目,只需要在想刪除的項目旁點選 x 就可以刪除了。

WooCommerce 教學 (商品編輯)

第五步:下圖就是單一商品前台中筆者設定分類與標籤後顯示的樣式,分類與標籤的名稱會連結到該分類標籤的商品彙整頁面。

WooCommerce 教學 (商品編輯)

第六步:因為有勾選屬性在商品頁可見的選項,因此在額外資訊中會顯示 size 以及其具有的項目。

WooCommerce 教學 (商品編輯)

結語:

商品屬性的應用其實很廣泛,在本篇教學中是以一般商品做為範例,因此只有單純在網站前台顯示屬性項目,在後續教學中會講到可變商品與組合商品,這部分就會運用到商品屬性來加入各種不同的商品變化,對比起今天的基礎教學會更加複雜一些,在希望能幫助大家的前提下,鵠學苑會盡量以實際案例來說明如何設定。
今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

woocommerce相關文章:

網站架設知識推薦閱讀

Google One 介紹 – 全新雲端硬碟方案,擴充更多儲存空間!
Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹
Google 搜尋 新增簡易指令:before: & after 快速篩選搜尋結果

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端