如何给WooCommerce产品详情添加更多产品字段，上传图片等

WooCommerce默认给我们的商城提供了多SKU变体选项，但有时我们的商城可能需要给用户提供更多的选择，比如上传图片

登录WordPress后台——安装新的插件——安装并启用WowAddons。

然后在左边的工具栏就出现了WowAddons的选项，点击进入。

点击上方的Create Options。

然后点击左上角的“+”，就可以选择自己想添加的元素，比如产品（Products），下拉选择（Select），上传内容（upload），图片变体（Image Swatches）等等，提供的元素非常多。

我这里选择一个下拉框选项为例，拖拽到右边，然后左边可以设置参数。

• Required，这个参数是否必填。
• Title，在下拉框上面的标题说明。
• Help Text，说明性的文本。

下面的区域就是对应的选项，比如是否需要定制。并且还可以给不同的选项设置额外的价格，我这里以定制需要额外20美元为例。那不定制的Price Type选择No Cost，Need Customization的Price Type选择Fixed（固定金额）或者Percentage（百分比），然后价格填个20，暂时就这两个选项。

接着Style里可以设置下拉选择的容器宽度，Need Help文字的位置，如果有图片可以选择图片的形状等。

最后面的Conditional Logic可以做一些逻辑选择，比如前面的前面其他的元素有选择时才出现，这个在下面元素给大家演示。

同样的方法我们再添加一个上传图片的选项，选择upload元素，拖拽到右边。

点中对应的元素可以修改参数，标题，额外价格，允许上传图片的最大尺寸都设置一下。Style样式也是一样，可以根据实际情况设置，我重点讲一下条件逻辑这块。

我是希望用户上面选择了需要定制才要上传图片，否则不显示这个模块。

将Conditional Logic启用，第一个下拉框选择Show，后面的下拉框分为any和all，意思分别是满足下面任一条件就可以触发，还是必须满足下面的所有条件才能触发。

再下面的就是条件，我这里选择的是当上面的定制选项值等于Need Customization才显示这个上传图片的选项。

更改完成之后保存，如果你还需要添加更多的字段也是一样的方法。

有伤角有一个Global Style的按钮，点击后可以对字段的颜色以及一些背景，边框等颜色设置，尽量保持与网站全局色统一。

还要设置这个字段在哪个产品上显示。比如你可以设置某个产品或者单独排除某些产品都可以。

都设置完保存一下。

最后在Option List里把刚才设置的状态打开。

产品的其他内容还是在WooCommerce的产品管理里完成，比如价格，SKU，库存等。

从下面的动图可以看到，只有当我选择Need Customization的时候，才会出现上传图片的选项，否则No Customization下不会出现。

上传之后加入购物车。想进一步提升购物车体验（折扣进度条、侧边迷你购物车），可以看这篇 WooCommerce 折扣进度条与迷你购物车插件教程。

然后测试一下买家付完款后的订单信息，提交的这些参数都已经显示在订单里面了。收款还没配置的，参考这篇 WooCommerce 连接 PayPal 收款教程。

在前面的演示中有一个问题，就是产品最上面的价格不会随着我选择内容的改变而改变。

总价明明是$55,上面还是$35，这是因为上面的调用WooCommerce的价格，下面的总价加入了额外的$20美元定制。我们直接将总价放到标题下面，并把原来的价格隐藏就可以了。

步骤：

① 安装Wpcode插件，并Add Snoppet，选择JavaScript，将下面代码放进去保存，保存并Active。

更多 WooCommerce 实操教程：自定义商城注册和登录页面 ｜ 免费产品评论插件 judge.me。