本文将逐步介绍如何使用
2021/5更新详细的视频教程
下方是2021年写的简单版图文教程
- 点击菜单:模板》添加新模板,选择模板类型为single product,输入模板名称,譬如single product
![elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 9 - 如何用Elementor制作woocommerce产品详情页(视频实例) elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 9](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B-9.png)
- 点击“创建模板”按钮,可进入下图所示的library页面:
- 左键移动到模板上方,将出现放大镜按钮,点击可预览模板;
- 选择喜欢的模板,点击insert按钮即可导入;
![elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 8 - 如何用Elementor制作woocommerce产品详情页(视频实例) elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 8](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B-8.png)
导入后,系统会自动选择一个产品数据嵌入,以便我们直观看到效果,但依然有一些看不到内容的元素,譬如价格、加入购物车,那是因为我们上传产品时没有填写对应内容
![elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 7 - 如何用Elementor制作woocommerce产品详情页(视频实例) elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 7](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B-7.png)
对不需要的元素可以使用右键删除功能。
![elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 6 - 如何用Elementor制作woocommerce产品详情页(视频实例) elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 6](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B-6.png)
如果你想更换一个产品以预览效果,那么按照下图的数字顺序操作,以更换产品。
![elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 5 - 如何用Elementor制作woocommerce产品详情页(视频实例) elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 5](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B-5.png)
最后,点击publish,点击add condition为include:products,保存即可,然后我们就可以去预览一下效果了。
![elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 4 - 如何用Elementor制作woocommerce产品详情页(视频实例) elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 4](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B-4.png)
现在打开一个产品页面预览一下效果。
![elementor single product 12 - 如何用Elementor制作woocommerce产品详情页(视频实例) elementor single product 12](https://www.loyseo.cn/wp-content/uploads/2021/05/elementor-single-product-12.png)
接下来你还可以对模板进行样式调整、或者添加自定义的产品字段。
点赞
Your page rank: