如何使用WooCommerce,Divi和Bluehost(1月2019)创建一个神奇的网上商店

超过74的网站依赖于WordPress平台来托管他们的博客,销售他们的产品或只是写他们的日常思考供世界观看。 当你开始构建你的电子商务网站时,你肯定有很多选择,WordPress与此有关。 您会选择哪些出色的电子商务平台? 您是否计划抓住主题来销售您的产品,或者您是否有人可以从头开始构建网站? 哎呀,你甚至打算通过电子商务网站销售什么? 当您寻找前端和后端结构以开始在线销售时,有数千到数百万个WordPress主题可供选择。 与托管几乎相同(但我们更喜欢 BlueHost的).

最好的主题包括快速简便的电子商务管理工具,因此您可以上传产品和管理折扣,奖励,按钮和产品页面等内容。 您的主题也是人们访问您网站时首先看到的内容。 它引导他们完成整个过程,真正体现了某人对体验的满意与否。

简而言之,WordPress主题至关重要,而且 迪维 来自Elegant Themes的WordPress主题是一个相当漂亮的选项供您考虑。 它可以用于标准的商业网站,但它还包括电子商务销售和快速销售流程的集成。 让我们学习如何使用Divi WordPress主题创建在线商店。

首先获取您的域名和托管

任何网站创建过程的第一步是在网站上获取主机帐户,域名和安装WordPress。 迪维 没有什么不同。 有很多方法可以获得托管和域名,但我个人认为Bluehost是最安全可靠的选项之一(更多细节请查看我的 Bluehost评论).

什么真的很酷 Bluehost提供WordPress + WooCommerce集成计划 它为您提供了开始在线销售所需的一切。

你怎么开始?

关于集成的Bluehost页面,然后单击立即开始按钮。

请记住,此服务的起价为每月$ 11.95,这与您在Bluehost托管帐户上安装常规WordPress网站的方式非常相似。

主要区别在于 WooCommerce 已安装。 此外,您还会收到以下信息:

  • 积极的SSL电子商务安全
  • 专用支持热线
  • 至少100 GB的网站空间
  • 未计量的带宽
  • 100电子邮件帐户
  • 免费域名
  • 专用IP

woocommerce_and_wordpress

继续前进,您可以选择要支付的计划并转到下一页。

choose_your_plan

之后,您可以尝试使用新域名来确定您想要的内容是否仍然可用。 找到适合您品牌的可用域名后,请转到下一页。

BlueHost域名注册

之后,输入您的所有个人信息,付款详细信息,并确定您要使用的年度或月度主机方案类型。 从一开始你承诺的月份越多越便宜。

package_information

您通常可以跳过所有额外的附加垃圾,除非您真的热衷于支付备份您的网站或支付隐私保护。 你通常不需要这个或者可以在以后免费获得它。 之后,您可以为Bluehost帐户创建登录详细信息,然后将其带到CPanel。 登录到CPanel后,导航到Website Builders区域,单击WordPress并完成在您的站点上获取WordPress的过程。

BlueHost网站建设者

这通常只需要五分钟,因为它全部是自动化的,您只需要制作一些登录凭据即可登录到您网站的后端。 设置完所有内容后,如果您想要更改站点后端的内容,它将为您提供正确的域名。

使用Divi创建您的在线商店

步骤1

开始前往 优雅的主题产品页面 为Divi WordPress主题。 此页面提供主题演示和快速下载按钮的选项。 优雅主题使用年度或一次性支付结构销售其主题,这对于拥有多个客户端站点或运行众多电子商务网站的开发人员来说非常好。 你不能只买一个主题,但是 个人计划 每年$ 67类似于您可能为常规主题支付的费用,如果您不再需要支持,则可以停止每年付款。 在您承诺付款之前,请随意使用主题。

Divi WordPress主题

步骤2

注册后,单击主题的下载按钮。 这会将主题作为zip文件放在您的计算机上。 转到WordPress站点后端的“外观”选项卡,然后单击“主题”选项。

Wordpress新主题

步骤3

单击“添加”按钮。

Wordpress添加新主题

单击“上载主题”按钮。 查找并上传主题zip文件。 完成整个过程以完全激活主题,然后您应该能够在您网站的前端看到主题。

Wordpress主题上传

步骤4

如果你去的话 Divi主题文档页面 你会发现几乎所有可以在主题上使用的工具和功能,但我们将主要关注建立一个电子商务网站。 Divi主题 与WooCommerce完全兼容,因此您可以显示所有产品。

最棒的是,最初的Bluehost注册已经在你的WordPress网站上安装了WooCommerce,所以你不必担心安装或设置它。 它应该已在您的信息中心中提供。

步骤5

您在技术上已经设置了电子商务网站,但我们希望实际添加一些产品,使其看起来像前端的电子商务网站。 转到WordPress仪表板,单击WooCommerce下的Products选项卡,然后单击Add Product项。

WooCommerce添加新产品

步骤6

这会打开一个新的产品页面供您填写。 它看起来与任何WordPress页面编辑器非常相似,除了您可以添加产品名称,描述和特色图像,以便人们可以在您的网站上看到产品的外观。

电子商务添加了新的产品字段

步骤7

如果您在描述区域下方向下滚动,您会发现可以使用的所有可能的WooCommerce功能。 随意修改SKU编号,库存,定价,运输和属性等内容。 这些功能太过庞大,我无法在这里概述它们,但你可以去看看 WooCommerce文档页面 了解您可以在电子商务网站上设置的所有内容。

WooCommerce功能

步骤8

这一点的重点是 创建一个主页 当人们出现在您的网站上时,或者包含所有产品的常规页面。 因此,您应该转到WordPress仪表板左侧的Pages> Add New。

Wordpress新页面

步骤9

为您的页面创建标题。 单击顶部的“使用页面生成器”按钮,然后点击“插入模块”区域以包含全宽标题。 您不必选择全宽标题,但我们将参加本教程。

页面生成器wordpress

步骤10

单击“全宽标题”按钮。

添加标题

步骤11

填写您的站点标题,副标题文本和文本颜色的详细信息。 您甚至可以更改管理标签,主要供您自己参考。 完成后点击“保存”按钮。

标头定制

步骤12

点击“全宽”标题模块左侧的三个栏以更改更多设置。

WordPress woocommerce设置

步骤13

在这里,您可以为标题提供漂亮的背景颜色,甚至可以为您的公司提供视频。

调整这些按钮

步骤14

现在标题已完成,我们可以通过单击“插入列”区域来包含电子商务模块。

Wordpress电子商务设置

步骤15

选择所需的列数,然后单击出现的“插入模块”选项。 选择底部附近的商店按钮。

Wordpress电子商务设置

步骤16

您可以随意修改要展示产品的方式。 因此,您可能希望显示最近的产品,页面上的12项目,几列以及您希望如何订购它们。 单击“保存”按钮。

Wordpress电子商务设置

步骤17

完成后,您可以点击预览或发布按钮查看前端的更改。 正如您所看到的,产品很好地显示,您可以随时返回以更改WordPress后端的产品或店面设置。 恭喜!

如果您对设置有任何疑问 Divi WordPress主题请在下面的评论部分告诉我们。

迪维 评分: 5.0 - 审查

Catalin Zorzini

我是一名网页设计博客,在花了几周时间努力寻找出来之后开始了这个项目 最好的电子商务平台 为了我自己。 看看我的电流 顶级10电子商务网站建设者.