1. David Wu首页
  2. WordPress
  3. WordPress建站教程

Woocommerce给Variations变体产品增加属性预览缩略图

Woocommerce是wordpress CMS建站最受欢迎和使用率最高的电子商务商城系统, 它是为使用WordPress的小型或大型在线商城而设计的

Woocommerce是wordpress CMS建站最受欢迎和使用率最高的电子商务商城系统, 它是为使用WordPress的小型或大型在线商城而设计的。该插件于2011年9月27日发布,因其易于安装和定制以及免费的基础产品而迅速流行。
但是通过Woocommerce发布的产品,默认只支持设置Feature Image,显示在左侧的大图Gallery区域。而对于产品的attribute属性的可变option选择项,或者说产品的多SKU展示,只展示文本或下拉框,而不能和国内淘宝京东等网站一样,展示该SKU的预览缩略图,达到Image Swatches For Attribute Variation的效果

如果Themeforest正版主题购买的正版主题没有自带这个功能,而我们又想实现Variations可变产品显示属性预览缩略图,可以通过第三方插件的image type类型调用来实现。

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图
变体产品选项显示预览小图

文章目录
隐藏

1
Variation Swatches插件安装

1.1
下载插件

1.2
安装插件

2
配置变体图片

2.1
创建产品属性

2.2
创建属性变体

2.3
产品属性导入

3
前端变体图片演示

Variation Swatches插件安装

下载插件

首先我们需要安装Variation Swatches插件,通过它来给Variations 产品设置Image类型的attribute属性缩略图调用。这款插件分为免费版和付费Pro版两种版本,Pro版本在免费版的基础上增加了给自定义变体设置属性缩略图等一系列高级功能,不过这篇文章暂时讲通过免费版本来实现属性缩略图的显示,也能实现我们需要的效果。可能没有Pro版本那么便捷,所以如果预算充足,还是建议直接入手Pro版本,提供了更多的便捷功能。
免费版插件下载: 免费版插件下载地址
Pro版插件购买:

安装插件

将下载好的插件压缩包在wp-admin-plugin-add new,进行上传操作,之后启用插件

配置变体图片

插件启用后我们需要对它进行一些设置,来达到我们需要的变体图片的效果。首先这里我说明一下,免费版本只能创建全局的attribute属性,通过在这个全局属性里创建子属性并设置图片,之后在产品的属性里引用,来达到效果。如果想对单独产品创建单独对应的自定义属性,并一一关联图片,而不会生成到全局属性列表里的话,请购买正版插件:

创建产品属性

从一开始,我们就必须在全局属性( Attribute )内创建图片属性及其变体。 要全局创建图像属性,请导航至WP-admin>Products> Attributes。 我们将为产品创建Image图片类的属性集合,这里暂且叫它:属性的父集合吧

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图
attributes里创建image类型图片属性

Name是在产品前端会展示的,我们可以写style等比较自定义性质的名称,不会和系统预设自带的重复。图片我这里写的是sku,其实是不推荐的,可能和woocommerce本身带的sku显示重名。

Type里一定要勾选为Image,然后保存该属性。slug注意用小写

创建属性变体

创建属性后,我们需要创建属性变体。 要创建产品变体,请返回attribute列表,找到步骤一里我们创建的属性,点击“ Configure terms ”。

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图

由于我们创建了Image类型的父属性。 我们将在图像属性中添加子属性,并设置图像作为变体图片展示。 在这里我们添加产品的变体名称并设置对应的图片,一个产品有几个变体选项,就创建几个,它们都会存储到创建的Image类型的属性下的子属性列表里

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图
Image类型的属性里创建变体的子属性

不过插件也贴心的提供了快捷的支持,如果你不想去这里手动创建变体对应的属性和关联图片,也可以直接在编辑产品的页面去修改,请往下阅读

产品属性导入

进入products,选择需要编辑的变体产品,点击edit。在Product data选项部分选项attribute,从下拉框选择之前创建的Image类型的图片属性集。

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图
Attribute-导入创建的产品属性集

选择之前创建的父属性集后,再从添加框添加之前创建的子变体属性选项。

(adsbygoogle = window.adsbygoogle || []).push({});

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图

这里就是接着我们前面说的,你可以在创建父属性后在里面添加子属性,来作为产品的变体属性并设置关联图片,也可以再这里快捷的提那件term子属性,添加后它会自动存储到你导入这个图片类型的父属性集合下

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图

Attribute都导入完成后,再去variation导入attribute对应的变体并设置价格,接下来的步骤都是woocommerce产品设置的步骤,大家都会就不讲了

前端变体图片演示

当这些都弄好后发布,就可以在产品前端看到演示效果了,产品变体的属性上都有预览小图方便直接了解变体选项的外观

Woocommerce给Variations变体产品增加属性预览缩略图Woocommerce给Variations变体产品增加属性预览缩略图
woocommerce产品变体预览小图
为主的祥助的知识星球为主的祥助的知识星球

版权申明:跨境E站,版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权

          

原创文章,作者:跨境e站,如若转载,请注明出处:https://www.davidwu.net/archives/3599

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

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