如何使用WooCommerce和WordPress建立电子商务网站

bysem (12)

使用WooCommerce和WordPress启动在线商店在本教程中,我们将教您如何建立WooCommerce + WordPress在线商店,您可以在其中列出和销售实物产品。

WooCommerce是一个简单明了的免费插件。简而言之,WooCommerce是将WordPress网站转变为功能齐全的电子商务商店的最佳方法。

  • 像WordPress一样是免费和开源的。
  • 它是最流行的WordPress 电子商务插件。
  • 您可以自己设置和配置它
  • 设定是快速。通常,只需要一个小时。
  • 它可以与您WordPress网站上当前拥有的任何设计/主题一起使用 -您无需放弃当前的网站设计。

我们可以继续上面的列表,但是,让我们只说WooCommerce可以为您提供用WordPress建立高质量的电子商务商店所需的一切。

您可以使用WordPress + WooCommerce卖什么?

  • 数字产品(例如软件,下载,电子书),
  • 实物产品,
  • 服务,
  • 预订(例如约会,或其他可以预订的),
  • 订阅,
  • 其他人的产品–作为会员,
  • 自定义项(例如,产品列表上方的其他自定义项)等等。

换句话说,您可以通过自己的网站赚钱。

通过WooCommerce允许您出售可以分配价格标签的任何商品。最重要的是,任何人都可以使用它(如果您已经成功启动了WordPress网站,那么您也将能够处理WooCommerce)。

如何使用WordPress和WooCommerce建立在线商店

注意:本指南这一部分的目的是向您展示在WordPress上构建功能性电子商务商店的最简单方法,以便您可以尽快使商店在线。这就是为什么我们将只关注基本内容而跳过更高级的方面的原因。

步骤1.获取域名和虚拟主机

为了创建在线商店或任何其他类型的网站,您将需要两件事:

  • 域名是您商店在网络上的唯一地址。就像是YOURSTORE.com
  • 虚拟主机基本上是一台远程计算机,用于存储您的网站,然后将其提供给想要访问它的任何人。

 

网络上有数百种不同的托管主机和域名提供商,我们通常都从Bluehost.com获得这两种服务。他们提供负担得起的虚拟主机(包括一年的免费域名)和可靠性。它们还是WordPress.org推荐的为数不多的推荐(官方)主机提供商之一,而且价格实惠,低至2.75 美金每月。

首先,您只需要转到Bluehost.com,然后单击“开始使用”按钮。

用Bluehost注册

这将带您到一个页面,您可以在其中选择商店的托管计划。您可以从最便宜的选项开始,标记为“基本”:

bluehost选择
如果您使用我们的推荐链接,则可以$ 2.75 / mo的价格购买Bluehost。

下一步是为新的在线商店选择域名。

bluehost域

这需要一些头脑风暴。在一般情况下,你希望你的域名是唯一的便于记忆  和琅琅上口。如果您已经为商店设置了业务实体,则应该将其用作域名。

一旦您选择了域名,就可以完成设置并支付初始托管费。

支付之后您就已经拥有了一个域名和一个托管主机。

步骤2.安装WordPress(免费)

下一步正式标志着WordPress冒险之旅的开始–您将在主机帐户上安装WordPress。

这听起来可能很困难,但实际上并非如此。您所要做的就是转到您的Bluehost用户面板(Bluehost将在确认电子邮件中向您发送链接)–通常可以在my.bluehost.com上找到

到达那里后,向下滚动,直到看到标有“ Install WordPress”的图标:

选择wordpress

单击它,然后按照屏幕上的说明进行操作。您将逐步完成整个过程,无需担心!

 

此时,您应该已经安装了一个空白的WordPress网站。

  • 您可以通过转到您的主域名(例如YOURSTORE.com)来查看它
  • 您可以通过以下方式登录到管理面板: YOURSTORE.com/wp-admin

现在是时候使用出色的WooCommerce插件将空白的WordPress网站转变为功能全面的电子商务商店。

步骤3.安装WooCommerce插件

与  所有WordPress插件一样,乐趣从导航到WordPress仪表板/插件/添加新功能开始。在那里,在搜索字段中键入“ woocommerce”。您会看到WooCommerce作为第一个搜索结果:

woocommerce安装

只需单击插件旁边的“立即安装”按钮。

几秒钟后,按钮上的文本将变为“激活”。继续并单击它。

woocommerce激活

在此阶段,您将看到WooCommerce的屏幕启动/设置向导。这东西使整个过程变得异常简单,并带您轻松完成所有工作。要开始,请单击“开始吧!”

woocommerce向导1

创建基本商店页面

在线商店是一种特殊的网站,它们需要一些特定的页面才能正常运行。WooCommerce向导的第一步是为您创建以下页面:

  • “商店” –这是您要展示产品的地方。
  • “购物车” –这是购物车,您的客户可以在此购物车在结帐之前调整订单。
  • “结帐” –这是客户选择运输/交付方式并为所购买的商品付款的地方。
  • “我的帐户” –一种用于注册客户的个人资料页面(他们将能够在此查看他们过去的订单并管理其他详细信息)。

在WooCommerce向导的此阶段您需要做的就是单击“继续”按钮。WooCommerce将为您设置这些页面。

设置语言环境

语言环境是商店设置中至关重要的部分。这几个参数定义了您的业务来源,币种和首选单位:

woocommerce向导2

完成后,单击“继续”。

了解营业税

到目前为止,税收是经营电子商务商店中最令人兴奋的部分,但令人遗憾的是,这也是我们不能忽视的事情。

您会很高兴看到WooCommerce在这方面也为您提供帮助。

首先,您可以选择是否要运输实物商品。如果选中此框,WooCommerce将在设置中预先设置其余与运输有关的详细信息。

woocommerce向导运输

接下来,征税!WooCommerce有一个非常简洁的税收模块,它的优点是可以帮助您根据商店位置计算税率(已在上一步中进行了设置)。

如果您要收取营业税(大多数情况下是),只需选中主税框。一旦执行此操作,就会出现一组新的框,并告知您接下来将发生什么。

woocommerce税制切换

 

点击“继续”。

选择一种付款方式(建议使用PayPal)

能够接受在线支付是任何电子商务商店的核心,WooCommerce确实提供了很多可用的解决方案。

您可以从以下选项中进行选择:

woocommerce向导付款

最流行的两种付款方式位于最顶端-贝宝(PayPal)和Stripe-强烈建议您将网站与两者集成。只需单击其相应的复选框。

您还可以选择其他可行的付款方式。稍后在WooCommerce设置面板中将提供更多选项。

注意:为了使在线支付有效,您需要分别与PayPal或Stripe签约。WooCommerce中的设置仅用于将现有的PayPal和Stripe帐户与新的电子商务网站集成。

再次,完成后单击“继续”。

下一步只是一个确认屏幕,一切顺利。在此阶段,基本的网站设置已完成–您刚刚使用WooCommerce建立了一个空白的电子商务商店!

下一步是添加产品:

步骤4.添加您的第一个产品

为了使您的商店运转起来,您需要数据库中的某些产品(或服务,下载或任何您想要出售的产品)。

要开始使用产品,请转到信息中心,然后选择“  产品/添加产品”

添加产品

您将看到的是经典的WordPress内容编辑屏幕:

woocommerce产品添加

  1. 产品名称
  2. 主要产品说明。这个大字段使您可以输入所需的产品信息。由于这是WordPress,因此您不仅可以在其中放置简单的文本,还可以放置图像,列,标题甚至视频和其他媒体。基本上,只要您认为合适!
  3. 中央产品数据部分。在这里,您可以设置要添加的产品的类型,以及它是物理产品,可  下载产品还是 虚拟产品(服务也被视为虚拟产品)。在本主要部分中,您还将获得产品各种参数的标签:
    1. 通用。在这里可以设置价格和税金。
    2. 库存。WooCommerce允许您管理库存水平。
    3. 运输。设置重量,尺寸和运输成本。
    4. 链接产品。非常适合设置销售,交叉销售等。(想想,“购买此商品的客户也购买了该商品。”)
    5. 属性。设置自定义产品属性。例如,如果您要出售衬衫,则可以在此处设置其他颜色。
    6. 进阶。其他设置。不是必需的。
  4. 简短说明。这是名称下显示在产品页面上的文本。作为产品简介的最佳摘要。
  5. 产品类别。将类似产品分组在一起。例如,“帽子”。它的工作方式与标准WordPress类别相同。
  6. 产品标签。帮助您组织产品数据库的另一种方法。它的工作方式与标准WordPress标签相同。
  7. 产品形象。主要产品形象。
  8. 产品展示区。其他产品图片展示了它们的出色表现。

第一次访问此面板时,WooCommerce将显示一些方便的工具提示,以解释每个字段的用途:

woocommerce添加产品工具提示

完成以上所有设置后,单击较大的“发布”按钮–您的第一个产品已添加!

将少量商品添加到您的数据库后,仪表板中的“产品”部分应如下所示:

woocommerce产品

步骤5.为您的在线商店选择主题(免费)

在讨论整件商品的外观之前,有一个很好的理由为什么我们首先介绍了如何向您的商店添加产品。

坦率地说,如果数据库中没有任何产品,您将无法以任何代表形式查看商店的各个页面。您将无法确保一切看起来正确。

现在您已经添加了大多数产品,我们可以确保从纯粹的视觉角度来看一切井井有条。

WooCommerce与您当前的主题

默认情况下,WooCommerce适用于任何WordPress主题这是个好消息,尤其是如果您已经选择了设计并且想要坚持下去。

另外,您可以选择特殊的WooCommerce优化主题。这些主题带有预设样式,使所有WooCommerce元素看起来都很棒。

这是我们的建议:

主题选择

WooCommerce的官方主题(也是最有可能正常运行的主题)称为Storefront。默认版本是免费的,它足以使您开始工作。

店面

另外,您可以访问ThemeForest上的电子商务部分 -互联网上最大的高级WordPress主题目录。

主题林

无论您是决定坚持当前的主题,还是想进行一些新的且经过WooCommerce优化的事情,接下来要做的就是确保商店的各个页面看起来都不错。让我们现在开始:

电子商务商店设计规则

在进入实质之前,让我们讨论一些重要方面。

主要是–  什么使电子商务商店的设计更好(阅读:有利可图)?以下是最关键的参数:

  • 设计必须清晰明了,不以任何方式造成混淆。困惑的访客不会购买任何东西。
  • 中心内容块需要在访问者访问网站后立即吸引他们的注意。该中心块是产品展示的位置。
  • 可调式侧边栏。您需要能够选择所需的侧边栏,还必须完全禁用某些页面的侧边栏(稍后会详细介绍)。
  • 响应式且针对移动设备进行了优化。研究表明[2],互联网上大约80%的人拥有智能手机。根据另一项研究[3],如果您的移动浏览器体验令人沮丧,他们中有61%的移动访问者会立即离开并前往您的竞争对手。换句话说,确保您的网站针对移动设备进行了优化是至关重要的。
  • 良好的导航结构。您需要清晰易懂的菜单,以便于访问者找到他们想要的页面。

考虑到以上几点,这是您可以对商店的各个页面执行的操作:

您的商店页面

在这里可以找到您的产品的主要列表。如果您已经完成了WooCommerce设置向导,则可以在以下位置找到此页面:YOURDOMAIN.com/shop

这是标准的WordPress页面-您可以通过WordPress仪表板/页面进行编辑  

值得做的事情:

  • 添加一些副本,以鼓励您的访客与您一起购物。
  • 确定是否要在页面上显示侧边栏。这是通过主题自己的页面模板完成的。例如,Storefront允许我全屏显示,我们将这样做:

全屏宽度

商店页面的主要特征是,在标准内容的正下方,有一个自定义部分,用于显示您的产品清单。这是店面主题的外观:

woocommerce商店页面

如您所见,好的产品图片是关键,这是您应该正确的第一件事!换句话说,您在产品图片上的工作可能比其他任何事情都要多。

WooCommerce还使您可以在此页面上以其他方式显示产品。当您转到WordPress仪表板/ WooCommerce /设置/产品,然后转到显示部分时:

woocommerce产品展示

…您可以选择在商店页面上显示单个产品还是产品类别。选择最适合您的设置,然后保存设置。

个别产品页面

为了查看这些内容,请在“商店”页面上单击任何产品列表。

如果您使用的是优质主题,则在此特定页面上应该不会遇到任何困难。基本上,您唯一可以做的就是调整用于单个产品说明的文本量,以确保所有内容在视觉上都合适,并且没有空白点可以使买家感到困惑。

这是带有店面主题的示例(没有任何其他自定义):

woocommerce产品列表

购物车

另一个重要页面可以通过“ 仪表板/页面”进行调整。

我们建议的一件事是采用全角布局。除了继续结帐之外,您不想在此页面上给买方太多选择。

woocommerce购物车

查看

结帐可能是其中最重要的页面。在这里,您的买家可以最终确定订单并付款。

实际上,我们不鼓励您对页面进行任何调整,除了以下一项:

Checkout页面绝对需要全角。对于买方来说,离开页面的唯一可接受的方法应该是确定他们的订单,而不要被侧边栏中的可用东西所干扰。

您可以通过仪表板/页面来执行此操作  (只需重复使用“商店”页面所经历的过程)即可。

除此之外,“结帐”页面的默认外观很棒:

woocommerce结帐

在此阶段,您基本上已经完成了调整商店设计的工作。

简而言之创建在线商店

如您所见,使用WordPress创建自己的电子商务商店的难度并不高,但是仍然需要花费一些时间才能完成上述所有步骤-大概一两个下午。

考虑到仅仅五年前,您需要雇用一名开发人员并向他们支付5,000美元以上的费用才能创建类似的东西,这仍然令人难以置信。现在您可以自己做所有事情!

无论如何,为了帮助您完成所有必需的任务,这里有一个切入并保留的清单:

在你开始之前

  • 获取域名,注册虚拟主机,WordPress安装。
  • 确保新的空白WordPress网站正常运行。

安装WooCommerce

  • 安装并激活主要的WooCommerce插件。
  • 通过WooCommerce设置向导,请密切注意:
    • 获取所需的四个页面(商店,购物车,结帐,我的帐户)。
    • 设置商店区域设置。
    • 设置营业税和运费。
    • 选择初始付款方式。

产品展示

  • 将大多数(或全部)产品或产品类别添加到商店。

设计

  • 为您的电子商务商店选择正确的WordPress主题。既可以使用现有主题,也可以浏览其他可能性。这样做时,请复查电子商务商店设计规则。
  • 调整您的商店页面。
  • 调整各个产品页面。
  • 调整购物车页面。
  • 调整结帐页面。
0 I like it
0 I don't like it

Leave a Reply

Your email address will not be published. Required fields are marked *