WooCommerce产品详情页不仅是展示商品的窗口，更是影响顾客决策的关键环节。一个一眼让人觉得专业、出色的产品页面，不仅能抓住顾客的注意力，还能提升流量转化率。
然而，WooCommerce给我们提供预设的产品页面设计往往有比较大的提升空间，而如果我们想要去做界面样式修改，往往需要复杂的开发技能，这让许多商家感到头疼。
而Elementor的出现，为WooCommerce用户带来了全新的解决方案。通过简单的拖拽操作，你就能自由设计产品页面，轻松调整布局和样式，无需写任何代码。
接下来在这篇Elementor教学中，我们将一步步解析如何使用Elementor，为你的网站创建一个个性化、用户友好、高转化的产品详情页。
在开始本教程之前，你需要安装并激活Elementor Pro。
1. 使用Elementor创建Single Product模板
我们可以在Templates > Add New > 选择Single Product模板，给要创建的Single Product模板命名，然后点击”Create Template”。
然后Elementor会带我们进入到产品模板的编辑页面，此处可以让我们选择模板。
我们可以选择导入模板，或者关闭模板选择页面自行搭建。
这里面有些内容我们可以右键删除或者替换。比如价格可以删掉、加入购物车换成普通的“联系我们”按钮，点击该按钮后跳转到询盘联系表单页面。
我们也可以根据自己的需要来进行细微调整，这是调整后的产品详情页的界面：
这里使用的小部件有：
- Product Images
- Product Title
- Short Description
- Button
这里没有使用Product Content小部件，因为这个小部件我们需要在第4步产品详情个性化中去使用。
我们可以添加其他的内容，比如：产品参数、类似产品、追加销售（Up-sell）、通用FAQ等一切客户会关心的内容。
这些相关的内容可以通过从左侧的选项卡中添加自己需要的小部件来实现。
2. 展示产品参数
我们在上一步搭建了产品详情的模板。我们希望产品中展示产品主图（Product Images）、产品名（Product Title）、产品描述（Short Description）联系我们按钮（Button）等。
我们的B端产品如果要展示产品参数，那么可以使用Additional Information或者Product Data Tab这两个小部件来展示这块的内容:
- 将上述两个小部件中的任意一个这个小部件添加到产品详情页模板中。Additional Information小部件可以展示产品Attributes里面的属性。Product Data Tab则可以展示Product Description、Attributes、以及Review这三部分的内容，可以根据自己的需要来选择。
- 进入到具体的产品编辑后台，找到Attribute这个选项，添加我们想要的产品属性。
设置完成以后我们回到单个产品的前端展示页面，可以看到产品的属性已经展现出来了。
我们使用了上面说的两个小部件后，应用了该模板的每个产品都会展示它们对应的产品属性。
这是Additional Information小部件的展示形式：
这是Product Data Tab小部件的展示形式：
当然，这两个小部件给我们提供的样式设置比较少，如果我们对这边的样式不满意，那么我们可以：
- 添加自定义CSS优化界面，需要前端HTML和CSS知识
- 使用表格插件（比如TablePress）来优化这部分的信息展示形式。我们将在下面第四个章节（产品详情个性化）中讲解，需要用到Post Content小部件。
这两个方法都能够优化产品属性的展示形式。但区别是添加自定义CSS是所有应用了该模板的产品都能生效的；而在Post Content小部件中添加表格只针对单个产品详情页有效。
它们的作用范围不同。
我个人是偏向于使用Additional Information小部件+自定义CSS来优化产品属性的展示的，会更加灵活；Product Data Tab小部件展示了三个部分的内容（Product Description – 产品描述、Attributes – 产品属性、以及Review – 产品评论），如果想用这个小部件而且只想要展示产品属性（Attributes），那么我目前找不到方法来实现。
3. 发布产品详情页模板
我们对产品详情页进行样式和内容调整，达到预期的效果以后，即可发布产品详情页模板，应用在特定的产品及分类中。
点击右上角“Publish”按钮旁边的下箭头。
选择“Display Conditions”，设置展示条件。
如果想要在所有产品中使用该模板，我们直接选择“Products”即可。如果只是想应用在特定的分类下的产品，我们就选择“In Category”，然后选择特定分类。
设置完展示条件，点击右下角的Save & Close，然后点击“Publish”按钮发布即可。
4. 个性化产品详情页
我们在第三步中已经将产品详情页的模板发布了，但是在现实情况中，每个产品都有不同的特性需要来重点展示，我们在使用产品详情模板的时候是没有办法将这些“特性”展示出来的（除了产品参数我们可以用上面提到的小部件来展示），比如：适用的解决方案、产品特性介绍、产品彩页和说明书下载等。
所以我们需要针对单个产品来进行个性化展示，才能充分突出我们的产品卖点和体现出我们的产品优势。
如果我们想要对产品详情进行个性化设置，我们需要：
第一步：回到我们的产品详情页模板，将Post Content小部件拖动放置在模板当中。
第二步：进入到Elementor > Settings > General > Post Types中，将Products类型勾选上，点击Save Changes保存Elementor的设置。
我们就可以使用Elementor编辑器对单个产品进行个性化编辑了。
第三步：打开单个产品的后台编辑页面
这个时候我们就可以看到有“Edit with Elementor”这个选项了。
点击进入到Elementor可视化编辑页面，对单个产品的进行个性化编辑。
*在此处使用Elementor编辑后的内容会展示在Post Content小部件里面。
这里说一下Product Content跟Short Description这两个小部件的不同。
Short Description小部件展示的内容对应产品的Product short description部分：
而Product Content小部件展示的是这下面的内容：
那么我们点击“Edit with Elementor”后就可以进入到可视化编辑页面，此红框处能够让我们使用Elementor来突出产品的个性化内容：
我们可以在此处添加包括但不限于以下内容：
- 产品的相关文档下载
- 产品的相关视频
- 产品对应的解决方案
- 特性（Features）介绍
关于如何使用Elementor的容器和小部件搭建产品的个性化内容，可以看这篇Elementor容器和布局教程。
比较容易混淆的一点是，Post Content小部件这里面添加的内容是针对当前产品的，并不作用与其他使用该详情页模板的产品。
