创建具有Flatsome主题的自定义WooCommerce产品页面

Flatesome主题

Flatsome是一个强大的 WordPress 主题,专为电子商务网站设计,并带有 WooCommerce 集成。

它是 ThemeForest 上最受欢迎的 WooCommerce 主题之一。 在撰写本教程时,它的销量已超过 174.500,并获得了来自 6,600 多条评论的 4.8 星评级。

Flatsome 主要是为初学者和不精通技术的用户设计的。

这对于想要开始在线业务但不知道如何编码或没有预算聘请专业编码员的人来说非常有用。 使用 Flatsome,您将能够使用简单直观的工具创建具有专业外观的网站。

现在,Flatsome 配备了大量出色的特性和功能。 为了展示可用的内容及其工作原理,我们提供了一个快速教程,向您展示如何使用 Flatsome 创建 WooCommerce 产品页面。

所以,事不宜迟,让我们开始吧:

表中的内容:

Flatsome,WooCommerce和WordPress之间的区别

在欢迎新读者的同时,我们必须提供一些必要的信息,以确保我们所有的读者都在同一页面上。 在这里,我们将讨论在本文中将使用的所有三种术语的差异。

让我们从WordPress开始。 它是一个平台,您可以在其中安装不同的主题和plugin来创建您的网站。 有成千上万的plugin和主题可用于根据您的要求完成其他任务。

WooCommerce是一个plugin我们安装WordPress的,允许你不同的功能添加到我们的网站。

Flatsome是一个主题,可让我们根据自己的需求自定义网站的观点。 Flatsome可以为您提供。

使用 Flatsome 主题创建 WooCommerce 产品页面

由于我们所有的读者都对WordPress,WoCommerce和Flatsome有所了解,所以现在该是我们使用Flatsome主题附带的出色UX构建器进行产品页面自定义的时候了。 它具有拖放功能,使设计人员的工作变得极为轻松。

几乎每个人都在网上购物,这可能是因为过去几个月我们面临着充满挑战的时期。 对我们所有人来说,呆在家里是最安全的解决方案。 这就是所有读者都会同意在线商店比标准网站要复杂得多的事实的原因。

WooCommerce将在那里帮助您选择其构建器。

使用 WooCommerce 和Flatsome ,您将能够赋予您拥有在线商店全新生活的想法。 您的网站必须具有现代美观的外观,才能吸引客户。 因此, Flatsome是解决您所有问题的最佳解决方案,所以从这里并开始吧。

Flatsome 有一些很棒的功能,但其中之一是它已成为超过 300,000 名用户的首选。 一个终极工具有助于创建一些巨大的响应式网站,而无需编写一行代码。 此外,它创建一些极具创意和独特的在线商店的能力使其更有价值。

因此,在不浪费更多时间的情况下,让我们继续本教程。 本教程将引导您完成设计产品页面的完整过程。 这些图片将帮助您更好地了解任务将如何进行。

步骤 1:选择产品页面的布局

首先,我们将从选择产品页面的布局开始。 此选择将为我们的在线商店创建一个基本页面,稍后我们将根据需要对其进行自定义。 本分步指南将引导您完成自定义页面的过程。

对于这个前amp文件,我们将与传统店铺选项继续。 但是,您不受任何限制。 对于您选择的每个布局,自定义过程都将相似。 唯一的不同是页面的基本结构将彼此不同。

转到产品定制程序,我们给它命名为“左侧全高”。

有两个选项可用于定制产品页面。 第一个是使用UX构建器完成的,而另一个是手动构建页面。 如果选择第二个选项,则必须前往官方文档并找到简码。 如果您是初学者,并且这是您第一次建立在线商店,那么我建议您选择第一个选择。

(可选)第 2 步:手动创建产品页面

这是Flatsome官方文档页面的屏幕截图。 您可以输入单词shortcodes并搜索它们。

点击搜索后,屏幕上会显示一个短代码列表。 您可以选择对于产品页面重要的简码。 使用简码需要较少的精力,但是您必须对WordPress和使用简码有一点动手经验。

这是可在网站上创建页面的短代码列表。

在这前amp文件,我们将定制全高度左侧栏布局; 因此,我们将复制设计代码。 以下是应用程序的图片,但是您可以轻松地从结构中复制它。

首先创建一个带有标题的块。 如果要开发头部,则需要单击仪表板中 UX 块下可用的“添加新”。

您可以根据需要命名块。 在这里,在这个前amp嘞,我们有一个名为工会为“全高左侧栏的布局。” 接下来,您可以在块编辑器中看到短代码。 完成复制所需的短代码后,您可以点击发布。

在这一小步骤之后,我们将达到同等水平,在此我们可以根据需要自定义页面。 现在,导航到产品页面主题选项,然后单击自定义布局图标。

完成后,您现在可以从“自定义产品布局”下拉列表中创建模块。

选择我们刚刚创建的块。 我们创建该块的主要目标是从中创建一个产品页面。 根据这一前amp文件,全高度左侧栏布局块,而在你的结束,这将是你命名。

完成后,只需点击发布按钮; 它将保存设置。

第 3 步:自定义产品页面

是时候开始定制了。 首先,我们将从前面步骤中设置的前端导航现有产品页面。

选择我们需要设置的特定产品很重要。 您应该具有完整的细节,我们需要自定义的工作图像。 这样,过程将变得更加轻松以可视化您将创建的页面部分。

UX构建器选项可见。

打开UX构建器后,您可以从图像中看到产品页面元素在产品页面的左侧面板中可用。

左侧面板是我们最初创建的块。 我们借助文档中的短代码创建了它。

您可以选择从左侧面板重新排列元素的顺序,也可以通过元素选项更改设置。 在这前amp文件,我们将重新排序左侧菜单中的价格。

此外,它还允许您重新排列构建器预览中的元素,并在构建器产品页面上放置其他组件。 在此演示中,产品选项卡部分和相关产品已通过简单的拖放重新排列。

有了强大的拖放功能,Flatsome随时可以为您提供您在网站上想要的东西。 使用高度可定制的模块,您可以轻松创建一些奇妙的页面。 拖放功能使生活更加舒适。

包起来

Flatsome无疑是我遇到的最好的主题。

发表评论

您的电子邮件地址不会被公开。 必填字段已标记为*