扁平化主题
Flatsome是一款功能强大的 WordPress 主题，专为电子商务网站设计，并与 WooCommerce 集成。
它是 ThemeForest 上最受欢迎的 WooCommerce 主题之一。 截至撰写本教程时，该产品的销量已超过 174,500 份，并且获得了来自 6,600 多条评论的 4.8 星评级。
Flatsome 的设计主要考虑的是初学者和不懂技术的用户。
对于想要开始在线业务但不知道如何编码或有预算聘请专业编码员的人来说，这非常有用。 借助 Flatsome，您将能够使用简单直观的工具创建具有专业外观的网站。
现在，Flatsome 拥有大量令人惊叹的特性和功能。 为了展示可用功能及其工作原理，我们提供了一个快速教程，向您展示如何使用 Flatsome 创建 WooCommerce 产品页面。
那么，事不宜迟，让我们开始吧：
目录：
- 扁平化主题
- Flatsome、WooCommerce 和 WordPress 之间的区别
- 使用 Flatsome 主题创建 WooCommerce 产品页面
- 第 1 步：选择产品页面的布局
- （可选）第2步：手动创建产品页面
- 第 3 步：自定义产品页面
- 包起来
Flatsome、WooCommerce 和 WordPress 之间的区别
当我们欢迎新读者时，我们必须输入一些必要的信息，以确保所有读者都在同一页面上。 在这里，我们将讨论本文中将使用的所有三个术语的差异。
让我们从 WordPress 开始。 它是一个安装不同主题和plugin来创建网站的平台。 有数以千计的plugin和主题可用于根据您的要求完成其他任务。
WooCommerce 是我们安装在 WordPress 上的一个plugin，允许您向我们的网站添加不同的功能。 通过安装此plugin，我们可以使我们的网站和在线商店具有额外的功能，例如购物车、支付处理、产品管理等。
最后，但可以肯定的是，最关键的因素之一是我们网站的前景。 Flatsome 主题允许我们根据自己的愿望定制网站的视角。 例如，如果您的公司徽标是橙色，您可能希望反映在您网站的颜色上。 这就是 Flatsome 可以为您提供的。
使用 Flatsome 主题创建 WooCommerce 产品页面
由于我们所有的读者都了解 WordPress、WoCommerce 和 Flatsome，因此我们是时候使用 Flatsome 主题附带的出色的 UX 构建器来进行产品页面的定制了。 它的拖放功能使设计人员的工作变得极其轻松。
几乎每个人都在网上购物，可能是因为过去几个月我们面临的充满挑战的时期。 对我们所有人来说，呆在家里是最安全的解决方案。 这就是为什么我们所有的读者都会同意这样一个事实：与标准网站相比，在线商店要复杂得多。
然而，在 WooCommerce 和 Flatsome 的帮助下，这项任务变得异常简单。 您需要坐下来计划您的网站的外观，仅此而已。 WooCommerce 将帮助您使用其构建器选项。 您可以通过拖放在短短几分钟内创建一个功能齐全的在线商店。
借助 WooCommerce 和Flatsome ，您将能够为您的在线商店想法注入全新的活力。 您的网站必须具有现代且美观的外观，才能吸引客户。 因此， Flatsome是解决您所有问题的最佳解决方案，因此从这里并开始吧。
Flatsome 拥有一些出色的功能，但其中之一是它已成为超过 30 万用户的首选。 终极工具可以帮助创建一些出色的响应式网站，而无需编写任何代码。 此外，它能够创建一些极具创意和独特的在线商店，使其更有价值。
因此，不再浪费任何时间，让我们继续学习教程。 本教程将带您完成设计产品页面的完整过程。 这些图片将帮助您更好地了解任务将如何完成整个过程。
第 1 步：选择产品页面的布局
首先，我们将从选择产品页面的布局开始。 此选择将为我们的在线商店创建一个基本页面，稍后我们将根据我们的需求对其进行自定义。 本分步指南将引导您完成自定义页面的过程。
对于本amp，我们将继续使用经典商店选项。 但是，对您没有任何限制。 对于您选择的每个布局，定制过程都是相似的。 唯一的区别是页面的基本结构与其他页面不同。
继续进行产品定制器，我们将其命名为全高左侧边栏。
有两个选项可用于自定义产品页面。 第一个是使用 UX 构建器完成，另一个是手动构建页面。 如果您选择第二个选项，您将必须前往官方文档并找到短代码。 如果您是初学者，并且这是您第一次建立在线商店，我建议您选择第一个选项。
（可选）第2步：手动创建产品页面
这是 Flatsome 官方文档页面的截图。 您可以输入短代码一词并搜索它们。
点击搜索后，屏幕上会显示一个简码列表。 您可以选择对产品页面重要的短代码。 使用短代码需要较少的精力，但您必须有一点 WordPress 和使用短代码的实践经验。
以下是您可以在网站上用于创建页面的短代码列表。
在此amp中，我们将自定义全高左侧边栏布局； 因此，我们将复制设计代码。 以下是应用的图片，但您可以轻松地从结构中复制它。
首先创建一个带有标题的块。 如果你想开发头部，你需要点击仪表板中用户体验块下的“添加新”。
您可以根据自己的需要命名该块。 在此amp中，我们将联合命名为“全高左侧边栏布局”。 接下来，您可以在块编辑器中看到短代码。 完成复制所需的短代码后，您可以点击发布。
在这一小步之后，我们将达到标准，我们可以根据我们的愿望定制我们的页面。 现在导航到产品页面主题选项并点击自定义布局图标。
完成后，您现在可以从“自定义产品布局”下拉列表中创建块。
选择我们刚刚创建的块。 我们创建该块的主要目标是从中创建一个产品页面。 根据此amp，全高左侧边栏布局是块，而在您的最后，它将如您所命名。
完成后，只需点击“发布”按钮即可； 它将保存设置。
第 3 步：自定义产品页面
我们是时候开始定制了。 首先，我们将从我们之前在步骤中设置的前端导航现有产品页面。
选择我们需要设置的特定产品非常重要。 您应该拥有我们需要定制的作品的完整详细信息和图像。 这样，该过程就可以更轻松地可视化您将创建的页面部分。
UX 构建器选项可见。 只需点击按钮即可开始定制。
打开 UX 构建器后，您可以从图像中看到产品页面元素在产品页面的左侧面板中可用。
左侧面板是我们最初创建的块。 我们借助文档中的短代码创建了它。
您可以选择从左侧面板对元素重新排序，并从元素选项更改设置。 在此amp中，我们将重新排序左侧菜单中的可用价格。
此外，它还允许您重新排列构建器预览中的元素，并在构建器产品页面上添加其他组件。 在此演示中，只需简单的拖放即可重新排列“产品”选项卡部分和“相关产品”。
凭借重要的拖放功能，Flatsome 已准备好为您提供您在网站上寻找的内容。 通过高度可定制的模块，您可以轻松创建一些精彩的页面。 拖放功能使生活更加舒适。
包起来
在当今时代，开展在线业务势在必行，因为人们更喜欢呆在家里以确保安全。 因此，开始使用 Flatsome 建立您的第一个在线商店，并以其独特性和创造力让您的客户着迷。 而且，内容编辑器中没有乱七八糟的代码，只有几行短代码。 Flatsome无疑是我遇到过的最好的主题。 因此，无需四处寻找任何其他主题，只需点击下载按钮即可立即开始构建您的定制在线商店。
