專注於企業網站架設,分享WordPress教學和Elementor教學
不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%,感謝你的互惠互助

WooCommerce如何添加可變產品

更新日期:2021-05-10

掃碼加入 讀者學習群

相關 教學

我自用的 架設網站資源

當你點擊本站的鏈接購買主機、主題、外掛,我會得到一些佣金用於運營網站,但不會影響你的購買價格,我只推薦自己在用的,感謝有你的支持~比心( •̀ ω •́ )y

Cloudways

不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%
了解詳情→

elementor logo gradient 01 1
Elementor

最熱門的網頁可視化設計編輯器,我的網站就是用它建的
了解詳情→

Namesilo

註冊網域,購買時使用優惠券loyseo可減1美元
前往註冊→

Share on facebook
Share on twitter
Share on linkedin

如果你的企業網站架設的是零售商城,你很大可能會用到WooCommerce的可變產品,它是WooCommerce中的一種產品類型,允許你提供產品的一組變體,並控制每個變體的價格、庫存、圖像等。它們可以用於像襯衫、鞋子、口紅這樣的產品,你可以提供大號、中號和小號以及不同的顏色,下圖是一個鞋子商品的展示示例,本篇是WooCommerce教學系列之一,將詳細講解如何在WooCommerce中添加可變產品。

image 114

備註:本教學所用的鞋店示例是基於主題Astra的付費模板Shoe store

添加可變產品

步驟1、設置產品類型

要添加可變產品,請創建新產品或編輯現有產品。

  1. 請訪問後台的Products
  2. 選擇“Add Product”按鈕或編輯現有產品,你將能看到product data欄目。
  3. 從“product data”下拉列表中選擇“variable product”。
variable product type 1

步驟2.添加變量使用的屬性

在“屬性”部分中,在創建變體之前你需要添加屬性,你可以使用全站通用的全局屬性,或者給產品使用的自定義屬性。

局屬性

要使用全局屬性:

  1. 你需要先創建全局屬性
  2. 在產品頁面的product data》attributes中,點擊下拉列表,選擇一個屬性,然後單擊“添加”。
global attribute
  1. 在下圖中,點擊“Select All”按鈕,可以快速將所有屬性值添加到產品中。
  2. 勾選“Used for Variations”複選框以告知WooCommerce它將用於您的產品變體,如果不選的話,就無法添加產品變體。
  3. 單擊“Save attributes”保存屬性。
global attribute 2

其中visible on the product page表示這個屬性將在產品頁面展示出來,如下圖所示。如果你不勾選它們,就不會呈現在產品頁面的additional information標籤頁中。

image 116

自定義屬性

1.要給產品添加特定的新屬性,請按如下步驟操作:在product data的attributes標籤頁中,選擇Custom product attribute並點擊Add按鈕.

custom attribute

2.給屬性命名,譬如size,並設定屬性值,多個屬性值之間用豎線|隔開,譬如:Small | Medium | Large,勾選“Used for Variations”複選框以告知WooCommerce它將用於您的產品變體,如果不選的話,就無法添加產品變體,最後單擊“Save attributes”保存屬性。

custom attribute 2

步驟3、添加變體

要添加變體,請前往“產品數據”(Product Data)欄目中的“變體”(Variations)標籤頁。

手動添加變體

  1. 從下拉菜單中選擇“Add Variation”,然後選擇“Go”。
image 102
  1. 選擇變體的屬性,要更改其他數據的話,請單擊三角形圖標以展開變體。
  2. 編輯變體的內容,其中唯一的必填字段是“常規價格”(Regular Price)。
  3. 單擊“保存更改”(Save changes.)。
image 103

這種方法需要你逐個添加變體,而下面的方法屬於批量添加變體。

添加所有可能的變量產品

選擇“從所有屬性創建變體”(Create Variations from All Attributes),讓WooCommerce創建各種可能的變體組合,然後單擊“執行”(Go):

create all variations 1

它將為每個可能的屬性組合創建一個新的變體(每次運行最多創建50個變體)。如果你有更多可能的組合,你可以再運行一次。

譬如,我們有兩個屬性:顏色(屬性值為藍色和綠色)和大小(屬性值為大號和小號),則會產生以下變體:

  • 大號藍色
  • 大號綠色
  • 小號藍色
  • 小號綠色

如果以後添加其他屬性,你可能需要重新生成變體,以使屬性組合能正確發揮作用。

如果您有15個以上的產品變體,請使用下圖所示的導航按鈕翻頁查看產品,每次翻頁到一組新的變體時,都會保存上一組變體,你不用擔心翻頁時產品數據丟失了。

variations 15

設置默認變體

在變體標籤頁中,你可以設置當客戶進入這個產品時看到的默認變體。在下圖的示例中,我們沒有設置默認值,因此客戶需要自行從產品頁面中選擇顏色和大小。

如需設置默認值,您需要至少創建了一個變體。

default variations

如果你希望當用戶訪問產品頁面時,默認已經選擇了某個變體,請將這個變體設為默認值。這還可以使“添加到購物車”按鈕自動出現在變體產品頁面上。

image 104
image 105

批量編輯變體

在設置默認變體下方,你可以看到下圖所示的操作項,其中大多是批量編輯選項,你可以對所有變體的狀態、價格、庫存、物流等進行批量修改。

image 123

示例:如果想要修改所有變體的價格,那麼你就選擇set regular prices。

bulkedit 2

接著我們來整體講解一下變體產品的數據設置(product data)

產品數據/Product data

在product data欄目中,我們能看左側有一列標籤,譬如general、inventory等等,我們挨個來看看。

一般配置/General
image 107

你需要在woocommerce的setting中啟用納稅(如下圖所示),這個配置欄才會出現。

image 106

包含了兩個配置項:

  • Tax status/納稅狀態:包含選項:應納稅,僅物流(需要納稅),無(無稅費)。
  • Tax class/納稅類別:包含選項:standard、reduce rate、zero rate。
備註:跨境稅費的相關知識離我有點遙遠和困難,無法做出詳盡的解釋,下文也將以“不啟用納稅”為基礎來講解。如果懂行的,且願意分享的話,可以與我聯繫,謝謝呀~
庫存/inventory

可變產品的庫存可以在產品和變體級別進行管理,我們進入庫存/inventory標籤頁

image 108
  • SKU:產品的唯一編號。
  • Manage Stock/管理庫存:勾選enable stock management at product level以啟用產品級庫存管理,這表示所有變體產品累計的庫存只有這裡的設置的那麼多。當勾選後,還會出現如下配置子項。image 109
    • stock quantity/庫存數量
    • allow backorders/允許缺貨嗎? :含選項:不允許、允許但通知客戶、允許。如果允許,則允許0庫存或負值庫存銷售
    • low stock threshold/低庫存閾值:當庫存觸及你填寫的數值時,會發郵件通知你。
  • sold individually/單獨銷售:啟用此選項後,單個訂單中僅允許購買一份當前商品。如果一個商品有多個變體,那每個變體只能買一份。
image 118
image 117
配送/Shipping
image 110
  • weight/重量:以千克為單位,填入數值
  • dimensions/尺寸:以厘米為單位,填入長寬高
  • shipping class/配送類型:配送類型用於標記擁有相似配送方式的產品,當你已經配置了配送類型時,這裡才有選項。你可以查看這篇文章了解配送運費相關的教學:如何配置WooCommerce運費費率表Table Rate Shipping
關聯產品/Linked Products
image 131
  • upsell / 追加銷售:這裡用於選擇你推薦的、可替代當前商品的更貴、更好的商品,它在產品頁面展示。
image 112
  • cross-sell / 交叉銷售:當用戶將當前商品加入購物車時,交叉銷售的商品也將在用戶的購物車頁面推薦。
image 111

屬性Attributes標籤頁變體variations標籤頁在本文開篇已經介紹過一些,接下來詳細介紹一下單個變體的配置。

變體/variations

點擊變體右邊的Expand按鈕展開變體信息,我們將能看到下圖所示的內容,譬如:圖片、SKU、價格等等。

variation
  • 圖片:點擊下圖中的圖片標記,選擇一張變體圖片上傳,保存即可。
variation image

然後你打開這個產品,選擇對應變體後,產品上展示的圖片會對應變為你上傳的變體圖片。

image 113
  • SKU:該變體的唯一編號,如果留空,則使用產品的SKU。
  • Enabled/啟用:啟用或禁用變體,禁用了用戶就看不到了唄。
  • Downloadable/ 可下載的:如果這是一個可下載的產品,請勾選它,勾選後將出現如下配置。image 119
    • Downloadable Files/可下載的文件 – 你可以添加供客戶下載的文件。
    • Download Limit/下載限制– 設置客戶可以下載文件的次數。如果不限制下載次數,請不填它。
    • Download Expiry/下載到期時間 – 設置在購買後可下載的有效期,到期後就不再能下載。
  • Virtual/虛擬商品 – 如果這個商品不是實體的,或者不需要運輸,就選中它,選中後,配送設置將被移除。
  • Manage Stock/管理庫存:如果不勾選,那就表示共用產品級別的庫存;如果勾選,則表示給變體自定義庫存,並且有如下兩個配置子項。image 120
    • Stock quantity/庫存數量
    • Allow backorders/允許缺貨銷售嗎? :含選項:不允許、允許但通知客戶、允許。如果允許,則允許0庫存或負值庫存銷售
  • Regular Price/常規價格 (必填的) – 設置變體的價格。
  • Sale Price/促銷價格 (非必填的) – 為變體商品設置促銷價格。
  • Stock status/庫存狀態:當你在inventory標籤頁沒勾選啟用產品級庫存時,才會出現這個選項,用於讓你設置變體是否有貨、無貨、缺貨可售。image 121
  • Weight/重量:設置變體的重量,或留空以使用產品的重量。
  • Dimensions/尺寸:變體的高度,寬度和長度,或留空使用產品的尺寸。
  • Shipping class/配送類型:它會影響變體的配送,如果配送類型與產品不同,請在這裡選擇。如果你未添加過配送類型,那配送類型只能等同於產品。image 122
  • Description/描述:針對變體的描述,不會展示給客戶,僅供自己使用。

客戶看到的產品是怎樣的?

在前端,當查看可變產品時,用戶會看到用於選擇變體的下拉框。根據用戶的選擇,將展示對應的庫存和價格。

如果你安裝了免費外掛Variation Swatches for WooCommerce,它能讓顏色和尺碼直觀的展示。如下圖所示

image 114

如果用戶未選擇變體,就嘗試點擊“添加到購物車”按鈕,則會看到一條提示,要求用戶選擇變體屬性。

image 115

在“產品列表”(Product Archive)頁面中,不會顯示“添加到購物車”(Add to Cart)按鈕,因為在產品頁面上選擇“添加到購物車”(Add to Cart)之前必須先選擇變體。

archive page

相關教學推薦

本篇文章由LOYSEO.COM基於https://docs.woocommerce.com/document/variable-product/翻譯、重排、加工修改。

點贊
0 / 5 5

Your page rank:

超快獨享主機
Cloudways
免費試用3天,無需充值
費用月結| 不用一次性付整年
*註冊優惠碼Promo code:LOYSEO
*用Gmail郵箱,註冊易通過