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

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

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

一、插件准备工作

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

  • 已安装并激活:
    • WooCommerce 插件
    • Elementor(免费版)
    • Essential Addons for Elementor 插件
  • 商店产品已添加,确保产品有图片
图片[1]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)

二、启用 Woo Product Images 小工具

  • 进入后台,点击 Essential Addons > Elements
图片[2]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 滚动到 WooCommerce Elements 区域,启用「 Woo Product Images 」小工具
图片[3]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 点击页面底部的「Save Settings(保存设置)

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

  • 进入「Templat > Theme Builder(主题构建器)
图片[4]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 点击「Product Single(单个产品)」标签页
图片[5]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 可选择现有模板进行编辑,或点击「Add New Template(添加新模板)
图片[6]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 设置如下参数:
    • 编辑器选择:Elementor
    • 模板类型:Product Single
    • 命名模板并点击「Create Template」
图片[7]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)

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

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

添加组件:

  • 在 Elementor 中搜索「Woo Product Images
图片[8]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 将该组件拖动至页面中合适的位置

内容设置(Content Tab):

可以进行以下设置:

  • 调整 图片尺寸(Image Resolution)
  • 开启/关闭 分页(Pagination)
  • 设置 缩略图数量与位置
  • 设置 图片导航样式循环切换(Loop)
  • 启用 弹窗查看大图(Image Popup)
图片[9]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)

样式设置(Style Tab):

进一步美化商品图片:

  • 图片背景色、边框样式、间距
  • 缩略图之间的间隔
  • 鼠标悬停时的样式变化
  • 弹窗样式与尺寸设置
图片[10]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)

高级设置(Advanced Tab):

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

  • Margin(外边距)
  • Padding(内边距)
  • 响应式设置与 Z-index 层级
图片[11]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)

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

  • 点击右下角的「Publish(发布)
图片[12]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 在弹出的窗口中点击「Add Condition(添加条件)
  • 设置显示逻辑如下:
    • 第一项:Include
    • 第二项:Singular
    • 第三项:Product
图片[13]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)
  • 点击「Save & Close(保存并关闭)

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

六、查看效果

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

图片[14]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)

七、Essential Addons 套餐介绍

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

以下是官方套餐价格表:

套餐 价格 时长 网站激活 支持与更新 小工具 扩展功能 Templatley PRO 免费访问
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官方合作推广,拿到了官方优惠价格,请点击此链接咨询和购买。

图片[15]-如何使用 Essential Addons 自定义 WooCommerce 商品图片外观(Elementor 免费方案)

总结

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


联系我们
教程看不懂?联系我们为您免费解答!免费助力个人,小企站点!
客服微信
客服微信
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
© 转载声明
本文作者:初季
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容