WooCommerce商城插件快速入门

0、WooCommerce介绍

据统计,全球有超过20%的网上商城采用WooCommerce搭建。wordpress中通过添加WooCommerce插件,即可快速实现变成B2C网上商城网站。

当前很多人推荐shopify方式搭建B2C商城,WooCommerce想比shopify,最大的优势是免费(有些辅助插件需要收费),不像shopify,每个月最低需要29美金。而且可以进行深度的SEO优化。

但劣势也非常明显,需要进行非常多的底层软件设置,比起shopify,完成一个简易版网上商城的初始搭建,WooCommerce花费的时间要多不少。不过一旦掌握了基本的原理和基础设置,你会发现这些时间花费的太值得了。

1、安装插件

wordpress插件中直接搜索woocommerce,安装,并激活。

woocommerce商城插件
插件安装完成后,左侧菜单栏中会多出2个菜单。

2.初始化设置

激活WooCommerce后,会自动跳出初始化设置选项,按照提示一步一步设置即可。

也可以先跳过,后续再在WooCommerce菜单中的setting部分设置。

2.1 店铺设置

WooCommerce店铺基础设置

2.2 收款设置

WooCommerece收款设置

2.3 运费设置

WooCommerce运费设置

2.4 推荐插件

WooCommerce推荐插件

2.5完成激活

如果不需要安装jetpack,可以点击最下面的 skip the step 跳过。

完成激活

完成安装

3、熟悉后台界面

WooCommerce菜单主要涉及到商城的参数设置,如运费,付款,coupon折扣券等。

Products菜单用于添加产品和产品相关参数设置。

安装完成后的设置菜单

Page页面菜单会自动添加4个与商城相关的页面。

  • shop为产品列表页面
  • Cart为购物车页面
  • Checkout为付款页面
  • My account页面为我的账号页面

通过页面栏右下角的view选项可以查看页面的样式。

这四个页面不要删除或者随意改动,后文会对这四个页面进行详细解释。

自动添加4个Page页面

4、单个产品添加

点击Products中的add new,即可添加产品,主要有以下8个部分需要填写。

WooCommerce产品详细设置

点击右上角的publish,发布产品。

产品页面示例

产品详情页面效果,不同的主题之间显示效果可能会略有不同。

如果网站是以内容为主,只有少数几个产品需要发布,可以使用 OceanWP或者Astra之类的精简主题。

如果是纯商城的主题,可以直接采用WooCommerce推荐的storefront主题。

快速添加产品

如果产品是同类产品,只有少个几个参数不一样,可以通过duplicate方式复制添加产品。

从SEO优化的角度来讲,不建议这样操作。可以将同一个型号不同款式的产品放置于一个页面。不过WooCommerce缺省不支持,需要额外的插件。

产品快速添加

5、Shop产品列表页面

快速复制完4个产品后,进入产品列表页面,可以看到产品列表页面的样式,也就是文章第二章中介绍的由WooCommerce自动添加的4个页面之一的shop页面。

产品列表页面地址: http://yourdomain.com/shop 域名后面添加/shop

WooCommerce产品列表页

这个页面缺省没法改变样式,也无法进行自定义修改。如需对这边进行修改,可以通过Elementor pro插件中的theme builder 功能进行个性化定制。

6、用户端购物付款流程

在第二部分woocommerce初始化设置中有设置收款方式,如果勾选了paypal,产品详情页面会出现用 “Paypal Buy Now” 快捷支付,相当于天猫商城的 “立即购买”。用户直接填入paypal账号即可快捷完成支付购买。

Paypal收款是大部分用户的首选方式,Paypal收款账户的门槛最低,有国内信用卡即可注册。stripe等其他方式都需要额外的条件才能开通。

产品详情页付款按钮
天猫商城立即购买

以下流程为“购物车”方式购买,如用户没有paypal可通过添加购物车方式灵活选择其他支付途径。

  • 1、加入购物车 add to cart
  • 2、进入购物车,checkout进入付款流程
  • 3、收获地址填写,付款方式选择
  • 4、完成订单

点击 “Add to cart”, 加入购物车。

加入购物车
WooCommerce购物车确认

确认购物车后,跳转至 “Checkout页面” 收货地址和付款方式选择,这里可选择除paypal以外的其他付款方式(取决于第二部初始化配置中收款方式的设置)。

地址填写和付款方式选择

点击 Place order 确认订单信息

订单完成页面

至此,我们会发现一个问题,整个购物过程,没有提示需要注册账号,这样用户付款完成后就无法直接查询到订单和订单状态。

造成这个问题的原因是因为,在Woocommerce的setting中,默认选择了“没有注册也可购物”。

7、用户账号注册设置

进入setting中进行 Account&Privacy 设置:

账号注册设定

save setting 保存配置
第一个变化,付款时,会提示是否需要登录已有账号。

询问是否需要登录账号

第二个变化,进入我的账号中,已经可以看到刚才的订单信息了,账号为用户付款时输入的邮箱地址,密码为随机生成。系统会自动发送一封邮件到对应的邮箱,告知用户名和密码。如需更改,可进入Account details进行修改,或者重置。

我的账号

查询订单

8、订单处理后台

回到wordpress管理后台,woocommerce菜单会提示已经有刚才用户购买的订单提示了,点击进入订单状态,可以看到订单的详细信息。

订单信息

进入users菜单,可以看到刚才注册的用户。

用户信息

9、总结

至此,一个简单的WooCommerce网上购物商场已经完成,剩下的工作就是对商场进行优化和添加额外功能,其实过程也并不复杂。

最后一个问题,在激活woocommerce后,我们提到系统会自动生成4个页面,有 Shop,Cart,Checkout,My Acount四个页面,对照刚才用户端购物过程,我们看到用户端每完成一次操作步骤,都会跳转到一个页面,这个页面就是对应的以上四个page页。

购物流程和页面对照关系

了解以上页面和步骤之间的关系,有助于后续对woocommerce进行定制。

wordpress博客主要由page页面和post文章页面组成,其中的逻辑关系不复杂。

加入woocommerce后,就有了一些页面之间的逻辑关系,但不管怎么变化,一个网站对外呈现出来的就是由不同的页面和他们之前的逻辑关系组成。

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据