如何创建一个神奇的网上商店 WooCommerce, Divi 以及 SiteGround (十月2021)

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

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

编者注:这篇文章最初于15年2015月XNUMX日发布,为了准确性和全面性,已经过全面修订和更新。

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

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

简而言之,WordPress主题至关重要,而且 Divi 优雅主题的WordPress主题 是一个不错的选择供您考虑。 它可以用于标准的商业网站,但也包括用于电子商务销售和快速销售流程的集成。 让我们学习如何使用 Divi WordPress主题。

首先获取您的域名和托管

????任何网站创建过程的第一步是在网站上获取主机帐户,域名和安装WordPress。 Divi 没什么两样有很多获取主机名和域名的方法,但我个人认为 SiteGround 是最安全和可靠的选择之一。 (有关更多详细信息,请查看我们的综合 SiteGround 检讨).

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

这些功能均提供高级功能,可优化您的 WooCommerce 网站以合理的价格。

也就是说,我们强烈建议您使用另一种托管服务 Divi WooCommerce 商店是 BlueHost的。 尽管此处的功能与 SiteGround的,你仍然得到 WooCommerce通过其WordPress电子商务软件包进行专注于主机的托管。 该计划可以舒适地处理 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 没有列出PayPal,尽管它在各行各业中越来越受欢迎 WooCommerce 商人。 但是,值得庆幸的是,事实证明他们可以接受PayPal付款,尽管是间接的。

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

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

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

然后,选择要包含在包装中的任何其他附加服务,瞧! 这就是建立一个 Siteground 帐户。

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

好吧,您会注意到WordPress的安装过程需要几秒钟,因为它是完全自动化的。 一切准备就绪后, SiteGround 如果您想在网站的后端进行更改,则会为您提供正确的域名进行访问。

创建您的网上商店 Divi

什么是 Divi?

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

那么,这个主题有何特别之处? 还有什么值得一提的 Divi“ WooCommerce?

好吧,与典型的WordPress主题不同, Divi 更像是一个综合包。 这意味着它将标准主题功能与方便使用的额外功能相结合 Divi WooCommerce 商店。

什么是 divi

不要误会我的意思。 虽然 Divi“ WooCommerce 支持是这里的主要重点,主题的功能远不止于此。 在本质上, Divi 由于其广泛的网站布局,可以与任何类型的网站无缝集成。 不只是电子商务。

最重要的是, Divi 带有自己的直观WordPress页面构建器插件。 您可以使用它自由地自定义您的 Divi WooCommerce 完全不用任何编码即可存储。

事实上, Divi 是为初学者开发的。 因此,您可以期望找到一个几乎没有学习曲线的整洁的控制面板。 只需几分钟即可掌握全部内容 Divi 生态系统,对其进行设置和自定义 Divi“ WooCommerce 布局。

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

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

Divi 拖放页面构建器

就像我们说过的 Divi 有两种不同的口味。 当您支付的会员费用时 优雅的主题, 你会发现标准 Divi 仪表板上的主题,并伴随着 Divi WordPress Page Builder插件。

但是,值得注意的是,此生成器并不专门与 Divi 主题。 它是从Elegant Themes获得的每个单个主题的附加插件。

那说, Divi WordPress Page Builder是具有高级自定义功能的拖放编辑器。 它使您无需任何编码经验即可移动和定义元素,列,行和模块。 换句话说,这是构建器的类型 Divi WooCommerce 初学者希望得到。

divi 设置

但是,不要误会。 虽然 Divi Page Builder是针对初学者的,它的编辑器还可以为经验丰富的开发人员提供便利。 他们可以系统地将其视觉功能与CSS控件结合起来,以推动他们的 Divi WooCommerce 网站更上一层楼。

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

你知道吗?

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

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

同时, Divi的编辑窗口将实时显示您网站的布局更改。 您将能够直观地跟踪每个调整,并查看它如何影响您的整体外观设计 Divi WooCommerce 存储。

预先设计 Divi WooCommerce 网站布局

为了避免您从头开始创建网站这一艰巨的过程, Divi WordPress主题附带了许多预先设计的网站模板。 而且由于您可能需要同一模板的不同布局选项, Divi 提供其网站设计的综合包装。 因此,您将获得不同的模板布局和颜色。

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

divi 网站布局

现在为自己找到一个完美的人 WooCommerce 在线商店,只需滚动浏览各个网站类别即可 Divi 主题。 或者,使用关键字一次搜索所有选项。

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

继续前进,您会注意到的一件特别出色的事情是 Divi 不仅仅关注外观。 这 WooCommerce 随附的布局 Divi 主题的构建也考虑到了功能性。

因此,除了典型的商店页面(例如结帐,产品和购物车)之外, Divi 默认情况下包括电子商务模块。 更具体地说,您会获得诸如特色产品,特价商品等栏目。

Is Divi 适合 WooCommerce?

所有的情况都被考虑到了, Divi 之所以越来越受欢迎,是因为它从根本上说是一个多合一的WordPress主题解决方案。

结合起来 Divi 页面生成器和 Divi 主题 该产品几乎提供了设置任何类型的WordPress网站所需的一切。 其中包括一个功能齐全的 WooCommerce 具有所有核心电子商务功能的商店。

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

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

第1步:注册精美主题即可访问 Divi

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

Divi WordPress主题

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

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

Wordpress新主题

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

Wordpress添加新主题

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

Wordpress主题上传

第4步:设置您的 WooCommerce 商店

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

太棒了 SiteGround 注册已安装 WooCommerce 在您的WordPress网站上,因此您不必担心安装或设置它。 它应该已经在您的仪表板中可用。

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

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

WooCommerce 添加新产品

步骤

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

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

步骤7:探索 WooCommerce 主要功能

如果您向下滚动到说明区域下方,则会找到所有可能的方法 WooCommerce 可以玩的功能。 随意修改诸如SKU编号,库存,价格,运输和属性之类的内容。 这些功能太庞大了,以至于我无法在此处概述所有功能,但您可以转到 WooCommerce 文档页面 了解您可以在电子商务网站上设置的所有内容。

WooCommerce 功能

步骤8:创建主页

这一点的重点是 创建一个主页 或当人们访问您的网站时,包含您所有产品的常规页面。 因此,您应该转到WordPress信息中心左侧的页面>添加新内容。

Wordpress新页面

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

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

页面生成器wordpress

步骤

单击“全宽标题”按钮。

添加标题

步骤

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

标头定制

步骤

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

WordPress woocommerce 格局

步骤

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

调整这些按钮

步骤

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

Wordpress电子商务设置

步骤

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

Wordpress电子商务设置

步骤

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

Wordpress电子商务设置

步骤17:预览和发布

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

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

总结

这就是获得你的所需要的一切 Divi WooCommerce 在线存储并使用 SiteGround 托管帐户。

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

正如我们已经看到的那样, Divi 主题。 您随时可以访问 Divi WooCommerce 从您的WordPress后端进行布局,以进一步对其进行自定义。 如果您愿意,甚至可以更改整个布局来改变整个设计,该布局可以处理 WooCommerce 以及存储。 这是你的选择。

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

Divi
评分: 5.0 - 审查

Catalin Zorzini

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