购物趋势变化迅速，人们比以往任何时候都更倾向于网上购物。.
这就是为什么他们对电子商务商店的需求不断增长，以满足人们的网上购物习惯，因为人们发现网上购物比出门购物更方便。.
您也可以立即使用合适的工具和设置来启动您的电子商务商店。您会在很短的时间内看到销售额的显著增长。.
如果你计划开办一家电子商务商店，并且正在寻找 WordPress 专家来帮你完成这项工作，那么让我告诉你，你根本不需要任何专家。.
是的！您可以自己动手，因为您不需要成为 WordPress 开发人员或编码专家，而且只要拥有合适的工具和设置，即使没有任何编码知识也可以完成。.
只需按照分步教程，使用Elementor 页面构建器创建 WooCommerce 商店页面即可。
让我们深入挖掘，直奔主题！
- 使用 Elementor 创建产品页面需要哪些工具？
- 如何安装 Elementor 页面构建器？
- 逐步创建 Elementor WooCommerce 产品页面
- 优化您的 WoCommerce 产品页面，使其移动端体验更佳
- Elementor Pro 定价
- 总结
使用 Elementor 创建产品页面需要哪些工具？
安装 WooCommerceplugin到您的 WordPress 网站，此外，您还需要安装Elementor 页面构建器。您可以从 WordPress.org 下载免费版 Elementor，但免费版提供的自定义选项有限。因此，如果您需要无限的自定义选项，请选择 Elementor 专业版，并从 Elementor.org 官方网站下载。
如何安装 Elementor 页面构建器？
- Elementor 免费版适用：
转到 Plugin> 添加新插件 > 输入 Elementor 页面构建器 > 点击安装并激活。.
- 适用于 Elementor Pro：
从 Elementor.com 购买专业版，然后上传 zip 文件，再点击安装和激活。.
逐步创建 Elementor WooCommerce 产品页面
标准的 WooCommerce 产品页面看起来就像任何一个普通的 WooCommerce 产品页面，没有任何亮点。.
但是，如果你想融入自己品牌的特色，那么就必须进行独特的定制。.
步骤1：从仪表盘菜单进入模板部分，然后点击“添加新模板”。.
现在从下拉菜单中选择“单个产品”选项。
最棒的是，Elementor 自带一些预制的产品页面模板，所以，如果你想快速上手，可以从选项中选择最接近你想要的模板。.
使用预制模板创建产品页面比从零开始创建要容易得多。因此，修改现有模板可以节省您的时间和精力。.
我们已选择此模板作为我们的产品页面模板。.
选择好你喜欢的模板后，它会引导你进入 Elementor 编辑器，你可以在那里根据自己的喜好自定义模板。.
您可以在左侧菜单中看到不同的模块。拖放您想要使用的模块即可。.
点击“+”添加按钮，然后选择要添加的列大小。.
我们为产品模板选择了两种列宽。.
现在，在右侧栏添加一个产品标题小部件，并在其中添加您的产品标题。.
添加完产品标题后，下一步是在其上方添加“Woo面包屑导航”。.
现在，在左侧栏中添加产品图片，并将产品图片小部件从左侧栏拖放到此处。.
您可以给两列都添加内边距，使它们彼此之间略微分开。.
添加图片并根据所需尺寸调整边距后，在产品标题下方添加产品评分小部件。.
在产品评论模块下方添加产品组件的简要描述。您还可以调整这两个模块之间的间距。.
完成产品描述和所有详细信息后，下一步是添加产品价格，为此，您需要将价格小部件拖放到产品描述下方。.
在产品描述下方添加价格标签后，您可以从左侧菜单中选择选项自定义价格组件。您可以放大图标、更改字体样式，还可以将字体颜色从黑色更改为您选择的任何其他颜色。.
现在添加“添加到购物车”小部件，您还可以根据需要从菜单中自定义其颜色、字体或样式。.
现在，在价格小部件下添加产品元数据，以显示产品类别和产品序列号。.
步骤 2： 在下一部分添加有关产品的更多信息。
创建一个新的两列版块，然后添加“产品数据”选项卡，包括描述、附加信息和评价。在列的右侧添加“相关产品”版块。.
为了保持每列格式一致，您可以点击每列的左上角，复制并粘贴每列的格式。.
步骤 3：添加另一个“追加销售”部分。
这是添加追加销售部分后的效果图。添加一些内边距以使该部分对齐。.
最后，您的产品页面设计就完成了。现在，最后一步是选择您要将产品发布到哪里？您可以点击“发布”，或者前往左侧菜单最下角的眼睛图标，点击“设置”选择产品类别。.
点击添加条件菜单，然后选择您的产品类别，并点击发布。.
优化您的 WoCommerce 产品页面，使其移动端体验更佳
由于很多流量将来自智能手机，因此您必须针对智能手机浏览优化您的商店，否则您可能会损失销售额。.
虽然 WooCommerce 已经针对移动设备进行了优化，但为了确保您的产品页面模板在移动屏幕上看起来完全美观，请按照以下步骤操作。.
在 Elementor 界面的左下角，您会找到“响应式模式”选项。.
点击“移动响应式”选项后，您可以在移动端、桌面端和标签页查看选项之间切换。.
点击您喜欢的任何选项即可查看和调整设计，如果发现任何问题，都可以进行调整。.
现在，保存并继续发布您的产品页面。.
Elementor Pro 定价
Elementor基础版免费提供，专业版则包含三个授权。如果您正在寻找个人博客或单个网站，那么个人版授权最适合您，它包含WooCommerce构建器以及90多个专业小部件。
Plus 和 Expert 许可证分别适用于支持 3 个站点和 1000 个站点的成熟企业或机构。.
总结
Elementor 页面构建器的唯一目的就是让用户无需编写代码即可尽情发挥创意。Elementor 内置多种组件，可让您根据精美的布局创建各种产品页面。它包含 10 多个基础 WooCommerce 元素，使用户能够自定义商店页面的每一个细节。如果您在 Elementor 菜单中找不到所需的元素，也无需担心！还有许多其他高级设置可以扩展您的功能，并向您的元素库添加更多元素。其中之一是Essential Add-ons ，它提供了专为 WooCommerce 设计的元素。
