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

超过74的网站依赖于WordPress平台来托管他们的博客,销售他们的产品或只是写他们的日常思考供世界观看。 当你开始构建你的 电子商务网站 你当然有很多选择,WordPress与此有关。

哪个突出 电子商务平台 你会选择吗? 您是否计划抓住主题来销售您的产品,或者您是否有人可以从头开始构建网站? 哎呀,你甚至打算通过电子商务网站销售什么?

编者注:本文最初发布于1月15,2015,并已完全修改和更新,以确保准确性和全面性。

当您寻找前端和后端结构以开始在线销售时,有数千到数百万个WordPress主题可供选择。 与托管几乎相同(但我们更喜欢 SiteGround or BlueHost的).

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

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

首先获取您的域名和托管

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

真正酷的是SiteGround提供专业的 管理WooCommerce托管 服务套餐包含您开始在线销售所需的一切。 在包装内,你可以满足 启动计划 对于初学者, GrowBig计划 对于发展中的企业,或 GoGeek 对于已建立的WooCommerce商店。

其中每个都提供了以合理的价格优化您的WooCommerce网站的高级功能。

也就是说,我们强烈推荐给Divi WooCommerce商店的另一个托管服务是 BlueHost的。 虽然这里的功能与SiteGround不匹配,但您仍然可以通过其WordPress电子商务软件包获得以WooCommerce为中心的托管服务。 该计划可以轻松处理Divi WooCommerce商店,但遗憾的是,您将无法获得托管服务。

👉 现在,为了清楚起见,让我们继续使用SiteGround ......

你是如何开始的?

SiteGround管理WooCommerce托管 页面,选择一个理想的计划,然后单击 获得计划。

在我看来, GoGeek计划 似乎是最合适的选择,因为它支持具有高级电子商务功能的无限WooCommerce网站。 除了更强大的服务器功能外,您还可以获得优先支持,WordPress登台,按需备份和超级追踪器资源,以及免费站点转移和Cloudflare CDN等功能。

👉 就资源配额而言,该计划适用于:

  • 6GB邮箱
  • 1 GB数据库存储
  • SSD存储
  • 未计量的数据传输
  • 30GB存储空间
  • 每月最多100,000次访问

请记住, 这项服务的起价为每月$ 11.95,它与你如何在BlueHost托管帐户上安装常规WordPress网站非常相似。

但请记住,这对初学者来说是一个特殊的价格。 预计在未来的续约中它会增加到$ 34.95,如果考虑到你长期获得的所有功能,这仍然是一个合理的收费。

现在,一旦你选择了你的首选计划, SiteGround 将引导您进入其域名注册页面。 如果您已拥有域,请选择第二个选项并输入其详细信息。 否则,每年以$ 15.95的价格进行新的域名注册。

接下来是最后阶段,您可以在创建帐户之前选择首选主机选项,以及输入付款信息和个人详细信息。

嗯,当然,这些是你以前多次处理的基本内容。 因此,输入您的电话号码,国家/地区,姓名,电子邮件,帐户密码等时不会有任何困难。

付款部分要求您输入信用卡详细信息。 你可以继续 发现,万事达卡 or 签证。

然而,相当有趣的是, SiteGround 虽然它在WooCommerce商家中越来越受欢迎,但没有列出PayPal。 但是,幸运的是,事实证明他们可以接受PayPal付款,但是间接付款。

因此,如果这是您的首选模式,只需将字段留空并通过实时聊天工具联系SiteGround的销售代理。 他们将帮助您通过PayPal完成此过程。

最后一部分包含几种托管服务选项,包括您首选的数据中心位置以及订阅周期。

现在,为了最大限度地减少Siteground服务器与您的WooCommerce网站访问者之间的数据传输距离,请选择最接近目标市场区域的数据中心位置。

然后选择您希望包含在包中的任何额外附加服务,瞧! 这就是设置Siteground帐户所需的全部内容。

完成后,登录您的帐户并直接进入您的cPanel区域。 你会找到一个默认的WordPress自动安装程序。 因此,选择它,输入您的WordPress登录详细信息,然后单击安装按钮。

好吧,你会注意到WordPress安装过程需要几秒钟,因为它全部是自动化的。 设置完所有内容后,如果您想要更改站点后端的内容,SiteGround将为您提供正确的域名。

使用Divi创建您的在线商店

什么是Divi?

好吧,如果你没有尝试过,我打赌你已经听说过了。 迪维 不是普通的WooCommerce主题。 事实上,它是优雅主题上最受欢迎的WordPress主题之一。 而且,有趣的是,Divi是 优雅的主题的主打产品。

那么,这个主题有什么特别之处呢? 关于Divi的WooCommerce有什么突出的吗?

好吧,与典型的WordPress主题不同,Divi更像是一个全面的包。 这意味着它结合了标准主题功能和为Divi WooCommerce商店派上用场的额外功能。

什么是divi

不要误解我的意思。 虽然Divi的WooCommerce支持是这里的主要关注点,但主题远不止于此。 从本质上讲,Divi可以与任何类型的网站无缝集成,这得益于其广泛的网站布局。 不只是电子商务。

然后,最重要的是,Divi带有自己的直观WordPress页面构建器插件。 您可以使用它来自由定制您的Divi WooCommerce商店,而无需任何编码。

事实上,Divi是为初学者开发的。 因此,您可以期待找到一个几乎没有学习曲线的整洁控制面板。 只需几分钟就可以了解整个Divi生态系统,进行设置,并自定义Divi的WooCommerce布局。

👉 因此,最终,您将能够充分利用 迪维的:

  • 适用于任何类型的WordPress网站的可自定义布局数组,包括WooCommerce在线商店。
  • 易于使用的页面构建器,提供大量网站元素和设计功能。
  • 灵活的定制过程,无需任何形式的编码。 即使是初学者也可以轻松设置和调整功能齐全的Divi WooCommerce商店。
  • 直截了当的WordPress集成。 Divi是少数可以无缝安装的外部WordPress主题之一,无需任何复杂的调整。
  • 电子商务优化的WooCommerce模板。

Divi拖放页面生成器

就像我们说的那样,Divi有两种不同的风格。 当你支付会员资格时 优雅的主题, 您可以在仪表板上找到标准的Divi主题,并附带Divi WordPress Page Builder插件。

但是,值得注意的是,这个建造者并不完全依赖于Divi主题。 它是从Elegant Themes获得的每一个主题的附加插件。

也就是说,Divi WordPress页面构建器是一个具有高级自定义功能的拖放式编辑器。 它允许您移动和定义元素,列,行和模块,而无需任何编码经验。 换句话说,它是Divi的建造者类型 WooCommerce 初学者希望得到。

divi设置

但是,不要搞错。 尽管Divi Page Builder面向初学者,但它也是一个有助于经验丰富的开发人员的编辑器。 他们可以系统地将其视觉功能与CSS控件结合起来,将他们的Divi WooCommerce网站提升到一个新的水平。

但是,请考虑一下 您不需要开发人员来设计Divi WooCommerce商店中的所有元素。 您可以单独依赖视觉功能。

你知道吗?

迪维 甚至尝试通过标记和对其布局模块进行颜色编码来使整个过程更容易。

说到这里,另一个值得注意的条款是Divi对布局定制过程的整体简化。 例如,如果要引入新的部分,只需单击一下即可。 然后,为Divi WooCommerce商店复制,删除和插入模块只需要点击几下按钮。

同时,Divi的编辑窗口将实时显示您网站的布局变化。 您将能够直观地跟踪每个调整,并了解它如何影响Divi WooCommerce商店的整体外观设计。

预先设计的Divi WooCommerce网站布局

为了帮助您避免从头开始创建网站的痛苦要求,Divi WordPress主题带有一系列预先设计的网站模板。 由于您可能需要相同模板的不同布局选项,因此Divi将其网站设计作为综合包提供。 因此,您可以获得不同的模板布局和颜色。

好吧,更确切地说,Divi在每个网站包上提供了与7-8不同的预先设计的布局。 考虑到每个都是完全构建的,您可以轻松采用布局而无需大量重新设计其底层结构。 你只需要在这里和那里进行一些调整。

divi网站布局

现在,想要找到适合您的WooCommerce在线商店的完美产品,只需滚动Divi主题上的各种网站类别即可。 或者,使用关键字一次搜索所有选项。

嗯,总而言之,确定一个合适的并不需要很长时间 迪维 在线商店布局。 您只需要将其与WooCommerce集成,您就可以开始建立一个有吸引力的WordPress电子商务网站。

继续前进,你会注意到一个特别突出的事情是Divi并不专注于外表。 Divi Theme附带的WooCommerce布局也考虑了功能性。

因此,除了结帐,产品和购物车等典型商店页面之外,Divi默认包含电子商务模块。 更具体地说,您可以获得特色产品,促销商品等部分。

Divi适合WooCommerce吗?

考虑到所有因素,Divi越来越受欢迎,因为它基本上是一个一体化的WordPress主题解决方案。

结合,Divi Page Builder和 Divi主题 提供几乎所有你需要的东西来设置任何类型的WordPress网站。 这包括一个功能齐全的WooCommerce商店,具有所有核心电子商务功能。

👉 简而言之,Divi是您的WooCommerce网站值得考虑的选择,因为:

  • 您可以通过拖放式可视化编辑器自定义您的WooCommerce网站。
  • Divi允许您将调整保存为所有布局中的全局元素。
  • 它配备了20精心设计的预建网站布局。
  • 您可以轻松导出布局,然后在其他网站上利用它们。
  • 您可以使用多个列,行和内容元素设计WooCommerce商店。
  • 所有WooCommerce布局都针对移动设备进行了优化。
  • 就像 MS Word, 编辑文本内容就像点击然后输入一样简单。
  • 实时跟踪整个站点自定义过程,从而提供所有设计更改的实时预览。
  • WooCommerce布局带有主要的在线商店页面和模块。

步骤1:注册优雅的主题,以获得Divi的访问权限

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

Divi WordPress主题

步骤2:在您的WordPress站点上安装Divi

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

Wordpress新主题

步骤3:单击“添加新”按钮

Wordpress添加新主题

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

Wordpress主题上传

步骤4:设置您的WooCommerce商店

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

最棒的是,最初的SiteGround注册已在您的WordPress网站上安装了WooCommerce,因此您无需担心安装或设置它。 它应该已在您的信息中心中提供。

步骤5:将您的第一批产品添加到WooCommerce

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

WooCommerce添加新产品

步骤6

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

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

步骤7:探索WooCommerce功能

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

WooCommerce功能

步骤8:创建主页

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

Wordpress新页面

步骤9:为您的Divi页面添加标题

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

页面生成器wordpress

步骤10

单击“全宽标题”按钮。

添加标题

步骤11

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

标头定制

步骤12

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

WordPress woocommerce设置

步骤13

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

调整这些按钮

步骤14

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

Wordpress电子商务设置

步骤15

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

Wordpress电子商务设置

步骤16

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

Wordpress电子商务设置

步骤17:预览和发布

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

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

总结

这就是获得你的所需要的一切 迪维 WooCommerce在线商店使用SiteGround托管帐户启动和运行。

展望未来,您可以放心,SiteGround将处理所有关键技术内容,如WordPress更新和 WooCommerce 安全。 这是托管WooCommerce托管和常规共享托管解决方案之间的根本区别。 因此,它为您提供了急需的时间和空间,专注于您的WooCommerce商店管理。

正如我们已经看到的那样,Divi主题应该是轻而易举的。 您可以随时从WordPress后端访问Divi WooCommerce布局,以进一步自定义。 如果您愿意,您甚至可以通过转换到可以处理WooCommerce商店的不同布局来完全改变整个设计。 这是你的选择。

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

迪维 评分: 5.0 - 审查

Catalin Zorzini

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