如何使用 Essential Addons 自定义 WooCommerce 商品图片外观（Elementor 免费方案）

WordPress1周前发布 lyc054211

2 0 0

在 WooCommerce 商店中，商品图片是用户关注的重点。如果想要打造更具吸引力和交互性的产品页，对于不想使用Elementor Pro这个付费的插件，那么 Essential Addons 就是你的理想选择。

本教程将带你们了解如何在 WordPress 中使用 Elementor 免费版和 Essential Addons 插件，轻松实现商品图片的自定义展示，包括轮播、缩略图排列、弹出查看等高级视觉效果。

一、插件准备工作

在开始之前，请确保你已完成以下设置：

已安装并激活：
- WooCommerce 插件
- Elementor（免费版）
- Essential Addons for Elementor 插件
商店产品已添加，确保产品有图片

二、启用 Woo Product Images 小工具

进入后台，点击「 Essential Addons > Elements 」

滚动到 WooCommerce Elements 区域，启用「 Woo Product Images 」小工具

点击页面底部的「Save Settings（保存设置）」

三、创建并编辑产品页面模板

进入「Templat > Theme Builder（主题构建器）」

点击「Product Single（单个产品）」标签页

可选择现有模板进行编辑，或点击「Add New Template（添加新模板）」

设置如下参数：
- 编辑器选择：Elementor
- 模板类型：Product Single
- 命名模板并点击「Create Template」

模板创建完成后，点击「Edit with Elementor」进入编辑器。

四、添加并自定义商品图片展示

添加组件：

在 Elementor 中搜索「Woo Product Images」

将该组件拖动至页面中合适的位置

内容设置（Content Tab）：

可以进行以下设置：

调整 图片尺寸（Image Resolution）
开启/关闭 分页（Pagination）
设置 缩略图数量与位置
设置 图片导航样式、循环切换（Loop）
启用 弹窗查看大图（Image Popup）

样式设置（Style Tab）：

进一步美化商品图片：

图片背景色、边框样式、间距
缩略图之间的间隔
鼠标悬停时的样式变化
弹窗样式与尺寸设置

高级设置（Advanced Tab）：

可通过调整以下选项精细优化图片显示：

Margin（外边距）
Padding（内边距）
响应式设置与 Z-index 层级

五、设置显示条件并发布模板

点击右下角的「Publish（发布）」

在弹出的窗口中点击「Add Condition（添加条件）」
设置显示逻辑如下：
- 第一项：Include
- 第二项：Singular
- 第三项：Product

点击「Save & Close（保存并关闭）」

这样模板就会自动应用于所有 WooCommerce 单个产品页面。

六、查看效果

访问任意一个商品页面，就能看到刚刚设置的商品图片展示效果，整体更美观、专业，也提升了用户浏览体验。

七、Essential Addons 套餐介绍

Essential Addons 为 Elementor 用户提供多个强大的功能套餐，可以以满足不同需求。

以下是官方套餐价格表：

套餐	价格	时长	小工具	扩展功能
Lifetime Unlimited	$199.98 $249	无限制	85+ 小工具	15 个扩展
Unlimited	$79.98 $99	1 年	85+ 小工具	15 个扩展
1 Website	$39.98 $49	1 年	85+ 小工具	15 个扩展

可以看到官方Unlimited套餐是79美金，价格还是相对较贵的，由于我们网站和Essential Addons官方合作推广，拿到了官方优惠价格，请点击此链接咨询和购买。

总结

使用 Essential Addons for Elementor 插件，可以在不购买 Elementor Pro 的前提下，灵活地自定义WooCommerce 商品页面中的图片展示区域，包括缩略图、弹出预览、分页导航等功能，让你的产品页更具视觉冲击力。想了解更多WordPress相关的教程和资讯，请关注光子波动网，拥有最全的WordPress教程和最活跃的WordPress交流社区。

了解宝藏号的更多信息

订阅后即可通过电子邮件收到最新文章。

文章版权归作者所有，未经允许请勿转载。

如何使用 Essential Addons 自定义 WooCommerce 商品图片外观（Elementor 免费方案）

一、插件准备工作

二、启用 Woo Product Images 小工具

三、创建并编辑产品页面模板