如何使用 WordPress 创建电子商务网站:完整教程(2022 年)

已发表: 2022-04-13

试图了解如何使用 WordPress 创建电子商务网站?

虽然 WordPress 最初是作为一个博客工具开始的,但它早已演变成一个强大的网站构建工具,能够创建任何类型的电子商务商店。

事实上,WordPress 是建立电子商务商店的最流行方式——甚至比 Shopify 更受欢迎。

在本教程中,我们将介绍将商店添加到 Internet 上最流行的电子商务工具行列所需的所有信息。

而且,这是我的承诺:

您将能够完全设置您的商店,而无需查看任何一行代码。 最后,您将拥有一个功能齐全的 WordPress 电子商务商店,如下所示:

WordPress 电子商务商店的示例

让我们深入挖掘!

电子商务如何在 WordPress 上运行?

下面,我们将详细介绍如何使用 WordPress 创建电子商务网站。

但是,在深入研究血淋淋的细节之前,我认为有必要从高层次了解一下使用 WordPress 进行电子商务是什么感觉。 这样,您将在深入了解本教程之前获得完整的上下文。

所以——让我们从头开始。

如果您之前已经建立了 WordPress 网站,您可能已经注意到核心 WordPress 软件不包含任何电子商务功能。

但是,与往常一样,您可以使用插件添加完整的电子商务功能。 大多数情况下,该插件是 WooCommerce,尽管我稍后会讨论其他一些选项。

因此,要创建电子商务商店的基础,起点如下所示:

  1. 如果您尚未设置您的基本 WordPress 网站,您可以这样做。
  2. 您安装了一个 WordPress 电子商务插件,例如 WooCommerce。

拥有电子商务基础后,您将像任何其他 WordPress 网站一样建立您的商店:

  • 要控制设计,您将安装与 WooCommerce(或您选择的电子商务插件)兼容的 WordPress 主题,例如 Botiga 主题。
  • 您将深入了解 WooCommerce 的许多设置来控制关键细节,例如付款、运输、税收等。
  • 您将安装额外的 WordPress 插件以使用新功能扩展您的商店。

不用担心; 我将在本教程中介绍所有这些内容,因此稍后会更有意义。

哪个是最好的 WordPress 电子商务插件?

在 WordPress 上谈论电子商务时,默认的期望几乎总是您将使用 WooCommerce 插件。

WooCommerce 不仅是最受欢迎的 WordPress 电子商务插件,而且它也是建立电子商务商店的最流行方式——如果您查看 BuiltWith 的前一百万个网站索引,它甚至比 Shopify 更受欢迎。

出于这个原因,我将在下面的教程中使用 WooCommerce。

然而,WooCommerce 并不是唯一可行的 WordPress 电子商务插件,所以让我们来看看其他一些质量选项以及何时可能需要使用它们:

  • 简易数字下载 (EDD) – 如果您专门销售数字文件而不是实体产品,这可能是一个不错的选择。 虽然 WooCommerce 也可以处理数字文件,但 EDD 的独特焦点创造了更简化的体验。
  • 大商务 – BigCommerce 是一种SaaS电子商务工具,它与 WordPress 非常深入地集成,以创建一种“无头电子商务”方法。 这是更高级的,但它为您提供了很大的灵活性。 考虑 BigCommerce 而不是 WooCommerce 的主要原因是如果您从事多平台销售,即您还通过 Amazon、eBay 和其他平台进行销售。 使用 BigCommerce,您可以在一个位置同步所有不同的销售渠道,这增加了很多便利。
  • 埃克维德 – Ecwid 是另一个与 WordPress 集成的 SaaS 电子商务工具,这要归功于一个专用插件。 由于其简单的方法,对于拥有非常基本商店的初学者来说,它可能是一个不错的选择,但我并不真正推荐它用于严肃的商店,因为它不像 WooCommerce 那样灵活和强大。

话虽如此,WooCommerce 仍然是绝大多数在线商店的最佳电子商务插件。

除非您有一个非常具体且经过深思熟虑的理由来选择不同的 WordPress 电子商务插件,否则我强烈建议您坚持使用 WooCommerce。

WordPress电子商务常见问题解答

现在,让我们快速浏览一些常见问题解答,以便您了解本教程以及一般的 WordPress 电子商务的期望。

WordPress电子商务商店的成本是多少?

WordPress 和 WooCommerce 都是 100% 免费的。 但是,您的商店会产生一些相关费用。

在基本层面上,如果您还没有 WordPress 网站,您将需要虚拟主机和域名。 如果您已经设置了站点,则可以使用现有的主机。 但是,如果您还没有,请为商店预算每月至少 10 美元,而对于客流量大和/或产品多的商店则要多一些。

除此之外,您几乎肯定会想要购买一些高级工具来添加到核心 WooCommerce 插件中。

首先,您可能想要一个高级 WooCommerce 主题,这将花费您大约 60 美元(尽管也有优质的免费 WooCommerce 主题)。

其次,您可能还需要一些高级 WooCommerce 扩展插件,这是大多数商店最大的成本领域。

不幸的是,这里有太多的可变性,无法给出一个数字。 有些商店可能只在插件上花费 100 美元,而其他商店可能花费 1,000 美元以上。 不过,如果您的预算紧张,通常可以找到降低 WooCommerce 插件成本的方法。

我需要成为开发人员才能创建 WordPress 电子商务商店吗?

不,您不需要任何特殊的技术知识来学习本教程并设置您的电子商务商店。 您可以从用户界面做几乎所有事情; 无需查看一行代码。

由于您需要配置运输、税收和支付网关等详细信息,因此设置比一般 WordPress 网站上的要多。 但是,所有这些都需要一些额外的时间——它不需要任何特殊的技术知识。

创建 WordPress 电子商务商店需要多长时间?

创建商店基础的基本过程只需要很少的时间。 您可以在不到一个小时的时间内拥有一个运作良好的电子商务商店(如果您已经拥有一个现有的 WordPress 网站,则更少)。

但是,这并不意味着您将在一个小时内完成。 您将花费大部分时间来配置商店的基本细节,例如:

  • 运费和政策
  • 税率
  • 添加产品
  • 支付网关
  • 等等。

这些任务都不是复杂的,但是你需要一些时间来处理细节,特别是如果你想手动做事情而不是使用插件来帮助(在某些情况下可能会花钱)。

不过,好消息是这些任务中的大多数都是一次性的。 例如,一旦您设置了运费,您的商店将自动使用它们,而无需您进一步输入。

WordPress电子商务商店安全吗?

是的,只要您使用安全托管并遵循 WordPress 安全最佳实践,您的商店就是完全安全的。

此外,您商店的信用卡付款将由第三方网关(例如 PayPal 或 Stripe)处理,因此您无需应对安全付款处理和PCI合规性的压力。 第三方处理器对所有这些负全部责任。

WordPress 电子商务商店可以快速加载吗?

是的,一点没错。 同样,这里的关键细节是,只要您遵循 WordPress 性能最佳实践,例如使用快速 WooCommerce 主题和优化您的内容,您的商店就会快速加载。

在本教程的后面,我们将有一整节专门向您展示如何使您的商店加载速度更快。 与本教程的其余部分一样,这不需要任何特殊知识。

如何使用 WordPress 创建电子商务网站

现在您已经对 WordPress 电子商务的工作原理有了很好的了解,让我们深入了解完整的分步教程。

本指南将带您从“零”到由 WordPress 提供支持的功能齐全的电子商务商店。

1. 设置您的 WordPress 网站(如果您还没有)

如果您已经有一个基本的 WordPress 网站,您可以单击此处跳到下一部分,了解如何向该网站添加电子商务功能。

但是,如果您还没有 WordPress 网站,则需要先设置一个,然后才能将其转变为功能齐全的电子商务商店。

为此,您需要做三件事:

  1. 为您的电子商务商店选择域名。 这将是它在 Internet 上的永久地址。 例如,我们的是athemes.com
  2. 购买虚拟主机。 这就是为 WordPress 软件提供动力并使您的电子商务商店可供全球访问者使用的原因。
  3. 安装 WordPress 软件。 这将使您的基本站点启动并运行。 设置核心 WordPress 软件后,您可以继续将其转变为电子商务商店。

选择和购买域名

要购买您的域名,您可以使用 Google Domains 或 Cloudflare Registrar 等服务。

如果您正在努力想出一个仍然可用的好域名,您可以使用 LeanDomainSearch 等域生成器。

购买主机

对于 WordPress/WooCommerce 托管,我推荐 Cloudways 作为一个很好的负担得起的选择,它仍然提供出色的性能。 查看我的 Cloudways 评论以了解更多信息。

SiteGround 对于初学者来说也是一个不错的选择,因为它使用起来更简单(尽管 Cloudways 仍然很容易访问)。

安装 WordPress

拥有虚拟主机后,您可以使用虚拟主机的 WordPress 自动安装程序工具来安装基本的 WordPress 软件。

如果您使用 Cloudways,您可以按照此文档安装 WordPress。

您还需要安装免费的 SSL 证书以在您的网站上启用安全的 HTTPS 协议。 Cloudways 和大多数其他质量主机使这很容易做到。 它通常只需要单击一个按钮 - 这是 Cloudways 的操作方法。

2. 安装 WooCommerce 并配置基础知识

此时,您应该已经设置了基本的 WordPress 网站。 现在,是时候通过安装 WooCommerce 插件将其变成一个正常运行的电子商务商店了。

WooCommerce 在 WordPress.org 上免费提供,因此您可以像安装任何其他 WordPress 插件一样安装它:

  1. 在您的 WordPress 仪表板中转到插件 → 添加新的。
  2. 搜索“WooCommerce”。
  3. 安装并激活插件。

激活 WooCommerce 后,它应该会自动启动其引导设置向导。 如果没有或您不小心将其关闭,您可以按照这些说明手动打开向导。

现在,让我们完成设置步骤。

店铺详情

第一步,您将输入有关商店位置的一些基本详细信息:

WooCommerce 设置向导商店详细信息

行业详情

接下来,系统会要求您输入有关商店行业的一些详细信息:

行业

产品类型

然后,选择您要销售的产品类型。

大多数商店只想检查实体产品框。 如果您销售数字产品,您可以选择下载

产品类型

业务详情

最后,您将输入一些有关您商店的其他业务详细信息:

业务详情

WooCommerce 还会提示您向商店添加“免费业务功能”。 您可以单击手风琴展开选项。

对于大多数人来说,我建议安装所有“基础”,因为这些将帮助您进行付款、运输等。 不过,“发展你的商店”部分是完全可选的。

“基础”包括 WooCommerce 的付款、运输和税收专用服务,这是设置商店这些关键区域的最简单方法(尽管您可以使用其他工具/插件)。

如果您现在不想决定,您可以取消选中所有这些 - 您可以随时安装它们:

添加业务功能

主题

最后,安装向导会提示您安装主题。

只需单击继续使用我的活动主题跳过本节 - 我将在下一节中介绍如何设置您的 WooCommerce 主题:

跳过选择主题

如果您已安装“免费业务功能”,系统会提示您将 WooCommerce 商店连接到您的 WordPress.com 帐户。 如果您还没有 WordPress.com 帐户,您还需要创建一个。

此帐户是免费的,但需要使用专门的付款、运输和税收服务:

连接您的 WordPress.com 帐户以访问服务

3. 选择 WooCommerce 主题

在这一点上,你有一个正常运作的商店……但它可能看起来不像一个电子商务商店。

要解决此问题,您需要安装专门构建的 WooCommerce 主题。

在高质量的 WooCommerce 主题中需要寻找一些东西,包括:

  • 设计- 显然,您希望您的主题具有符合您所需审美的出色设计。
  • 功能- 虽然您将使用插件而不是您的主题添加大多数电子商务功能,但您仍然需要寻找基本功能,例如主题是否提供用户友好的产品搜索选项或其产品过滤器的外观。
  • 性能– 您的主题在商店的性能和加载时间中起着重要作用,因此选择不会减慢商店速度的轻量级 WooCommerce 主题至关重要。

我们创建了 Botiga 主题以在所有这些领域做得很好:

  1. 它看起来很棒,采用现代简约的设计。 您还可以从不同的可导入演示站点中进行选择,以获得您商店的完美外观。
  2. 它具有在线商店所需的主题的所有功能,例如购物者友好的产品搜索、有用的产品过滤器、销售徽章等等。
  3. 它旨在快速加载。 它仅重 44.3 KB,压缩了自己的代码,并且开箱即可获得完美的性能分数。
WordPress 电子商务商店的示例

由于这些原因,我将在本教程中使用 Botiga。 我们将坚持使用主题的免费版本,但如果您需要,还有一个高级版本可以添加更多功能。

安装 Botiga 主题

要开始使用 Botiga,请转到 WordPress 仪表板中的外观 → 主题 → 添加新内容。

然后,从 WordPress.org 搜索并安装免费的 Botiga 主题。

如何在您的 WordPress 电子商务商店中安装 Botiga 主题

导入演示站点

激活 Botiga 主题后,您将看到导入 Botiga 演示站点之一的提示。 这是可选的,但它会让您从第一天起就与时尚商店一起运营。

如果要导入演示站点,请单击Starter Sites按钮:

导入 Botiga 起始站点

它会自动将您带到起始站点区域。 或者,您可以转到外观 → 初始站点

要导入站点,只需将鼠标悬停在它上面并单击导入按钮:

Botiga 起始站点选项

这将启动一个弹出窗口,您可以在其中准确选择要导入的内容。 完成您的选择,然后再次单击Import

选择要导入的内容

如果您导入了所有演示内容,您的商店现在应该与您选择的演示站点完全一样。

自定义演示内容

现在,您可以制作自己的内容。

要自定义主题样式,例如字体和颜色,您可以转到外观 → 自定义

而且,要自定义各个页面,您可以像任何其他 WordPress 页面一样转到页面区域并对其进行编辑。 Botiga 的所有演示内容都使用原生 WordPress 编辑器,它可以帮助您的商店尽快加载。

4. 添加您的产品

现在您的商店实际上看起来像一个电子商务商店,您可以开始添加产品了。

您还需要配置一些其他细节,但是看到您的第一个实时产品总是很受鼓舞,这就是我将本节放在首位的原因。

注意 — 如果您导入了完整的 Botiga 演示站点,Botiga 将导入一些示例产品作为流程的一部分。 您可以将这些示例产品用作灵感,并在添加自己的产品时将其删除。

要创建产品,请转到Products → Add New

在这里,填写产品信息。 请特别注意以下方面:

  • 标题
  • 简短和详细的描述
  • 价格
  • 产品图片
  • 产品类别
  • 产品标签
  • 产品类型(在产品数据框顶部的下拉菜单中可用)——例如,是简单产品还是可变产品(例如,具有多种尺寸的 T 恤)

您还可以使用产品数据框中的选项卡来配置其他详细信息,例如库存、尺寸/重量、链接产品等。

如何将产品添加到您的 WordPress 电子商务商店

不用担心会搞砸任何事情 - 您可以随时回来编辑这些详细信息。

如果您对所有内容的外观感到满意,请单击更新发布按钮,就像您在博客文章中所做的那样。 一旦你这样做了,你的产品就会在你商店的前端上线。

要添加更多产品,您只需重复该过程即可。

如果您有数百或数千种产品,您还可以通过 CSV 文件导入您的产品,这样可以节省一些时间。

5. 配置其他 WooCommerce 设置

现在,该是本教程中最无聊的部分了:设置基本细节,例如付款、税收、运费等。

虽然这可能有点乏味且耗时,但它对商店的运作至关重要,因此您不能跳过它。

你将如何做到这一点实际上取决于你商店的位置和配置,所以我不能为每个变体展示一个具体的教程。 但是,我将介绍重点,以便您大致了解需要做什么。

一个好的起点是在您的仪表板中转到WooCommerce → 主页,您应该会在其中看到一个清单:

WooCommerce 设置清单

让我们来看看关键设置。

付款

设置付款的最简单方法是使用官方 WooCommerce Payments 服务(基于 Stripe)。 如果您在设置过程中安装了它,您需要做的就是单击上面清单中的使用 WooCommerce Payments 付款选项以启动设置向导。

如果您想配置不同的网关或直接使用 Stripe,您可以前往WooCommerce → 设置 → 付款

如何为您的 WordPress 电子商务商店设置付款

如果需要,您还可以安装其他第三方支付网关插件,如果您想使用某个本地支付网关,这会很有帮助。

运费

大多数商店在 WooCommerce 上处理运输有两种主要方式:

  1. 表费率运输- 您可以输入一组运输规则。 例如,1 磅以下的包裹售价 5 美元,1-5 磅之间的包裹售价 10 美元,5 磅以上的包裹售价 15 美元。
  2. 实时运费- 您可以根据每个订单的实际尺寸计算实时运费。 您可以与 USPS、UPS、FedEx 等集成。

WooCommerce确实有自己内置的运输规则功能。 但是,您可能需要一个单独的运输插件,因为内置功能不支持表格费率和实时费率。

如果您想探索内置的运输设置,可以转到WooCommerce → 设置 → 运输

首先,您将定义运输区,它们是一个或多个地理区域的分组。 例如,您可能有一个针对美国大陆的区域:

添加运输区域

创建区域后,您可以为该区域添加运输方式,这些方式仅对选定地理区域之一的客户可见。

有三个选项:

  1. 扁平率
  2. 免运费
  3. 当地取货
添加 WooCommerce 运输方式

添加方法后,您可以输入其成本。

但是,内置的运输功能不允许您根据包裹的重量/尺寸更改成本,这就是为什么您可能需要表运费插件或实时费率插件的原因。

您还可以考虑提供完整的订单履行服务,例如 ShipStation 或 TrackShip。

税收

最后要考虑的主要设置区域是商店的税金。 在许多法律管辖区,您需要向客户收取某种类型的销售税或增值税。

为简单起见,您可能希望在此处使用插件。 流行的选项是 WooCommerce Tax 和 Avalara:

使用税务插件

WooCommerce 也有一个手动税收选项,尽管它试图隐藏它,因为它很复杂。 要启用手动税收,您需要单击设置税收选项,然后选择手动选项。

完成此操作后,您将在WooCommerce → 设置 → 税收中获得一个新的设置区域:

手动税率

添加手动税收的最快方法是导入税收规则的 CSV。 例如,您可以从本网站以 29 美元的价格购买定期更新的美国税收规则 CSV。

其他设置

虽然付款、运输和税收是 WooCommerce 商店的一些最重要的设置,但它们远非您可以控制的唯一事情。 因此,我强烈建议您探索 WooCommerce 设置区域中的其他选项。

对于很多设置,您可以将它们保留为默认值。

但是,您可能会发现一些您认为更适合调整的设置。

例如,如果您转到WooCommerce → 设置 → 电子邮件,您可以自定义商店发送给客户和管理员的电子邮件的内容,例如购物者下订单后收到的电子邮件:

WooCommerce 电子邮件设置

6.安装插件以添加更多功能

将 WooCommerce 用于 WordPress 电子商务的最好的事情之一是大量的官方和第三方插件库,您可以使用它们来扩展 WooCommerce。

您的商店绝对会依赖插件来添加关键功能。 我认为没有一家商店至少没有一些 WooCommerce 插件。

请注意,WooCommerce 插件只是常规的 WordPress 插件。 为简单起见,我只是将它们称为“WooCommerce 插件”,但您将像安装任何其他 WordPress 插件一样安装它们。  

我已经在上一节提到了插件。 您通常需要使用插件来设置商店的支付网关、运输规则和税率。

但是,您还可以找到数以千计的其他插件来帮助您商店的所有区域,包括以下内容:

  • 更有效地营销您的商店
  • 为购物者添加有用的功能,例如愿望清单或仪表板内订单跟踪
  • 改进商店的管理流程以更有效地管理一切
  • 更好地控制商店的设计
  • 等等。

我不能为所有商店推荐一套插件,因为变量太多。 这里的关键细节是你不应该害怕使用插件来扩展 WooCommerce,因为所有WooCommerce 商店都依赖于插件——通常有几十个。

那么 - 您如何为您的 WooCommerce 商店找到最好的插件?

好吧,首先,查看我为不同用例收集的所有最佳 WooCommerce 插件,包括产品搜索、过滤、愿望清单、订单管理、销售漏斗和其他基本电子商务功能。

除此之外,您可以尝试浏览这些流行的插件市场:

  • WordPress.org有数千个带有 WooCommerce 标记的免费插件。
  • 官方WooCommerce 扩展商店列出了免费和高级插件,并包括官方扩展以及来自第三方开发人员的扩展。
  • CodeCanyon在 WooCommerce 类别中有超过 1,400 个高级插件。

我建议通过搜索您需要的特定功能来开始该过程。 然后,阅读评论并检查开发人员的声誉,就像您安装任何其他 WordPress 插件一样。

因为这些插件会影响商店的安全性和功能,所以我建议只安装来自信誉良好的开发人员的插件。

7.优化您的商店以提高性能

此时,您应该拥有一个功能齐全的电子商务商店,可以开始接收客户。

但是,如果您希望您的商店取得成功,则必须对其进行优化以快速加载。

您的商店加载速度将影响一系列不同的区域,包括以下内容:

  • 转化率
  • 搜索引擎排名
  • 用户体验
  • 跳出率

不用担心——如果您按照本指南进行操作,那么您已经完成了快速加载商店的一半,因为您使用的是快速主题 (Botiga) 和性能优化的主机(Cloudways 或您的首选主机)。

对于涵盖其余重要优化策略的最简单方法,您可以使用 WP Rocket 插件。 虽然 WP Rocket 是一个高级插件,但我认为值得投资(我的评论),因为它提供了加速商店的最简单方法。

要了解如何使用它,您可以按照我的教程学习如何使用 WP Rocket 和 Botiga 加速 WooCommerce。 在该指南中,我在启用各种优化功能后运行实际速度测试,以便您了解它们对您网站性能的影响。

立即创建您的 WordPress 电子商务商店!

恭喜! 您刚刚学会了如何使用 WordPress 创建电子商务网站,我希望您能够尽可能轻松地做到这一点。

如果您按照本指南中的所有步骤操作,您现在应该拥有一个功能齐全的商店,可以开始接受客户的订单。 一旦您开始接收订单,这些详细信息将显示在您的 WordPress 仪表板的 WooCommerce 区域中,您还将收到电子邮件通知。

或者,如果您仍处于创建 WordPress 电子商务商店的计划阶段,那么您至少知道开始构建时会发生什么。 准备好实际启动商店后,您可以返回本指南。

您对如何制作 WordPress 电子商务网站还有任何疑问吗? 让我们在评论中知道!