WooCommerce 产品上传与展示

文章目录

WooCommerce 最基础的功能:后台产品上传 + 前台产品展示。

添加新产品的入口

登录 WordPress 网站后台,光标悬浮顶部工具栏的【+新建】,从下拉列表中选择【产品】。

WooCommerce 产品上传与展示

录入产品信息

  1. 先填写产品名称、产品描述、售价、产品简短描述,可以直接输入,也可以从站外复制粘贴(Ctrl+C,Ctrl+V)。
  2. 在第二列绑定产品图片(主图)、产品相册,可以从媒体库中选择图片,也可以上传新图片。
  3. 在第二列设置产品类别、产品标签、品牌,网站会自动生成相应的列表页(SEO 友好)。
  4. 在第二列顶部点击【发布】按钮,发布后,点击【预览】按钮即可查看前台效果。
WooCommerce 产品上传与展示

产品详情页效果预览

电脑和移动设备显示的内容相同,放不下的内容会自动换行。移动设备会收起导航菜单,点击时才展开。

WooCommerce 产品上传与展示
产品详情页–桌面端
WooCommerce 产品上传与展示
产品详情页–手机端

商店页效果预览

点击顶部导航栏的【商店】,可以查看所有产品。屏幕宽度越小,每行展示的产品数量也越少。

WooCommerce 产品上传与展示
产品列表页–桌面端
WooCommerce 产品上传与展示
产品列表页–手机端

多规格产品(变体/子产品)

  • 同一个产品页面,可以绑定多种可选规格,如尺寸、颜色、材质、配置等。
  • 每个变体(子产品)可以独立配置 SKU、价格、库存、图片、短描述。
  • 联动展示功能。访客选择具体参数后,子产品对应的图片、描述、单价会自动显示出来。
WooCommerce 产品上传与展示
选择具体规格前,默认显示第一个子产品的配套信息
WooCommerce 产品上传与展示
在下拉列表中选择颜色和尺寸后,蓝色中号子产品的图片、描述、单价会自动显示出来。

购物车与结算

WooCommerce 还提供将产品加入购物车、在线下单等功能。不需要在线下单功能的外贸 B2B 网站,可以把购物车按钮改为询盘按钮或询盘表单。

WooCommerce 产品上传与展示
WooCommerce 产品上传与展示

后续优化

以上就是最基础的产品上传和产品展示,只需用到免费的电商插件 WooCommerce。

当然,大多数商家会在基础样式的基础上,购买设计服务,调整网站的字体、配色、布局,以获得更好的展示效果,提高转化率。国内电商平台习惯把这种操作叫做“店铺装修”。

在产品展示之余,也可以安装多语言、SEO、AI、数据统计等插件,拓展更多功能。

在线体验

如果你有建站需求,想在线体验以上功能,又不想提前购买域名、服务器、部署 WordPress 网站,可以联系我开通带 WooCommerce 插件的 WordPress 后台账号,先体验,后建站。联系方式见页脚或联系我们页面。

服务器托管