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

在 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 用户提供多个强大的功能套餐，可以以满足不同需求。

总结

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