在 WooCommerce 商店中,商品图片是用户关注的重点。如果想要打造更具吸引力和交互性的产品页,对于不想使用Elementor Pro这个付费的插件,那么 Essential Addons 就是你的理想选择。
本教程将带你们了解如何在 WordPress 中使用 Elementor 免费版和 Essential Addons 插件,轻松实现商品图片的自定义展示,包括轮播、缩略图排列、弹出查看等高级视觉效果。
一、插件准备工作
在开始之前,请确保你已完成以下设置:
- 已安装并激活:
- WooCommerce 插件
- Elementor(免费版)
- Essential Addons for Elementor 插件
- 商店产品已添加,确保产品有图片
![图片[1]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421165825789-image.png)
二、启用 Woo Product Images 小工具
- 进入后台,点击「 Essential Addons > Elements 」
![图片[2]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421162052483-image.png)
- 滚动到 WooCommerce Elements 区域,启用「 Woo Product Images 」小工具
![图片[3]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421162328348-image.png)
- 点击页面底部的「Save Settings(保存设置)」
三、创建并编辑产品页面模板
- 进入「Templat > Theme Builder(主题构建器)」
![图片[4]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421163042373-image.png)
- 点击「Product Single(单个产品)」标签页
![图片[5]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421163136954-image.png)
- 可选择现有模板进行编辑,或点击「Add New Template(添加新模板)」
![图片[6]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421163151241-image.png)
- 设置如下参数:
- 编辑器选择:Elementor
- 模板类型:Product Single
- 命名模板并点击「Create Template」
![图片[7]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421163210345-image.png)
模板创建完成后,点击「Edit with Elementor」进入编辑器。
四、添加并自定义商品图片展示
添加组件:
- 在 Elementor 中搜索「Woo Product Images」
![图片[8]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421163420320-image.png)
- 将该组件拖动至页面中合适的位置
内容设置(Content Tab):
可以进行以下设置:
- 调整 图片尺寸(Image Resolution)
- 开启/关闭 分页(Pagination)
- 设置 缩略图数量与位置
- 设置 图片导航样式、循环切换(Loop)
- 启用 弹窗查看大图(Image Popup)
![图片[9]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421163539842-image.png)
样式设置(Style Tab):
进一步美化商品图片:
- 图片背景色、边框样式、间距
- 缩略图之间的间隔
- 鼠标悬停时的样式变化
- 弹窗样式与尺寸设置
![图片[10]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421163557874-image.png)
高级设置(Advanced Tab):
可通过调整以下选项精细优化图片显示:
- Margin(外边距)
- Padding(内边距)
- 响应式设置与 Z-index 层级
![图片[11]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421164010283-image.png)
五、设置显示条件并发布模板
- 点击右下角的「Publish(发布)」
![图片[12]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421164525862-image.png)
- 在弹出的窗口中点击「Add Condition(添加条件)」
- 设置显示逻辑如下:
- 第一项:Include
- 第二项:Singular
- 第三项:Product
![图片[13]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421164544269-image.png)
- 点击「Save & Close(保存并关闭)」
这样模板就会自动应用于所有 WooCommerce 单个产品页面。
六、查看效果
访问任意一个商品页面,就能看到刚刚设置的商品图片展示效果,整体更美观、专业,也提升了用户浏览体验。
![图片[14]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250421164613750-image.png)
七、Essential Addons 套餐介绍
Essential Addons 为 Elementor 用户提供多个强大的功能套餐,可以以满足不同需求。
以下是官方套餐价格表:
| 套餐 | 价格 | 时长 | 网站激活 | 支持与更新 | 小工具 | 扩展功能 | Templatley PRO 免费访问 |
|---|---|---|---|---|---|---|---|
| Lifetime Unlimited | $199.98 |
无限制 | ✔ | ✔ | 85+ 小工具 | 15 个扩展 | ✔ |
| Unlimited | $79.98 |
1 年 | ✔ | ✔ | 85+ 小工具 | 15 个扩展 | ✔ |
| 1 Website | $39.98 |
1 年 | ✔ | ✔ | 85+ 小工具 | 15 个扩展 | ✔ |
可以看到官方Unlimited套餐是79美金,价格还是相对较贵的,由于我们网站和Essential Addons官方合作推广,拿到了官方优惠价格,请点击此链接咨询和购买。
![图片[15]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)](https://www.361sale.com/wp-content/uploads/2025/04/20250422101652842-image.png)
总结
使用 Essential Addons for Elementor 插件,可以在不购买 Elementor Pro 的前提下,灵活地自定义WooCommerce 商品页面中的图片展示区域,包括缩略图、弹出预览、分页导航等功能,让你的产品页更具视觉冲击力。想了解更多WordPress相关的教程和资讯,请关注光子波动网,拥有最全的WordPress教程和最活跃的WordPress交流社区。
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:info@361sale.com | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |























![表情[wozuimei]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

暂无评论内容