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

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

一. WooCommerce 商品基本項目操作與說明

  1. 建立商品分類
  2. 建立商品標籤
  3. 商品屬性說明

二. WooCommerce 編輯商品分類、標籤、屬性

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 教學相關文章:

WooCommerce 訂單教學 – 變更訂單狀態與訂單內容修改操作方式

WooCommerce 教學(電子郵件設定) – 通知設定與進階選項

WooCommerce 教學(付款、帳號)- 付款方式、帳戶操作、隱私權設定

WooCommerce 教學(運送方式)-運送區域、選項、類別

WooCommerce 教學(一般設定) – 商店地址、貨幣選項

WooCommerce 教學(商品設定) – 商店頁面、庫存管理及可下載商品

網站架設知識推薦閱讀:

Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹

Google 搜尋 新增簡易指令:before: & after 快速篩選搜尋結果

WordPress 市佔率再創新高,2019 年成長至 33.4%!

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top