【Woocommerce教学】低成本, 建立Wordpress网店

这是一篇全面，适合新手学习的Woocommerce教学。

你可以低成本(只需要Server + Domain费用), 就可以透过Wordpress + Ｗoocommerce，去建立网店。

你将会学习：

• 前期Server设置
• 使用Wordpress
• 安装Woocommerce
• 设立outgoing email server

你会Step by Step，与我开设一间服装网店-JACKLORA。

准备好了吗? 我们开始吧！

 

基本概念

在你开始学习之前，可以先看看， 是次教学完成品： https://jack-lora.com/

你会Step by Step, 与我一起，去利用Wordpress + Woocommerce，去建立这个网站！

我们先看看一些基础知识!

什么是Wordpress?

Wordpress是一个免费开源的内容管理系统，你可以不需要写code，只需要安装外挂与主题，也能建立起自己的网站。

什么是WooCommerce?

WooCommerce是Wordpress上的plugin，帮你的网站加上ecommerce的功能。包括：货品管理、购物车、网上信用卡等。

除了文字教学, 你也可以参考这教学的影片版:

我们先进入第一章 — 前期设置！

第1章前期工作

前期工作，就是在做网页之前，你要准备的东西。

不少人觉得前期的设置工作很繁复、十分麻烦，在这个步骤已经却步。但只要不断尝试，你便会慢慢熟习当中的运作！

前期设置工作大致可以分为4个步骤：

• 租server+安装wordpress
• 购买网址
• 把网址和伺服器连在一起
• 加上ssl

我们开始吧！

前期工作

前期工作就是去设置好一个可用的Wordpress。一共有4步，我们来看看你大概需要做什么的吧！

1.租server+安装wordpress

要运行Wordpress，你需要有一个Server。而你也需要在Server上安装Wordpress。

2.购买网址

第二步，你需要购买网址。

3.连结网址及server

成功购买网址后，下一步我们就要将网址与server连接在一起。

4.加上ssl

虽然我们已经成功将网址与server连结在一起，但现在我们的网页仍是不安全的（not secure），因此最后我们要学习如何拿取ssl的certificate。

前期工作 - 详细步骤

关于前期工作的详细步骤，你可以参考以下文章。

• Amazon Lightsail (延伸阅读：利用Amazon Lightsail安装WordPress）
• Google Cloud (延伸阅读：利用Google Cloud安装WordPress）

我提供了2间Cloud Server Provider的设置教学: 分别是Google Cloud及Amazon Lightsail。

Google Cloud头3个月是免费的, 而Amazon Lightsail长远去说, 会比较便宜。你可以因应你的情况去选择。

第2章后期工作

做好前期工作后(就是你已经有一台可用的Wordpress)，你可以真的开始做这个网店了。

后期工作可以分为8个步骤：

• 设定主题（theme)
• woocommerce plugin的设定
• 设立outgoing email server
• 建立要用的页
• 设定首页
• 建立navigation
• 整理每一页的内容
• 其他设定：title 、logo、footer、颜色

我们开始吧!

1.设定Theme主题

在开始前，大家可到https://mtache.com/ecom免费下载这节教学素材。

有人可能会问，为什么wordpress可以做出这么多不同的网站？

Wordpress有很多不同的主题，有些不用付款，有些要付款。透过改变不同的主题，你的网站的外观甚至功能性都会有所改变。

登入后台

还记得设置Server时，它提供了两条网址吗？一条是wordpress网址，另一条则是wordpress后台，我们打开wordpress的后台link。

我们可以copy wordpress后台的账户与密码，进入wordpress后台。

设定主题

那么怎样在wordpress上选择主题？首先，你可以click 外观(appearance)，然后click 布景主题(theme)。

你便发现里面有五花八门的主题，你可以选择你所喜欢的theme呢！

今天，我们所用的主题是twenty twenty theme。你可以按安装布景主题(click add new button)。

然后在搜寻栏上打twenty twenty，便能找到这个主题了！

当然，这不是最好的做法，通常我们使用Themeforest(https://themeforest.net)来找一些WooCommerce主题，但这个网站的主题则要收费了。

如果你是一些资深（advanced）一点的wordpress user，你也可以自己建立一个主题。我通常是利用html template + wordpress的方法来做主题，因为这个方法更方便、更快捷。

2.woocommerce plugin的设定

Plugin可以让wordpress新增一些本来没有的功能。今天, 我们会用的一个plugin - WooCommerce，让你的WordPress有e-commerce的功能。

设定语言

在设定WooCommerce前，我们先要设定语言。因为如果要用中文版的WooCommerce，你的WordPress本来也要是中文版才可以。

因此，你可以在设定（settings）选择一般（general），把网站介面语言（language）由英文转为繁体中文。

安装外挂

下一步我们便可以安装外挂。首先，按外挂，然后选择安装外挂，在右边search woocommerce，然后click立即安装。

成功安装后，便要求你输入商店的资料：包括地址和邮政编号，那么地址你暂时可以copy我的教学素材：香港铜锣湾开心道535号开心大厦9楼。

填写完毕后，click继续。下一页，便要求你填写公司类型，那么这次我所示范的是制作一间服装店的网页，因此这里你可选择「时尚、服饰和配件」。

然后click继续。下一页来到选择产品类型，我们填实体产品。

然后click继续。下一步系统便问「你有多少产品需要展示」，你填1-10就便可以了。「是否在全球销售」，填否即可。至于宣传的方式，我们全部都无需选择。

最后，你要选择自己喜欢的主题。今天我使用Twenty Twenty theme 作主题。

这样你就成功安装了woocommerce plugin了！当然，以上设定在往后的日子仍能修改，所以写错了也不用太担心！接下来，你便可以尝试新增商品。

建立商品

首先，click「商品」，选择「所有商品」，然后click「建立商品」。

接下来，你就可以为商品想一个名称与描述，为它定价，最后设立商品图片，然后click右上角的「发布」便完成了！

如果你希望增加多于一张相片，你可以选择「商品图库」，甚至可以透过drag and drop改变相片的次序呢！

发布完成后，可以在哪里看到呢？你可以click「页面」，然后选择「全部页面」，然后click「检视商店」这一页，你就可以看到你的产品了！

下一步我们可设定销售地区，究竟是全球运送还是只限香港购买呢？

设立销售与运送地区

我们可以选择woocommerce，然后选择「设定」，你便找到「销售与运送地区」的设定。

加入购物车

由于我们这一个theme不是tailor-made for WooCommerce，按了购物车之后，不会自动弹出cart的画面。因此我们要tick「成功加入后转至购物车页面」，然后按储存。

这样一来，当我们将商品加入购物车后，画面便会自动转去checkout。

设定付款方式（银行/paypal)

下一步我们可以设定付款的模式。最常见的付款方法有两种，一种是paypal，另一种方式是银行。

Paypal:选择付款，click启动paypal。然后输入paypal的电子邮件。如果没有paypal账号的话，就要先申请paypal accout了。

沙盒是sandbox，是用来测试该账号能否付款，由于我以前用sandbox可能可以付款，但live的时候却收不到款项。因此，我建议大家不要使用paypal沙盒做测试，大家还是直接用live来试吧！

然后，Click「启用电子邮件通知」，并输入自己的电子邮件。

银行转账：选择「付款」，click「启动银行转账」，输入标题及描述，最后输入账号详细资料（如：账号名称、账户号码和银行名称等）

下一步，我们便可以设立outgoing email server了。

3.设立outgoing email server

正常情况下，顾客购买了一些商品后，会收到email确认付款成功。因此，我们要建立outgoing email server。怎样设定呢？<?p>

删除 Built With WooCommerce

首先，我们选择电子邮件，找到页尾文字。为了避免让其他人知道我们是用WooCommerce，我们删除built with woocommerce。然后click储存修改。

防止email 传送至spam box

为了避免Email进入spam box，我们利用第三方的email server来send email，顾客便能收到邮件。那第三方的email server是如何建立的呢？

首先，我们需要安装外挂，我们按「外挂」，选择「安装外挂」，下载 WP Mail SMTP by WPForms。

下载了WP Mail SMTP后，我们找到WP Mail SMTP一栏，然后click 「设定」。

在邮件程式一栏，有很多external 的server。我们今天使用sendgrid作email server，因为它有免费plan让人使用！

在注册后30天内可以免费传送4万封email，一旦过了一个月限期，每天只可以免费发送100封email。如果是简单的e-commerce，其实已经很够用了！

第一步，我们先到https://signup.sendgrid.com注册sendgrid 账号。

第二步，我们需要认证domain。打开sendgrid后，click authenticate your domain，然后在Dns host选择GoDaddy。

最后在Domain You Send From输入自己的网站（如：jack-lora.com）。

这时你便获得3条record。

第三步，我们要加3条record到我们的domain。首先，进入 https://hk.godaddy.comclick网域，到最下方的位置，找到管理DNS。

然后画面来到记录的一版，类型可选择CNAME，然后将刚才的3条record，copy and paste 在主机上。（注意：jackloria.com可以省略掉。），然后复制和贴上指向。

例子：

加了3条record到我们的domain后，我们回到sendgrid页面，click dashboard，你会看见send your first email，我们click integrate using our web api or smtp relay，然后选择SMTP Relay。

下一步，你看见API key，将它copy下来，然后贴在WP Mail SMTP 内的API金钥上。

然后输入你的寄件者电子邮件地址和寄件名称，我们就完成了Email的设定了。

下一步我们可以做一个电子邮件测试，尝试发送邮件，看看能否收到Email。

4.建立要用的页

这一步我们就要为网站建立主页、关于我们、商店、常见问题、联络我们、购物车等页面，方便消费者使用网站。

要如何建立呢？第一步，我们click页面，选择全部页面，然后再click新增页面。

在这个版面你可以输入标题及内文。那么我们要设立「主页」，则在标题上打上「主页」，若要设立「关于我们」，则在标题打上「关于我们」，如此类推。完成后，click蓝色button发布。

接下来，我们将网址代称由中文改为英文，这样能够免得部分电脑load不到中文，顾客因而无法浏览网站的问题。因此，你可以click 页面，找到「永久连结」，然后将网址代称改为英文。例如：「关于我们」，可以写为aboutus。

5.设定首页

完成以上设定后，我们可以尝试进入主页。

主页是这样：

jack-lora.com是这样：

你发现输入jack-lora.com未能进入主页画面，因此我们下一步要设定主页。

我们click「设定」，选择「阅读」，在网站首页「显示内容」上click「静态页面」。在静态首页一栏，则选择「主页」，然后储存设定，便完成了！

完成品：

6.建立navigation

你可能发现navigation的排列次序有些混乱。因此，这一步我们要整理navigation，令页面看起来更有系统，更方便顾客使用。

那么我们应该如何整理navigation呢？首先，click「外观」，选择「选单」，然后填写选单名称（例如：primary）。

接著，我们加入左手方的「页面」（例如：常见问题，联络我们，购物车，主页，商店，关于我们），再click「新增项目」。

然后，排列次序。

最后，我们要设定选单摆放的位置，例如：桌面版水平选单(desktop)、行动版选单(mobile)，然后按储存，便完成了！

这样就完成了navigation 的设定了，我们来看看完成品吧！

7.整理每一页的内容

主页

接下来我们就要整理每一页的内容，令网站看起来美观、专业！

很多看起来漂亮的网站都是以相片组成的，因此我们可在主页上，上传漂亮的照片来吸引用家的注意。

我们首先click「页面」，选择「全部页面」，点解主页，进入主页编辑的画面，我们Click加号，然后选择「封面」，再click上传，你便可以upload漂亮的照片到你的网站上了！

你发现相片原本的背景色是黑色，为了让我们的文字更为突出，因此我们要将图片改为透明度0。我们在空白的地方按一下，让mouse出来，再按一按照片，就可以在这个封面作出设定了！

完成品：

在照片中间，我们可以打上文字。我们先将段落转作标题，然后type: 简约系时装网店，文字大小选择H1，更改颜色黑色，选择全幅宽度，最后click更新，就完成了。

如果你想在标题下，加上一段文字，你可以click加号，然后选择段落，最后click右上角的「更新」，就成功储存了！

完成品：

完成后，我们就可加上按钮，让顾客点击，进入购物车。因此，我们按enter，然后click旁边的加号，选择按钮组。

我们可以在button内打上「立即选购」等字眼，然后click连结，输入商店的网站。最后调校button的颜色，便已经做好了。

我们尝试Refresh页面，发现图片与文字有些移位，对吧？若要做得与我一模一样，则要使用一些CSS。

我们使用Mouse 点击文字，在进阶设定一栏，你看见附加的CSS类别。那么我们就在这一栏，打上alignwide，然后click 更新。

标题、文字与标题都要重复输入alignwide这个CSS。但要注意，如果是按钮，则要按整个block，而不是直接按button。

除了CSS外，我们还可以调校相片的高度与宽度，来调整它的位置。我们用mouse点击相片，然后尺寸一栏填上500，那就可以了！

关于我们

完成主页的设定后，我们下一步就可以设定「关于我们」。首先，我们增加一个区域，click标题，然后打上「关于我们」，字号可以选择H3，再click文字置中。

接下来，我们再增添一个区域，选择「媒体及文字」。

左边可以放上图片，右边我们打上引文（例如：每个设计都有一个故事 – Jack……），然后按更新，就完成了。

完成品：

热销商品

我们click加号，选择标题，然后打上：「热销商品」，字体大小选取H3。接下来，我们加入图片，再次click 加号，找到woocommerce一栏，选择精选商品，挑选你想展示的商品。

然后，我们要调整这一栏目的宽度，因此我们选择全幅宽度，在进阶设定同样打上alignwide。

banner

click加号，选择封面，然后click「媒体库」，选择适当的图片。我们将透明度设置为0。

我们新增区域，选择「重要引述」。然后paste「JACKLORA的衣服真的很好看！我穿上后立即变得更帅了！」下去后，我们可以在右边，设定文字框架样式与色彩。

完成品：

最新款式

重复制作「热销商品」一栏的步骤就可以了，把标题改为「最新款式」，然后选择你们商店的最新货品，就完成了！

完成品：

网站的layout就大致完成了。接下来，我们将设定网站的标题、logo、footer与颜色。

8.其他设定：title 、logo、footer、颜色

网站标题（Title）

我们返回backend，click设定，选择一般，在网站标题打上jacklora，在网站说一栏type简约系时装店。

永久连结

然后我们就要设定blog post的连结（link）。我们click设定，选择永久连接，然后选择文章名称作Blog post的link。

Logo

下一步我们可以设定网店的logo。我们选择外观，然后click「自订」，选择「网站识别」，click「选取标志」，然后上传jacklora logo至媒体库。你发现这个logo有点大，不用担心，我们最后会用CSS调整它的大小。

按钮颜色

按钮的颜色也能在此作设定。我们选择色彩，click自订色彩，你就可以选择你的主题色作button的颜色了，这样令网站看起来更统一！

footer

我们还要设定网站的footer。怎样设定呢？首先，我们回到backend主页，选择「外观」，click「小工具」。

我们将文字拉到页尾一，输入标题：付款安全性，在内容则copy素材内一段文字（JACKLORA使用PayPal让客人进行网上付款……），然后再插入paypal这张图片，然后click 储存。

页尾2，也是同样的做法，我们新增文字，标题改为：购物安心保障，然后在内容copy素材内一段文字（全部货品皆经过专业品质合格认证，确保顶级质量，连一年保养……），然后click储存，便完成了！

做到这一步，其实网站已经基本完成了！可是，可能网站的排版与空间仍未令你感到满意，因此最后一步，我们会用CSS来作调整。(延伸阅读：CSS教学全攻略2021 ）

click外观，自订，附加的CSS，我们copy and paste素材file内的CSS(我把要用的CSS放到了刚刚的素材中)就可以了，然后click 发布。

你发现，加了CSS后，logo小了，网站也看起来更整齐。整个网站已经制作成功了！如果你真的不懂CSS，你也可以买template来制作。

总结

利用Wordpress和Woocommerce来制作网店是不是也没有想像中那么难呢？

今天的分享就到这里，如果你也有兴趣开网店，或许可以试试这些方法，以低成本制作你公司的网页!

{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"什么是WooCommerce?","acceptedAnswer":{"@type":"Answer","text":"WooCommerce是Wordpress上的plugin，可以帮你的网站加上ecommerce的功能。包括：货品管理、购物车、网上信用卡等。"}},{"@type":"Question","name":"什么是Wordpress?","acceptedAnswer":{"@type":"Answer","text":"Wordpress是一个免费开源的内容管理系统，你可以不需要写code，只需要安装外挂与主题，也能建立起自己的网站。"}}]}