创建Elementor WooCommerce产品页面

购物趋势正在迅速变化,人们倾向于在线购物比以往任何时候都多。

这就是为什么他们越来越需要电子商务商店来满足在线购物习惯的原因,因为人们发现在线购物比外出购物更方便。

您也可以使用正确的工具和设置立即启动电子商务商店。 您会注意到在创纪录的时间内您的销售额急剧增加。

如果您计划开设一家电子商务商店并寻找WordPress专家来为您完成工作,那么让我告诉您,您不需要任何东西。

是! 您可以自己做,因为您不需要成为WordPress开发人员或编码专家,而无需具备使用正确工具和设置进行编码的任何知识就可以做到。

只需按照使用Elementor页面构建器创建WooCommerce商店页面的分步教程进行操作即可

让我们更深入地探讨问题吧!

使用Elementor创建产品页面需要什么?

安装 WooCommerceplugin,除此之外,您还需要安装Elementor 页面构建器。 免费版可以从 WordPress.org 下载,但免费版带有有限的自定义选项。 因此,如果您想获得无限的定制选项,而不是选择专业 Elementor 并从官方 Elementor.org 下载。

如何安装Elementor页面构建器?

  • 对于Elementor免费版本:

转到Plugin >添加新>输入Elementor页面构建器>单击安装并激活。

  • 对于Elementor Pro:

从Elementor.com购买Pro版本,然后上传zip文件,然后单击安装并激活。

逐步创建Elementor WooCommerce产品页面

标准的WooCommerce产品页面看起来像任何基本的WooCommerce产品页面一样,没有任何内容。

但是,如果您想添加品牌的声音,则不必进行唯一自定义。

第1步:从“控制台”菜单转到“模板”部分,然后单击“添加新”。

现在,从下拉菜单中选择“单一产品”

最好的部分是,Elementor带有一些预制的产品页面模板,因此,如果您想快速入门,请从看起来最接近所需模板的选项中选择任何一个。

从预制模板创建产品页面比从头开始创建要容易得多。 因此,修改任何现有模板并节省您的时间和精力。

我们已经为我们的产品页面选择了此模板。

选择喜欢的模板后,它将带您到Elementor编辑器,您可以在其中根据自己的喜好自定义模板。

在这里,您可以在左侧菜单上看到不同的块。 拖放您要使用的块。

单击“ +”添加按钮,然后选择要添加的列大小。

我们为产品模板选择了两列大小。

现在,在右列添加产品标题小部件,并在其上添加产品的标题。

添加产品标题后,下一步就是在其上方添加“ Woo面包屑”。

现在,在左侧栏中添加产品图片,然后从左侧栏中拖放产品图片小部件。

您可以将填充添加到两列,以使它们彼此稍微分开。

添加图像并根据所需尺寸调整填充后,在产品标题下添加产品评分小部件。

在产品查看框下方添加产品小部件的简短描述。 您还可以调整两个块之间的空间。

完成产品说明和所有详细信息后,我们的下一步是添加产品的价格,为此,您必须将价格小部件拖放到产品说明下。

在产品说明下方添加价格标签后,您可以通过选择左侧菜单中的选项来自定义价格小部件。 您可以放大图标,将字体样式以及字体颜色从黑色更改为您选择的任何其他颜色。

现在,添加小部件“添加到购物车”,并根据需要从菜单中自定义其颜色,字体或样式。

现在,在价格小部件下添加产品元数据,其中将显示产品类别和产品序列号。

步骤2: 在下一部分中添加有关产品的其他信息。

创建一个新的两列部分,然后添加产品数据标签,包括说明,其他信息和评论。 并在列的右侧添加相关产品部分。

要保持每个列的格式相同,可以单击每个列的左上角,然后复制并粘贴每个列的列格式。

第3步:添加另一部分,添加“追加销售部分”。

添加后,这是您追加销售部分的外观。 添加一些填充以对齐该部分。

最后,您完成了产品页面设计。 现在,最后一步是您要在哪里发布产品? 您可以单击“发布”或转到左侧菜单左下角的“眼睛”部分,然后单击设置以选择产品类别。

单击添加条件菜单,然后选择产品类别,然后单击发布。

移动优化您的WooCommerce产品页面

由于智能手机的流量很大,因此您必须优化商店以查看智能手机,否则可能会失去销售。

尽管WooCommerce已经针对移动设备进行了优化,但是要确保您的产品页面模板在移动屏幕上看起来绝对不错,请按照以下步骤进行操作。

您可以在Elementor界面的左下角找到一个选项Responsive Mode。

单击“移动响应”选项时,可以在“移动”,“桌面”和“选项卡”查看选项之间切换。

如果您发现任何复杂之处,请单击您想要查看的任何选项并对其进行调整。

现在,保存并继续发布您的产品页面。

Elementor Pro定价

免费提供Elementor基本版本,而专业版具有三个许可证。 如果您正在寻找个人博客或单个站点,那么个人许可最适合您,您可以在其中获得WooCommerce构建器以及90多个专业小部件。

加号和专家许可证适用于成长中的企业或代理机构,分别支持3个站点和1000个站点。

包起来

Elementor 页面构建器的唯一目的是让用户在不依赖编码的情况下释放他们的创造力。 Elementor 带有各种小部件,可让您根据有吸引力的布局创建任何类型的产品页面。 WooCommerce 的基本元素超过 10 个,使用户能够自定义商店页面的每个扭结和曲线。 如果您在 Elementor 菜单中找不到所需的元素,请不要担心! 还有许多其他高级设置可以升级您的武器库并将多个元素添加到您的库中。 其中之一是Essential Add-ons ,它带有专门用于 WooCommerce 的元素。

发表评论

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