专注于外贸建站,分享WordPress建站和Elementor教程

WooCommerce如何添加可变产品

更新日期:2020-12-12

如果你的外贸网站建设的是零售商城,你很大可能会用到WooCommerce的可变产品,它是WooCommerce中的一种产品类型,允许你提供产品的一组变体,并控制每个变体的价格、库存、图像等。它们可以用于像衬衫、鞋子、口红这样的产品,你可以提供大号、中号和小号以及不同的颜色,下图是一个鞋子商品的展示示例,本篇是WooCommerce教程系列之一,将详细讲解如何在WooCommerce中添加可变产品。

image 114 - WooCommerce如何添加可变产品

备注:本教程所用的鞋店示例是基于主题Astra的付费模板Shoe store

添加可变产品

步骤1、设置产品类型

要添加可变产品,请创建新产品或编辑现有产品。

  1. 请访问后台的Products
  2. 选择“Add Product”按钮或编辑现有产品,你将能看到product data栏目。
  3. 从“product data”下拉列表中选择“variable product”。
variable product type 1 - WooCommerce如何添加可变产品

步骤2.添加变量使用的属性

在“属性”部分中,在创建变体之前你需要添加属性,你可以使用全站通用的全局属性,或者给产品使用的自定义属性。

局属性

要使用全局属性:

  1. 你需要先创建全局属性
  2. 在产品页面的product data》attributes中,点击下拉列表,选择一个属性,然后单击“添加”。
global attribute - WooCommerce如何添加可变产品
  1. 在下图中,点击“Select All”按钮,可以快速将所有属性值添加到产品中。
  2. 勾选“Used for Variations”复选框以告知WooCommerce它将用于您的产品变体,如果不选的话,就无法添加产品变体。
  3. 单击“Save attributes”保存属性。
global attribute 2 - WooCommerce如何添加可变产品

其中visible on the product page表示这个属性将在产品页面展示出来,如下图所示。如果你不勾选它们,就不会呈现在产品页面的additional information标签页中。

image 116 - WooCommerce如何添加可变产品

自定义属性

1.要给产品添加特定的新属性,请按如下步骤操作:在product data的attributes标签页中,选择 Custom product attribute 并点击Add按钮.

custom attribute - WooCommerce如何添加可变产品

2.给属性命名,譬如size,并设定属性值,多个属性值之间用竖线|隔开,譬如:Small | Medium | Large,勾选“Used for Variations”复选框以告知WooCommerce它将用于您的产品变体,如果不选的话,就无法添加产品变体,最后单击“Save attributes”保存属性。

custom attribute 2 - WooCommerce如何添加可变产品

步骤3、添加变体

要添加变体,请前往“产品数据”(Product Data)栏目中的“变体”(Variations)标签页。

手动添加变体

  1. 从下拉菜单中选择“Add Variation”,然后选择“Go”。
image 102 - WooCommerce如何添加可变产品
  1. 选择变体的属性,要更改其他数据的话,请单击三角形图标以展开变体。
  2. 编辑变体的内容,其中唯一的必填字段是“常规价格”(Regular Price)。
  3. 单击“保存更改”(Save changes.)。
image 103 - WooCommerce如何添加可变产品

这种方法需要你逐个添加变体,而下面的方法属于批量添加变体。

添加所有可能的变量产品

选择“从所有属性创建变体”(Create Variations from All Attributes),让WooCommerce创建各种可能的变体组合,然后单击“执行”(Go):

create all variations 1 - WooCommerce如何添加可变产品

它将为每个可能的属性组合创建一个新的变体(每次运行最多创建50个变体)。如果你有更多可能的组合,你可以再运行一次。

譬如,我们有两个属性:颜色(属性值为蓝色和绿色)和大小(属性值为大号和小号),则会产生以下变体:

  • 大号蓝色
  • 大号绿色
  • 小号蓝色
  • 小号绿色

如果以后添加其他属性,你可能需要重新生成变体,以使属性组合能正确发挥作用。

如果您有15个以上的产品变体,请使用下图所示的导航按钮翻页查看产品,每次翻页到一组新的变体时,都会保存上一组变体,你不用担心翻页时产品数据丢失了。

variations 15 - WooCommerce如何添加可变产品

设置默认变体

在变体标签页中,你可以设置当客户进入这个产品时看到的默认变体。在下图的示例中,我们没有设置默认值,因此客户需要自行从产品页面中选择颜色和大小。

如需设置默认值,您需要至少创建了一个变体。

default variations - WooCommerce如何添加可变产品

如果你希望当用户访问产品页面时,默认已经选择了某个变体,请将这个变体设为默认值。这还可以使“添加到购物车”按钮自动出现在变体产品页面上。

image 104 - WooCommerce如何添加可变产品
image 105 - WooCommerce如何添加可变产品

批量编辑变体

在设置默认变体下方,你可以看到下图所示的操作项,其中大多是批量编辑选项,你可以对所有变体的状态、价格、库存、物流等进行批量修改。

image 123 - WooCommerce如何添加可变产品

示例:如果想要修改所有变体的价格,那么你就选择set regular prices。

bulkedit 2 - WooCommerce如何添加可变产品

接着我们来整体讲解一下变体产品的数据设置(product data)

产品数据/Product data

在product data栏目中,我们能看左侧有一列标签,譬如general、inventory等等,我们挨个来看看。

一般配置/General
image 107 - WooCommerce如何添加可变产品

你需要在woocommerce的setting中启用纳税(如下图所示),这个配置栏才会出现。

image 106 - WooCommerce如何添加可变产品

包含了两个配置项:

  • Tax status/纳税状态:包含选项:应纳税,仅物流(需要纳税),无(无税费)。
  • Tax class/纳税类别:包含选项:standard、reduce rate、zero rate。
备注:跨境税费的相关知识离我有点遥远和困难,无法做出详尽的解释,下文也将以“不启用纳税”为基础来讲解。如果懂行的,且愿意分享的话,可以与我联系,谢谢呀~
库存/inventory

可变产品的库存可以在产品和变体级别进行管理,我们进入库存/inventory标签页

image 108 - WooCommerce如何添加可变产品
  • SKU:产品的唯一编号。
  • Manage Stock/管理库存:勾选enable stock management at product level以启用产品级库存管理,这表示所有变体产品累计的库存只有这里的设置的那么多。当勾选后,还会出现如下配置子项。image 109 - WooCommerce如何添加可变产品
    • stock quantity/库存数量
    • allow backorders/允许缺货吗?:含选项:不允许、允许但通知客户、允许。如果允许,则允许0库存或负值库存销售
    • low stock threshold/低库存阈值:当库存触及你填写的数值时,会发邮件通知你。
  • sold individually/单独销售:启用此选项后,单个订单中仅允许购买一份当前商品。如果一个商品有多个变体,那每个变体只能买一份。
image 118 - WooCommerce如何添加可变产品
image 117 - WooCommerce如何添加可变产品
配送/Shipping
image 110 - WooCommerce如何添加可变产品
  • weight/重量:以千克为单位,填入数值
  • dimensions/尺寸:以厘米为单位,填入长宽高
  • shipping class/配送类型:配送类型用于标记拥有相似配送方式的产品,当你已经配置了配送类型时,这里才有选项。你可以查看这篇文章了解配送运费相关的教程: 如何配置WooCommerce运费费率表Table Rate Shipping
关联产品/Linked Products
image 131 - WooCommerce如何添加可变产品
  • upsell / 追加销售:这里用于选择你推荐的、可替代当前商品的更贵、更好的商品,它在产品页面展示。
image 112 - WooCommerce如何添加可变产品
  • cross-sell / 交叉销售:当用户将当前商品加入购物车时,交叉销售的商品也将在用户的购物车页面推荐。
image 111 - WooCommerce如何添加可变产品

属性Attributes标签页变体variations标签页在本文开篇已经介绍过一些,接下来详细介绍一下单个变体的配置。

变体/variations

点击变体右边的Expand按钮展开变体信息,我们将能看到下图所示的内容,譬如:图片、SKU、价格等等。

variation - WooCommerce如何添加可变产品
  • 图片:点击下图中的图片标记,选择一张变体图片上传,保存即可。
variation image - WooCommerce如何添加可变产品

然后你打开这个产品,选择对应变体后,产品上展示的图片会对应变为你上传的变体图片。

image 113 - WooCommerce如何添加可变产品
  • SKU:该变体的唯一编号,如果留空,则使用产品的SKU。
  • Enabled/启用:启用或禁用变体,禁用了用户就看不到了呗。
  • Downloadable/ 可下载的:如果这是一个可下载的产品,请勾选它,勾选后将出现如下配置。image 119 - WooCommerce如何添加可变产品
    • Downloadable Files/可下载的文件 – 你可以添加供客户下载的文件。
    • Download Limit /下载限制– 设置客户可以下载文件的次数。如果不限制下载次数,请不填它。
    • Download Expiry/下载到期时间 – 设置在购买后可下载的有效期,到期后就不再能下载。
  • Virtual/虚拟商品 – 如果这个商品不是实体的,或者不需要运输,就选中它,选中后,配送设置将被移除。
  • Manage Stock/管理库存:如果不勾选,那就表示共用产品级别的库存;如果勾选,则表示给变体自定义库存,并且有如下两个配置子项。image 120 - WooCommerce如何添加可变产品
    • Stock quantity/库存数量
    • Allow backorders/允许缺货销售吗?:含选项:不允许、允许但通知客户、允许。如果允许,则允许0库存或负值库存销售
  • Regular Price/常规价格 (必填的) – 设置变体的价格。
  • Sale Price/促销价格 (非必填的) – 为变体商品设置促销价格。
  • Stock status/库存状态:当你在inventory标签页没勾选启用产品级库存时,才会出现这个选项,用于让你设置变体是否有货、无货、缺货可售。image 121 - WooCommerce如何添加可变产品
  • Weight/重量:设置变体的重量,或留空以使用产品的重量。
  • Dimensions/尺寸:变体的高度,宽度和长度,或留空使用产品的尺寸。
  • Shipping class/配送类型:它会影响变体的配送,如果配送类型与产品不同,请在这里选择。如果你未添加过配送类型,那配送类型只能等同于产品。image 122 - WooCommerce如何添加可变产品
  • Description/描述:针对变体的描述,不会展示给客户,仅供自己使用。

客户看到的产品是怎样的?

在前端,当查看可变产品时,用户会看到用于选择变体的下拉框。根据用户的选择,将展示对应的库存和价格。

- WooCommerce如何添加可变产品

如果你安装了免费插件Variation Swatches for WooCommerce,它能让颜色和尺码直观的展示。如下图所示

image 114 - WooCommerce如何添加可变产品

如果用户未选择变体,就尝试点击“添加到购物车”按钮,则会看到一条提示,要求用户选择变体属性。

image 115 - WooCommerce如何添加可变产品

在“产品列表”(Product Archive)页面中,不会显示“添加到购物车”(Add to Cart)按钮,因为在产品页面上选择“添加到购物车”(Add to Cart)之前必须先选择变体。

archive page - WooCommerce如何添加可变产品

相关教程推荐

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

点赞
0 / 5 5

Your page rank:

教程

分享知识是一种美德,当我们每一个人都在不断的分享知识给这个社会的时候,我们这个社会将会变得越来越好,所以如果您喜欢这篇文章的内容,希望您可以把它分享到您的朋友圈当中,或者给到您指定的某一个人,您关心谁,就把知识分享给他,谢谢。

发表评论

邮箱地址不会被公开。 必填项已用*标注

我自用的

当你点击本站的链接购买它们,我会得到一些佣金,谢谢你们对我这位自由职业娃妈的支持,比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

siteground logo
SiteGround

购买外贸建站主机,它是80%读者的选择
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器
了解详情→

Hi~当你点击本站中的主机、主题、插件的链接前往购买后,我将获取一些佣金,这是我撰写建站教程的主要收入~希望也能得到你的支持,比心( •̀ ω •́ )y

Copyright © LOYSEO.COM — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程

Do NOT follow this link or you will be banned from the site!
微信扫一扫
我朋友的锂电池外贸网站可与相关应用(如电摩轻骑、电动自行车、电动车等)、上下游、同行进行自然外链交换,有意向请联系我~