Elementor如何直观地定制和编辑 WooCommerce 产品页面模板

Elementor 能让你轻松自如地设计单个产品页面。只需通过简单的拖放操作，就可以按照自己的喜好调整页面上的各种元素，实现个性化的设计。过去，想要定制 WooCommerce 的页面设计通常需要编写大量的代码，这对于非专业人士来说是很难的。

但现在，这一切都变得简单了，因为有了 Elementor WooCommerce Builder。无需再为复杂的代码而烦恼，无需合并操作、添加挂钩，也不必深入研究复杂的 PHP 文件。

只需使用 Elementor Pro 的强大功能，就可以完全掌控自己的设计和产品页面布局。所有的定制操作都在前端完成，直接在 Elementor 的页面构建器里就能实现。让设计变得简单又直观。

默认的 WooCommerce 产品模板

基本的 WooCommerce 产品页面如下所示：

使用 Elementor，你可以随心所欲地设计产品页面模板的布局。在本教程中，会告诉你如何创建这种产品页面设计：

因为使用的是 Elementor 的单个产品模板，所以一旦完成模板创建，就可以将其应用于所有产品、特定类别或其他条件。

如何定制 WooCommerce 产品页面

在这次的教程中，我们重点讲的是自定义产品页面，因此我们会跳过基本的 WooCommerce 设置以及如何添加新产品这些步骤。后面，会专门出一期WooCommerce 教程；大家可关注一下我们的更新。

设置完成后，要是已经安装了 WooCommerce插件，并在网站上添加了一些相关产品。还需要安装 Elementor 和 Elementor Pro，获得可视化设计功能。

注意！如果没有激活 WooCommerce，是无法访问 Elementor 的产品模板的，所以要记得激活哦！

第 1 步：创建单一产品模板

第 2 步：选择预先设计的产品页面模板，或从头开始构建一个

最简单的入门方法是使用预先设计好的产品页面模板，然后根据自己的网站进行定制。有多种不同风格的产品页面可供选择。在开始添加小部件之前，可以切换到全宽模板，确保产品页面是全宽的。

使用 Elementor，可以完全自定义控制产品页面的布局和风格。另一种方法是从头开始创建。在编辑面板中，可以看到产品的特殊部件。

第 3 步：添加构成页面的产品小部件

注意！重要的是要插入几个示例产品，包括它们的必填字段–如产品描述、购物车按钮和其他内容，这样就可以在单个产品模板中预览它们。

现在，是时候构建构成产品页面的元素了。在本教程中，只使用以下 Elementor 部件，而无需其他插件：

• 产品标题小部件
• Woo 面包屑小部件
• 产品图片小部件
• 产品评级小部件
• 简短描述小部件
• 产品价格小部件
• 添加到购物车小部件
• 产品元小部件
• 产品数据选项卡
• 产品相关 
• 加售小部件

就像在视频中看到的那样，可以完全自由地调整布局和移动元素。可以使用任何其他小部件，使产品页面更有效、更吸引人。分享按钮、行动号召小部件、特色图片、下拉菜单……甚至还可以使用动态内容功能将自定义字段添加到模板中。

步骤 4：使用其他产品预览产品页面

为确保产品模板设计正确，建议用几个不同的产品进行预览。点击左下角面板上的眼睛图标，然后点击设置。在预览设置下，选择要显示的特定产品。现在，应用并查看它的外观。

第 5 步：设置条件

在这个阶段，可以设置决定产品模板显示位置的条件。默认情况下，模板将影响网站上的所有产品页面。也可以选择特定类别的产品。点击 “发布”单个产品就上线了！

如何将 WooCommerce 产品表与 Elementor 结合使用

自定义产品商店页面

要完成这项任务，需要设计一个产品目录页面，该页面将影响网站上的所有产品或某个类别的产品。首先，回到 Elementor > 我的模板，创建一个产品档案模板。然后，选择一个现有模板，或创建一个。

添加 “存档产品 ”小工具和 “存档标题”，并自定义其设计。为了使其与在单个产品模板上的设计相匹配，要使用页面之间的复制样式功能。回到产品页面，右键单击 “复制”。回到存档产品，右键单击粘贴样式。

在 “存档产品 ”设置中，在 “查询 > 来源 ”下选择 “最新产品”。然后在产品类别下选择戒指。这样，只会出现戒指类别。如果该类别的产品列表较长，请在分页上滑动。在样式选项卡中，你可以设计列和行之间的距离。调整颜色、字体等。

在发布之前，选择条件以确定存档将出现在哪里，这与在单个产品模板中所做的一样。点击 “发布”，存档页面就上线了。

结论

Elementor 的 WooCommerce Builder 提供了设计上的灵活性，可以直观地创建和微调产品页面。这节省了时间，大大缩短了从构思到一个实时的、功能齐全的 WooCommerce 在线商店所需的时间。