适用于 Flatsome 主题用户的 WooCommerce 教程和指南

已发表: 2022-09-01

您商店的主题是帮助吸引访客兴趣的最重要元素之一。 当谈到您的 WooCommerce 商店的主题时,有数以千计的选项可供选择。 但是,您需要选择具有高定制能力的多用途主题。 一个这样的 WordPress WooCommerce 主题是 Flatsome。

更多关于 Flatsome 主题

Flatsome 是 ThemeForest 主题存储库中最受欢迎和评价最高的 WordPress WooCommerce 主题之一。 它由 UX Themes 设计和开发。 目标是设计一个易于使用的定制主题,非常适合初学者和非编码人员。

尽管 Flatsome 是一个以 WooCommerce 为重点的多功能主题,但它可以用于构建任何网站。 使用此主题,您可以创建博客网站、个人作品集网站、公司网站等等。

BuiltWith统计数据显示,超过 500K 的实时网站是使用 Flatsome 开发的。 如此受欢迎的原因无非是主题功能的令人敬畏和出色的用户体验。 它快速、轻便、易于使用,并且专为非技术用户设计。

该主题带有设计精美的演示,可快速创建网站。 因此,为您的 WooCommerce 网站商店选择 Flatsome 主题是一个好主意。

WPCred 团队长期以来一直在编写专注于 Flatsome 的教程。 我们已经涵盖了 40 多个关于 Flatsome 各种主题的基本教程。 其中一些完全使用 Flatsome 主题,而另一些则使用第三方插件或工具。 让我们进入 Flatsome WooCommerce 主题的教程。

购买 Flatsome 主题

1. Flatsome 是最好的 WooCommerce 主题吗

flatosme 最佳 woocommerce 主题

Flatsome 是一个多用途的 WooCommerce 主题,受到 200,000 多名网站所有者的信赖。 这是一个令人难以置信的快速主题,具有出色的用户体验。 除此之外,它提供精美的设计,支持任何设备,并引入了独特的功能。

此外,Flatsome 已将其核心 JavaScript 文件减少到 56kb,这使其得到了难以置信的优化。 您可以通过阅读我们对Flatsome 评论的深入分析来了解细节

2. 优质的 WooCommerce 托管

wordpress woocommerce 托管

如果托管在糟糕的服务器上,您的网站将不会变得更快。 它的性能取决于托管的质量。 有数百个 WooCommerce 托管服务提供商可供选择。 为 WooCommerce选择最佳托管将使设置和管理您的商店更加容易。

3. Flatsome主题装置

扁平安装

安装 Flatsome WooCommerce 主题非常简单。 访问 ThemeForest 并购买 Flatsome 主题(如果您尚未购买)。 之后,下载文件并将其上传到您的 WordPress 仪表板。 然后使用许可证密钥安装并激活它。 访问链接的如何在 WordPress 中安装 Flatsome,就像官方的 Flatsome 演示一样

4. 创建子主题

扁平的儿童主题

使用子主题,您可以修改网站的外观,而无需直接编辑主题文件。 这意味着您可以知道如何更新 WordPress 主题而不会丢失任何自定义 当您第一次激活 Flatsome 主题时,会有一个创建子主题的选项,您还可以知道如何在 WordPress 上轻松创建 Flatsome 子主题,并使用它来创建新的子主题。

5. 父主题定制器设置到子主题

父主题定制器

在 Flatsome 中使用子主题时,您可能需要将自定义器设置从父主题复制到子主题 这是一个简单的过程,需要几个步骤。 WordPress 将您孩子的主题视为一个新主题。 因此,如果不这样做,您可能会在切换到子主题时失去父主题自定义。

6. 使用 Flatsome 创建一个单页网站

一页网站用户体验构建器

正如我们所讨论的,Flatsome 是一个多用途主题,您可以使用它在几乎任何利基市场创建在线商店。 如今,出于多种原因,单页网站正在流行。 Flatsome 还提供了一个名为“Flatsome Studio”的特殊功能,以帮助您了解如何免费创建单页网站。

7.使用Flatsome Studio创建网上商店

平淡无奇的工作室

Flatsome Studio 是一个包含图像、预先设计的部分和布局的免费数字图书馆。 您只需单击几下即可轻松导入和使用它。 导入新元素,您可以使用 WordPress 上的 Flatsome 工作室并从 100 多个元素中进行选择。

8. 上传您的徽标

将徽标上传到 flatsome 主题

徽标是您品牌标识的基础。 但是一旦主题被激活,默认情况下你会在你的网站上看到 Flatsome 的标志。 但是,您可以轻松地在 WooCommerce 网站上展示您的公司品牌并上传 Flatsome 徽标

9. 在 Flatsome 中创建超级菜单

超级菜单

选择标志后,是时候设置菜单了。 您的网站访问者总是希望能够轻松访问您商店中的每个页面。 您需要帮助他们快速找到他们想要的东西,这就是您可能需要大型菜单的原因。 您可以通过几个步骤创建一个 Flatsome 大型菜单

10.添加视频背景

添加视频背景

您只有几秒钟的时间来吸引访问者的注意力。 移动的背景可以立即吸引您的访客。 Flatsome 有一个内置功能,允许您在 Flatsome 视频横幅中为 WordPress 添加视频背景

11.在商店页面上启用无限滚动

无限滚动 Flatsome

无限滚动确保您可以随心所欲地滚动。 只需向下滚动即可更轻松地浏览更多产品。 因此,在 Flatsome 商店页面上为 WordPress 添加无限滚动可为您的在线商店带来更多优化 WooCommerce 分页的机会。

12. 将 Lightbox 添加到 Flatsome

灯箱弹出

灯箱通常包含号召性用语 (CTA),要求访问者采取行动。 由于几个原因,它对网站所有者和营销人员非常有效。 灯箱简码可让您通过单击按钮或导航项来打开灯箱内的任何内容。 将 Flatsome 灯箱弹出窗口添加到 WordPress的步骤很简单。

13. 创建自动时事通讯弹出窗口

时事通讯弹出Flatsome

弹出窗口是与访客交流的好方法。 您可以使用它与更多访问者建立联系,并使他们成为您的潜在客户。 此外,它可以帮助您进行电子邮件营销活动并增加您网站的注册用户。 Flatsome 具有创建自动时事通讯灯箱注册弹出窗口的功能,您可以按照一些简单的步骤学习如何创建 Flatsome 时事通讯弹出窗口 它将突出您的促销活动并为您的时事通讯吸引更多订阅者。

14.设置特色产品

设置特色产品 Flatsome

特色产品可帮助您的访问者查看您的 WooCommerce 商店中最吸引人的产品。 使用它,您可以向客户展示您的特殊产品。 这些可以是您的趋势或流行产品、新产品或您想要展示的一些赞助产品。 有多种方法可以在 Flatsome WooCommerce 主题中设置特色产品您可以从本文中了解如何在 WooCommerce 中设置特色产品。

15. 为特定产品申请免费送货

免费送货 woocommerce

WooCommerce 店主采用不同的策略来提高销售额。 其中,免费送货是吸引客户的常用策略。 Flatsome 提供为特定产品设置 WooCommerce 免费送货 您可以为单个产品、基于特定类别的产品或任何其他类型的产品添加免费送货。

16.正确设置愿望清单

设置愿望清单

通常,人们会在电子商务网站上花费大量时间。 在长时间访问网站时,丢失他们决定购买的产品是很常见的。 这就是为什么愿望清单对您的电子商务网站至关重要的原因。 它确保您的客户可以保存产品以供以后购买。 在 Flatsome创建愿望清单很容易实现。 您可以将其添加到您的网站而无需进行任何编码。

17. 创建自定义 404 错误页面

定制 404 flatsome

网络上最常见的错误之一是 404 错误页面。 这让您的访客感到沮丧和困惑。 像这样的页面不清晰,不能帮助用户留在网站上。 您当然不希望访问者登陆通用错误页面。 如果您的访问者有机会遇到这种情况,请不要担心,Flatsome 有一些内置的 WordPress 自定义 404错误页面 您可以从列表中选择一个,让访问者知道他们仍在您的网站上。

18.添加客户推荐

客户见证

建立购物者信任的有效方法是添加客户推荐。 最常见的是满意的客户留下的正面评价。 有许多不同的方法可以将客户推荐添加到 Flatsome 推荐主题中,您可以轻松地自行设计推荐 您会在 Flatsome 主题上找到一些预定义的推荐页面供您选择。

19. 使用 UX Builder 创建商店页面标题

店铺页眉

无论您销售哪种产品,您的 WooCommerce 商店页面都是您商店的重要组成部分。 Flatsome 允许您使用 UX 构建器添加网页标题设计,以使您的 Flatsome 商店页面更加有用和有吸引力。

20. 使用 UX Builder 创建一个滑块

创建滑块

滑块可以帮助您以装饰性和用户友好的方式展示您的产品。 结果,您的访问者将有更好的印象。 这个主题使得使用 UX Builder 为 WordPress 创建 Flatsome 滑块变得很容易

21. 自定义 WooCommerce 产品页面

自定义产品页面

您的出色产品值得拥有独特的定制 WooCommerce 产品页面。 您需要能够自定义产品页面 WooCommerce以使您的电子商务商店脱颖而出。 Flatsome UX builder 为您提供了设计灵活性,可以直观地创建和自定义您的自定义产品页面。

22. 快速获取谷歌附加链接

谷歌附加链接

Google 附加链接是出现在第一个搜索结果下的子列表,通常在搜索品牌时。 附加链接可以节省时间并为搜索者提供相关结果。 您可以按照一些流程来增加获得站点链接的机会 您可以通过一些简单的步骤了解如何获取 google 附加链接。

23. 设置和安装谷歌标签管理器

谷歌标签管理器

Google 跟踪代码管理器允许营销人员和网站管理员在一处部署网站代码,从而使代码管理变得轻松、简单和可靠。 如果您想知道如何设置和安装 Google 标签管理器 WordPress,可以查看我们的教程

24.添加谷歌搜索控制台

谷歌搜索控制台

Google Search Console,以前称为网站管理员工具,可帮助您优化数据以监控网站在搜索中的性能。 Search Console优势使其成为提高搜索性能不可或缺的工具。 在 Flatsome 支持的网站上设置 Google Search Console只需几分钟,但会给您带来终生的好处。 您可以知道如何添加 Google 搜索控制台洞察 WordPress

25. 添加谷歌分析来跟踪商店流量

Google Analytics 是 Google 提供的免费工具,用于跟踪和分析您的网站访问者。 此外,它还提供了有关您可以做些什么来实现您的目标以及您的网站的表现如何的关键见解。 如果您已经知道重要性,这里是如何使用 WordPress 添加谷歌分析的简要说明 在您的 Flatsome WooCommerce 主题上。

26. 将 Google Recaptcha 添加到联系表 7

谷歌回顾

Contact Form 7 插件对于任何 WordPress 驱动的网站都是必不可少的。 如果您在您的网站上使用它,您可能会开始通过您的表单收到垃圾邮件。 为防止您的收件箱包含不必要的内容,您需要在联系表格 7 中添加 Recaptcha

27. 添加 Facebook 开放图元数据

脸书开放元数据

Facebook 开放图元数据可让您控制内容在 Facebook 上共享时的外观。 它从内容中获取元数据,并让您选择显示内容的方式。 您可以按照手动方法或插件将开放图形元数据添加到您的 Flatsome 网站。

28. 创建可变产品

创建可变产品woocommerce

WooCommerce 中的变量允许您从多个选项中进行选择。 它可以很容易地定义为具有多种颜色、样式、尺寸等的产品。 在 Flatsome主题中添加 WooCommerce 可变产品很简单。

29.添加多个变化图像和视频

变化图像和视频

产品的多个图像使购物者更容易选择产品。 但是,默认情况下,WooCommerce 只允许您为每个产品变体添加一个图像。 但是, WooCommerce 插件的附加变化图像库可让您从不同的角度或角度展示您的产品。 此外,您可以将视频添加到您的 WooCommerce 产品图片库。

30. 在商店/存档页面上显示变化样本

变化样本

默认情况下,WooCommerce 提供变体产品的下拉菜单。 但它需要更多的点击才能查看,并且不会给访问者带来无缝的体验。 WooCommerce Variation Swatches插件将默认产品下拉列表转换为漂亮的色板。

添加 WooCommerce 色板是为您的产品带来更多活力的最佳方式之一。 另一方面,WooCommerce 产品属性提供了一种显示变化的愉快方式。

或者,您可能希望为不同的目的自定义单选按钮样本 与选择下拉菜单相比,单选按钮对客户更友好。

31. 使用 Loco Translate 插件翻译 Flatsome

翻译平淡的主题

由于您的网站不可翻译,因此您每天都会损失大量网站流量。 如果您的 Flatsome 主题网站需要多语言,您可以使用 Loco Translate插件轻松翻译,并且您可以知道如何使用此插件将网站翻译成英语或任何其他语言。

32. 在 Flatsome 中禁用评论

禁用产品评论

在大多数情况下,不建议禁用 WooCommerce 评论。 但是,出于某些原因,您可以考虑禁用产品评论 有时,店主很难跟上产品评论部分的垃圾邮件。

33. 将用户添加到支持团队

将用户添加到支持团队

WordPress 有一个内置的用户管理系统。 您可能有一个团队一起工作来管理您网站的各个方面,例如技术支持、内容编写者、SEO 专家等等。 该平台使您可以立即添加新用户并提供各种角色和权限。 您可以从此处获取有关如何将用户添加到 WordPress 的文章。

34.添加自己的个人菜单标签

添加个人菜单标签

菜单是轻松浏览您的网站的一般方式。 许多 WordPress 主题都带有预定义的菜单位置和布局。 幸运的是,Flatsome 带有一个非常干净的预制菜单标签来吸引游客。 此外,您还可以创建自己的个人菜单标签

35. 在页脚添加支付图标

付款图标平坦

Maximum Flatsome 支持的网站是基于 WooCommerce 的。 在从在线商店购买产品之前,客户希望知道他们将如何购买该产品。 因此,支持支付图标是必不可少的。 通过在页脚中显示付款图标让您的客户了解它

36.禁用产品快速查看

禁用快速查看 Flatsome

产品快速浏览让购物者可以“快速浏览”您的产品。 Flatsome 主题带有此功能。 但是,如果您出于任何原因想要禁用快速查看 WooCommerce ,您可以快速完成。

37.创建一个“滚动到”链接

滚动到链接

您可以通过启用滚动链接元素来帮助您的网站访问者移动到特定页面部分它可以节省他们宝贵的时间并帮助他们轻松导航。

38.使用自定义图标

自定义图标

您可能想知道为什么要向您的网站添加自定义图标。 答案很简单; 为了“更好的视觉表现”。 尽管 Flatsome 有一些吸引人的图标,但您可能仍希望在您的网站上使用自定义图标,并且您可以轻松地自行自定义图标。

39.折叠/展开侧边栏产品类别列表

扩展侧边栏类别

侧边栏产品类别列表对于任何在线商店都至关重要。 在 Flatsome 支持的 WooCommerce 网站中,您可以在 WooCommerce 折叠类别列表中折叠/展开侧边栏菜单,以便访问者轻松浏览您的网站。

40. 使用 Gmail API 设置 WordPress SMTP 服务器

Gmail Api 扁平化

WordPress 使用 PHP 邮件功能发送电子邮件通知。 但是,由于多种原因,此功能无法按预期工作。 Gmail 提供了一种 SMTP 服务,您可以使用它来发送电子邮件。 为此,您需要使用 Gmail 集成设置 SMTP 服务器

41.创建一个简单的尺寸指南弹出窗口

尺码表平坦

如果购物者难以找到适合他们需求的产品,他们可能会离开您的商店并转向竞争对手。 最好在您的在线商店中显示一个简单的尺码指南弹出窗口,您可以学习如何创建尺码表。 没有它,您的客户会对他们需要的合适尺寸感到困惑。 如果您的产品以尺寸为导向,例如衣服、鞋子等,这是必须的。

42. 清除 Instagram 元素缓存

清除Instagram元素

缓存是临时数据,可帮助您的浏览器更快地加载内容。 有时,此缓存数据可能会过期或损坏,并导致使用 Instagram 出现问题。 最佳做法是清除 Instagram 元素缓存数据。 如果您不知道如何清理 Instagram 缓存,那么您可以从这里很好地学习。

43. 加速你的 WooCommerce 商店
加速 WooCommerce 商店

希望在这个阶段,您可以使用 Flatsome 主题创建您的在线商店,但您可能会遇到速度优化问题。 您的网站加载速度越快,购物体验就越好。 以下是一些提示,可通过 WordPress 速度优化的最佳实践使您的 WooCommerce 网站加载更快

包起来

我们希望本指南对使用 Flatsome WooCommerce 主题的任何人都有帮助。 它将帮助您改进您的网站,吸引更多的网站访问者,同时增加您的销售额。

如果您希望我们涵盖更多关于 Flatsome 的主题,请在评论部分告诉我们。 我们将不断更新这篇文章,为您的 WooCommerce 商店提供更好的解决方案。