本文介绍使用Elementor Loop Item实现产品列表图片交换（Swap）。本教程是基于Elementor Pro的Loop Item功能和通过ACF实现的自定义产品内容类型制作。
产品列表图片交换（Swap）效果，其实就是当你鼠标移动到产品列表图片上时，会自动切换另外一张图片。
如果你是使用Woocommerce管理产品的话，本站福利Elementor 扩展插件UAE的Woo-Product元素就提供产品列表图片Swap的设置，具体操作如下图：
如果你对Elementor Loop Item以及自定义内容类型和ACF不熟悉，请先阅读下面两篇文章。
1、用ACF为产品添加一个Swap Image字段
在你的产品字段组中添加一个新图片字段。
2、编辑产品为产品添加Swap图片
Swap图片可以用你要传入产品相册中的图片，也可以用其他产品宣传图片，具体看你的产品展示需求。
3、修改对应的Loop Item模版实现产品列表图片交换
进入你的Loop Item 模版编，删除原来的Feature Image元素。
在原来的Feature Image元素的位置，放一个Containner容器。
调整Containner到适合的高度
在Containner的Additional Options中将HTML tag改成a（link），并设置Link的动态标签为Post URL。这里是为了让用户点击图片是可以跳转到对应的产品详情页。
然后切换到Containner的Style选项卡，设置background，在背景图的位置通过动态标签，设置Containner的默认背景图为产品的特色图片。
让后你可以根据自己的需求调整图片的位置和显示尺寸
切换Container Background属性的Hover属性标签。
通过背景图片设置的动态标签，选择ACF Image Field标签。
然后点击设置好的标签，在下拉中选择Swap Image字段。
最后再设置一下Hover背景图片的位置和显示尺寸，以及变化过渡时间。
保存之后，刷新页面查看效果。
默认情况下的产品图片
鼠标移动过去的产品图片。
4、总结
Loop Item模版的灵活优势非常明显，这个方法也是我自己在做的过程中领悟的，如果你熟练了Elementor，也可创新出很多不同的玩法。
当然过程中也有一些细节需要注意：
1、Containner是一个布局元素默认的HTML标签是Div，你想要产品图片点击可以跳转的话，需要讲Containner的HTML标签改成A标签；
2、如果你希望制作过程顺利，请按照我的教程打开对应的内容进行编辑，比如你先打开了Loop Item，然后又去添加了ACF字段，然后编辑了产品的字段，那么你在返回编辑Loop Item模版时一定要刷新，否则你更新的数据是不会实时同步的。
